2007 / August 30^th/ Strategic Specificity

There’s a lot of hubbub about what exactly specificity is, but little talk of how to strategically use specificity to minimize maintenance, maximize flexibility and help others understand which rules to edit.

Widget A in container X and container Y

The most useful implementation of specificity I’ve used thus far is the ability to style a widget with the same HTML differently under two different contexts. We’d like use the same snippet of HTML in the main body content, and in the sidebar — but we’d like it to be styled differently under each context.

Alright, we’ll just style the widget for the main body content, and then override the style for the sidebar using a higher specificity. No problem, right? But which kind of higher specificity do we use? This is when strategic specificity comes into play. Just because you can override the styles with and ID doesn’t necessarily mean you should.

Easy answer, hard solution

The confusion starts because there’s just so many ways to style a particular element with CSS. You’ve got to remember, at all times you have the cascade, elements, IDs and classes to work with for most elements (I won’t cover pseudo-classes or advanced selectors not available to all major browsers). Your task is to choose what combinations of these selectors to use to most efficiently override a style.

Over the years, I’ve developed a good guide as to how to most efficiently use each type of specificity.

Cascade

I’ve found the most effective use of the cascade is when you can safely include a new CSS file. It works well for temporary redesigns (say, a winter refresh), or perhaps a one-off mini site that happens to use similar styles. Apple.com does a good job of using the cascade. All sites under Apple.com share similar common styles, but may appear drastically different. Appple provides a nice global css file, and then each site includes a new file underneath it (lower in the cascade) that overrides necessary styles.

Elements

Often times I end up using elements in my styles just so I know what they refer to. I know that p.message is a paragraph, and not a div. It’s also nice to use element selectors to re-use common class names (like: important, message, error, success, description) on multiple elements (like paragraph, blockquote, div) and maintain custom styling.

IDs

I find the best use of IDs are in sections and one-off widgets. I try to keep it a habit to keep a unique ID per top-level section (i.e. products, about, news) so that I can accommodate different column widths, backgrounds, and styling throughout sections. IDs are a great way to do this.

Classes

Classes come in handy when you want to style widgets under a certain container. Whether it be an error block, a news listing, or a homepage feature. Classes are the way to go!

Tips for using specificity

• Always use the least-specific selector possible: This will save you all kinds of headaches later on down the road. Sometimes you don’t need #body #main #content #quickpicks em.highlight. More often than not, these excessive selectors end up overriding styles in other places you wouldn’t expect. Narrowing down your specificity can save hours of frustration down the road trying to find which style is controlling your left margin.
• Use IDs sparingly: Notice how specific IDs are? Use them with caution. A style for #message p might accidentally override a style for p.important. Class names are your friend for generic styles. IDs are great for one-off elements.
• Use multiple CSS files… but don’t rely on the cascade: I like splitting up my CSS file into multiple files. I usually do it by section: Home, Products, News, etc. However, I style elements in the sections using IDs for specificity, not by the cascade. This is so I can include all of the CSS files on every page and not worry about cascade for specificity.
• Don’t use shorthand when overriding styles: Shorthand is a great technique for base styles, but comes back to bite you when overriding styles. Take the extra few minutes to type out margin-left and save yourself some headaches.
• When all else fails, Firebug! Seriously, you still haven’t downloaded it? Be sure you have the DOM inspector installed and Firebug can tell you exactly which styles are being overridden from where. How cool is that?

Conclusion

One of the greatest parts of CSS is how many ways you can accomplish the same goal. One of the worst parts of CSS is how many ways you can accomplish the same goal. You should take specificity seriously: it’s what separates code from poetry, and what separates out the people who really know CSS from the people who can write it. Next time you’re overriding a style: think about it for a minute and decide if your method is the best one available or not.

1. 

   Luis

   August 31^st | #

   Nice article. Just one comment: separating css by section isn’t always that good. It depends on the site you’re building up, and for the apple showcase, I think it’s nice to do it with cascade.

   I personally prefer this kind of sort (only adding another css by section if is required):

   • layout.css
   • forms.css
   • menu.css
   • ie6/ie7.css
   • tools.css (clearfix, floats, very common classes…)

Name

Email (will not be published)

Website (optional)