> - If you think you need variables (like in SASS), you are probably thinking about it the wrong way
I've yet to see CSS code for page layout without the usual awkwardness where margin-left of some element MUST equal some other element's width minus some bar's left offset, yadayada. It's for stuff like this that variables make sense. I wholeheartedly agree that if you need a variable to colour two bars and a heading orange, you're probably doing it wrong.
The blog you refer to only has an example with colours, which is just too easy.
I think you should definitely use multiple files. By all means concatenate them and minify them for production, but I find it very helpful to have CSS files for layout, forms, and specific sections of the site or app.
CSS complexity is increasing at a huge rate and the volume of CSS for even a simple site is running at hundreds of lines. Splitting it into separate files keeps it readable and reusable.
The main reason is that including IDs makes “selector points” much more complex.
A selected with one ID will outweigh a selector with two classes for instance. This can quickly lead to complexity because you need to use a ID many places in order to override a selector that used ID.
A class only used once serves the same purpose as ID (CSS-wise), expect that you avoid a lot of problems.
I might use IDs for anchor purposes (site.com/foo#section), but I never reference it in my CSS.
The problem is that as a site grows, it's common for things that were once unique to become multiple.
Also, if you just resolve to always use classes instead of ids, then you can eliminate the cognitive overhead that comes with every new selector of, "Should this be a class or an id?".
- Have only one CSS-file, unless your project is huge.
- Never use IDs
- Avoid reset CSS (espescially if you can ignore IE6/7
- If you think you need variables (like in SASS), you are probably thinking about it the wrong way
- Give classes functional names, not presentational
- Linebreaks after declaration. (Makes your CSS-file easier to navigate)
- Remember that you can use you media queries inside your CSS-file
Web designer Jens Meiert has some good articles:
http://meiert.com/en/blog/20090401/why-css-needs-no-variable...
http://meiert.com/en/blog/20080515/css-organization-and-effi...
http://meiert.com/en/blog/20070321/css-practice-pseudo-names...
http://meiert.com/en/blog/20090527/css-maintenance-issue-1/