While a lot of languages have pretty well defined sets of best practices, CSS seems to fluctuate on a monthly basis. Is the cascade good or bad this week? Am I trying to be modular, or trying to have a few selectors as possible? Are classes good or bad? If you search in Google for "CSS Best Practices", you'll numerous articles explaining why "X Method" is the "RIGHT WAY". Problem is, that a lot of times these different methods contradict. The most sane article I've read on the topic in a long time was by Chris Coyier over on CSS-Tricks, entitled, "CSS: Just Try and Do A Good Job". He brought up a lot of these issues, and reached the conclusion that as long as you are trying to keep things logical and easy to read, then you're on the right track. Don't be lazy, do what makes sense, etc. Inspired by this, I'd like to share my set of CSS Best Practices ... the method to my madness, if you will.
Use One Stylesheet
As tempting as it is to split up stylesheets, I try to avoid this for performance issues. In this, as with everything, there are other opinions, but I prefer to avoid multiple files being downloaded.
Attach Styles to Elements (Not Classes or IDs)
This is the main point. With the rise of HTML5, we have a lot more elements to play with. I like to attach my styles directly to the elements, and then use classes as modifiers. I try to avoid using IDs at all (for styles). Example:
<article>
<h2>Header</h2>
<p>Content goes here.</p>
<p class="highlighted">Content goes here.</p>
</article>h2 {styles here...}
span {styles here...}
span.highlight {modified styles}My styles are attached to the h2 and span elements, while the class is used solely as a modifier. I never use classes by themselves, and I almost never use IDs. As with any rule, there are exceptions. The website logo, for example, I might identify with #logo, since it's unique on the entire site.
Nesting Is Okay
If I have a span inside an article that behaves in one way, plus a span in the footer which behaves differently, I'll use:
article span {styles here...}
footer span {styles here...}Rather than give them classes. Many people say that we should try to avoid over specificity, and that nesting is entirely bad. I agree that we should try to minimize specificity, but we only have a limited number of elements to work with so there's going to be some. I do sometimes get around the element limit by "cheating though", which leads me to my next point:
Custom Elements (The "Bad" Way)
HTML5 gives us an official way to make custom elements. It's clunky because they have to have two words separated by a dash. Plus browser compatibility sucks. But here's the thing. As long as we are just talking container elements, I can name it anything I want to. I just have to make sure to define it with "display:block" in the CSS. I can have
<person>
<h3>
<display>John Smith</display>
<edit></edit>
<cancel></cancel>
</h3>
<span class="editable">
<display>(555)-555-5555</display>
edit></edit>
cancel></cancel>
</span>
<span>
display>johnsmith@email.com</display>
edit></edit>
<cancel></cancel>
</span>
</person>person {Styles here...}
person display {Styles here...}
person edit {Styles here...}
person cancel {Styles here...}Person, Display, Edit, and Cancel are all fake elements. But in this example (taken from a web app I'm currently building) they allow for code which is much easier on the eyes. Take a look at the same structure without custom elements.
<div>
<h3>
<div>John Smith</div>
<button class="edit"></button>
<button class="cancel"></button>
</h3>
<span class="editable">
<div>(555)-555-5555</div>
<button class="edit"></button>
<button class="cancel"></button>
</span>
<span>
div>johnsmith@email.com</div>
button class="edit"></button>
button class="cancel"></button>
</span>
</div>div.person {Styles here...}
div.person h3 div {Styles here...}
div.person span div {Styles here...}
div.person button.edit {Styles here...}
div.person button.cancel {Styles here...}The HTML is longer and we have to add another line of CSS, or add more classes.
Summary
As stated above, there is no one right answer here for how to structure your CSS. my method is to use custom elements, apply styles to elements, use classes as modifiers, and avoid IDs. What about you? Let me know in the comments what you think.
