Friday, November 16, 2012 Improving your HTML and CSS with SMACSS

I'm a big fan of frameworks and I'm always looking for new ways to improve the structure and maintainability of my code. I recently discovered SMACSS (Scalable and Modular Architecture for CSS) which is an approach to web development created by Jonathan Snook.

At a high level SMACSS aims to change the way we turn designs into code. Instead of working in a "page mentality" where we look at a single page's design and try to find the best way of turning that page into code, SMACSS advocates taking a step back and trying to identify repeating visual patterns. Those patterns are then coded into flexible modules, which should be as independent as possible from the individual page context.

SMACSS advocates arranging CSS rules into categories. By categorising these rules, we can identify patterns and define better practices around each of these patterns. There are five categories:

1. Base
2. Layout
3. Module
4. State
5. Theme

Base rules are the defaults. They are almost exclusively single element selectors but could include attribute selectors, pseudo-class selectors, child selectors or sibling selectors. Essentially, a base style says that wherever this element is on the page, it should look like this.

Layout rules divide the page into sections. Layouts hold one or more modules together.

Modules are the reusable, modular parts of our design. They are the callouts, the sidebar sections, the product lists and so on.

State rules are ways to describe how our modules or layouts will look when in a particular state. Is it hidden or expanded? Is it active or inactive? They are about describing how a module or layout looks on screens that are smaller or bigger. They are also about describing how a module might look in different views like the home page or the inside page.

Theme rules are similar to state rules in that they describe how modules or layouts might look. Most sites don’t require a layer of theming but it is good to be aware of it.

I've created a simple template based on SMACSS so you can see how it works. Firstly, here's the HTML:

And here's the CSS:

My template is available to download from GitHub.

Tags

Comments

Be the first to add a comment!