CSS Best practices when starting a new project

Question

I wanted to know what's the best approach to take on, when starting work on a CSS of a big project? Because I see on most big projects (like wordpress) that they bunch all the classes sharing same properties together, however, how can you know before hand that they'll be matched, or is that the post-programming micro-work?

Anyway, Just wanted to know the best practises for grouping classes, ids and such, and what's the industry standard approach on this manner.

Answer 1

CSS Frameworks

For big projects, you'll likely want extra functionality on top of 'regular' css, like nesting, inheritance and mixins. Either one of these should get the job done:

• SASS
• xCSS
• LESS
• OOCSS

Performance optimization

Also, you'll want to do automatic performance optimization (concatenation, minification, and compression of source files), so take a look at:

• Minify

or whatever suits your development platform.

Naming

Many large sites use some kind of prefix on class names to separate style classes from script classes. E.g.:

<div class="navigation dynHomepageNav">(...)</div>

Where the dyn* class is used as a selector in scripts, while the navigation class is used for styling. The benefit is you can have coders refactoring scripts without touching the design, and designers changing the templates without worrying about breaking functionality.

However, with modern Javascript frameworks and HTML5 you can do better; use semantic naming for IDs and classes, apply style using those IDs and classes, and use data-* attributes for all script hooks instead. Example:

<section class="navigation" data-hook="homepageNav">(...)</div>

Which you will style using the class identifier:

.navigation {
  border: 1px dotted #9c9;
  padding: 12px;
}

And script using the data hook (using James Padolsey's data selector attribute for jQuery):

$('section:data(hook="homepageNav")').fadeIn();

It may not be as concise or look as familiar as the good old use-semantic-classes-for-everything method, but it will create a neat separation of style and behavioral properties, which you'll appreciate once you have 50.000 lines of HTML and you need to revamp the design.