Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

Normally I start a project working on a site, I'd do the basic html skeleton and then start tweaking the styles using CSS. Slowly I'd just add one CSS rule after another with no "organized structure" or groupings in the CSS rules.

And at the end of the project I look at the CSS document and the abomination I have created. Often spending quite some time trying to search for the spot in the document where I added a certain style.

Is there some type of 'rule-of-thumb' that one can use in laying out and getting more organized in your CSS documents? And I'm not just talking about adding comments...

share|improve this question

3 Answers 3

up vote 2 down vote accepted

a good advice is to start with an existing web framework like bootstrap or foundation, these well help you get a default well written clean and fast CSS, which you can extend and use as a guide for your style sheet.

classes should be descriptive and with as few actions as possible, also splitting your CSS into multiple ones that are concern separated, i mean one for buttons and one for common etc, this will help adding some organization to your CSS.

try to organize your CSS with a top-down structure, starting with generics like body and p, afterward #xxxx #yyyy, use multiple classes to style a tag, stuff like, class="pull-left title".

if you used a framework all best practices are utilized, try to follow the same method as much as possible.

Edit - Comment reply-----

i personal use different CSS for my site customization, because if i needed to upgrade the framework in case they released something new i won't have to keep track of changes manually.

and i add a different css to frame work that i call extension, which init i keep everything that i see useful for the future to be carried out to next project, so this would act as my an extension on any framework i use.

Yours, OQ

share|improve this answer
    
Great advice! Thank you very much. Also quick question, if you use something like Foundation for instance. Should you do the amendments in THEIR already existing CSS files or should you create your own CSS documents e.g. "custom.css" that over-writes and tweaks their CSS further? –  Dean Grobler May 9 '13 at 6:55
1  
I edited my answer to address your comment so future users can benefit from it. –  omarqa May 9 '13 at 7:55

I would advise against using bootstrap to start off. It really depends on your needs if you want your site to look exactly like bootstrap then it is fine but once you need to change something that isn't configurable you can waste a lot of time. Try not having an input focus color of blue for example.

My recommendation would be to use something like: http://necolas.github.io/normalize.css/ to deal with cross browser issues and then to build your styles in Sass/Compass or Less. I prefer Sass because it has Compass which is a framework built from Sass that has lots of useful mixins and functions. Compass also allows you to easily separate your files but still build them into one. I have individual files for core tags, common layouts, a nav bar and footer bar and many others but they will all compile to one css file. That file will have comments above each rule which shows while file and line they were generated from.

share|improve this answer
    
I'll definitely have a look into that, sounds really awesome. Thanks! –  Dean Grobler May 13 '13 at 4:29

Independently if you're using a CSS Framework, Sass/Compass, Less, etc. or not, you should definitely take a look at SMACSS:

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.

share|improve this answer
    
I know that your quote is just copied from the website but what is rigid about Sass/Compass or Less? –  pllee May 10 '13 at 13:54
    
@pllee Nothing. I just wanted to point out that you can use SMACSS for those as well. –  nietonfir May 10 '13 at 17:04
    
I think they should clarify their quote then :) –  pllee May 10 '13 at 18:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.