Menu
When starting a new website project, there's only so much global CSS that one can foresee using. (Update: There's also only so many things you can pick up on during development.)
As the project goes on, we all add a lot of page-specific class and ID selectors in HTML for styling and layout with external CSS files. (I am defining "page-specific CSS" here a little differently — I don't mean <style> inside the <head> but, for example, I typically give the body of each page a unique ID.)
p, img, figure,
figcaption, section, article, div, etc.padding, margins, font properties, widths,
heights, etc.The question is — once a project is complete, and a big CSS file has been created — what's the best approach to go back and reduce/remove what's unnecessary? I mean, by combining CSS rules to be global and catch-all as much as possible (without breaking anything).
P.S. In HTML5, I try to avoid setting a class or ID to an element unless I have to. I believe that general rules can work really well (for the most part, of course).
409
You should read Johnathan Snook's book Scalable and Modular CSS for some insight for dealing with this problem. Not using classes on elements is your prerogative, but it's one of the most powerful tools we have for writing maintainable CSS. Harry Roberts' "Big CSS" presentation also provides some powerful insight and tools for so-called "object-oriented" css. So, my first bit of advice is to start utilizing classes in your markup.
I understand the concern for wanting to write semantic html, which is probably why you shy away from using classes - but classes on html elements do not detract from semantics, as long as you write them intelligently. In fact, they usually (always, really) provide more information about an element.
The difficult part is writing classes that are semantic, that describe the function of an element rather than the presentation. Yahoo's Design Pattern Library is a really good place to get examples of semantic class names, as well as a great resource for many useful design patterns in web architecture.
As a brief tl;dr:
When organizing your CSS, use the cascade to your advantage. Set up your reset first, followed by global styles - these are generic layout styles applied directly to element selectors. Next, write your modules - these are your classes and they should be element-agnostic.
Avoid qualifying your classes with tag selectors. In order to provide documentation and guidance for anyone else maintaining your site, you should use "quasi-qualified selectors" instead
For instance, rather than:
div.carousel { /* style information here */ }
instead write:
/* div */ .carousel { /* style information here */ }
With this technique, you can provide documentation for how you expect your components to be used, without actually qualifying them and raising the specificity (thus destroying their modularity).
Beyond all else, remember this: balance your specificity. Well-architected CSS sits right at the cusp of the general and the specific. You need to use classes in order to make your CSS modular and reusable, but you also need to avoid bloat.
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
