What is the best way to construct your CSS documents?

Question

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...

Answer 1

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

Answer 2

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.

Answer 3

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.