Scalable and Modular Architecture for CSS

One of my web heroes Jonathan Snook recently released a website about organising CSS:

I’ve long lost count of how many web sites I’ve built. You’d think after having built a few hundred of them I’d have discovered the “one true way” of doing it. I don’t think there is one true way. What I have discovered are techniques that can keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain.

I have long tried to grapple with the same problem and after a week or so really think this idea and website has legs. Below is a cut down version for quick reference, read and then head over to Scalable and Modular Architecture for CSS.

The four types of categories are:

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

1. Base styles are the defaults that we set. They’re almost exclusively single element selectors but it could include attribute selectors, pseudo-class selectors, child selectors or sibling selectors. Essentially, a base style says that where ever this element is on the page, it should look like this.

 Examples of Base Styles

html, body, form { margin: 0; padding: 0; }

input[type=text] { border: 1px solid #999; }

a { color: #039; }

a:hover { color: #03C; }

2. Layout styles divide the page into sections. Layouts hold all your modules together

Examples of Layout Styles

#header, #article, #footer {    width: 960px;   margin: auto;}

.l-header {    float: left; }

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

This is the meat of the page. Modules sit inside Layout components. Modules can sometimes sit within other Modules, too. Each Module should be designed to exist as a standalone component.

4. State styles 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?

.s-error {    color: #F00;    background-color: #FEE; }

 Grouping properties  

1. Box – display, float, position, left, top, height, width and so on.
2. Border- border-image, and border-radius.
3. Background
4. Text – font-family, font-size, text-transform, letter-spacing etc
5. Other