To start a conversation on the right night check What is a good CSS strategy? . Personally, I believe that @gregnostic strategies should be renamed to domains.
As I see it, every project with more than a dozen web pages really needs to implement different domains to a certain extent depending on their size.
Domains here (sorted by specificity):
Reset
Attempts to reach the baseline in browsers and environmental conditions. Made famous by Eric Meyer . Many people will miss this as a solvable problem, but as someone who works in the content management system on the page, believe that CSS reset is very important and can be a difficult task for an elegant solution (especially if the client uses the same one as you).
These selectors should be as general as possible. CSS class-based choices usually make no sense unless you need to reset inside a given shell.
Layout
Potential page structures that are often processed by the grid. They should be a little more specific, but should rely on some kind of recursive model. Something like:
.row { width: 100%; min-height: 30px; } .row .col { width: 100%; } .row.two .col { width: 50%; }
Although this can be done by selecting a tag, I believe that it is almost never intuitive for the next person, and you always end up with the magical appearance of the grid in the wrong place. Using classes helps keep the unwanted TM box smaller. For full implementation see:
Component / Functional
As a rule, I understand them in great detail. One of my favorite templates for this is Stubornella OOCSS . The basic concept is that to minimize code duplication, you bind attributes inside different CSS selectors and do everything you can to make them play well together. A simple example of this is Twitter Bootstrap .
While you might be able to wash yourself in child selectors, I would strongly recommend against it as the first time someone wants to change:
<button type="button"></button>
in
<button type="button"> <span class="ugly-orange-bordered-purple-thing"> My Button </span> </button>
Too general:
button { border: 99em purple dotted; }
It completely contradicts:
.ugly-orange-bordered-purple-thing { border: 5em orange dashed; background-color: purple; }
However, if you change the button to .btn , then you can simply move it to a range or just leave it.
Typography
Processing the appropriate display of various fonts under specified conditions. I always process this element selector as much as possible. I usually kick him with something like:
h1, h2, h3, h4, h5, h6 { font-family: sans-serif; } p, span, a, ... { font-family: serif; } h1 { font-size: 2em; } h2 { font-size: 1.8em; } ... .row h2 { font-size: 1.6em; }
Depending on the needs of the client, I can even add rules for flights inside buttons.
Subject
As in the Typography domain, I am more inclined to choose tags in this area. A topic is almost by definition thrown away (for example, Taco Bell and Mc Donald's do not want to have the same theme).
The Dojo toolkit has some good examples of setting themes as a separate layer (checkout nihilo ). They tend to practice here, but mostly for reuse, as I already mentioned.
Spam box
CSS junk mail box, we hope that most of them are contained within <!--[if lt IE 9]> , but each project has them, and they should go last. Keeping this empty is a priority, but it's not as important as doing the work (something I'm trying to remind myself of).
I am making this very specific, since the last thing you want is to change the rule, for example:
div div { white-space: nowrap; }
on an almost complete site. Where possible, I place them in a convenient place to work in the workplace.
Concluding notes
- When I do code reviews that have CSS, the Junk Box is the only place I want to see an identifier without a really good explanation.
- Like all other code, always try to follow the patterns of the surrounding code (unless that makes you bleeding eye).
- Let me know if I missed something.