5 Methodologies for Architecting CSS

For those looking for a better way to architect your CSS, today's post provides a list of methodologies for architecting more organized CSS.

Architecting CSS is no easy task, but luckily we have tools like LESS and SASS to assist in our modular design.

However, there is another level to CSS which includes how to name your selectors, where should they reside, and how to keep them granular enough for reuse.

Writing CSS is no different from writing C#, Java, or PHP. If a developer/designer was brought on-board and they were given your project, would they be able to understand the CSS?

The collection of CSS methodologies below are strictly meant to provide structure and readability to your CSS. Where does a :hover go for your links? What are some base single-selector styles being used across all pages?

Each CSS methodology is not like a silver bullet that you download and voila...you have automatic CSS standards. These methodologies are standards documents of how CSS should be structured and written.

All of these methodologies aren't meant to be used at once, but meant to be read and understood and then determine which one best suits your needs. Once you find one that gels with the way you write CSS, it makes your CSS a little more manageable (and readable).

SMACSS (pronounced Smacks)

SMACSS shows you how to structure your CSS to allow for flexibility and maintainability as your project grows.

The CSS for SMACSS is broken down into the following sections:

1. Base - The defaults; Single-element Selectors
2. Layout - Divide the page into sections; Layouts hold one or more modules together.
3. Module - Reusable, modular parts of our design
4. State - How our modules look when in a particular state
5. Theme - How modules or layouts may look

Each section goes into more detail on the site.

In addition, they use naming standards, selector performance, and prototyping.

They even have an ebook to download for offline learning.

MaintainableCSS

MaintainableCSS.com is another standards document for writing modular, scalable, and maintainable CSS.

The site is well-structured and provides a great number of examples on how to write proper CSS.

If you've worked with Bootstrap or jQuery UI, there are some similarities regarding CSS state, naming conventions, reuse, and modifiers.

In one of their convention examples, they describe how to name a search results module.

/* module container/root */
.searchResults {}
/* components of a module */
.searchResults-heading {}
.searchResults-item {}
/* state: such as AJAX loading */
.searchResults-isLoading {}

As you can see, this is less confusing than .search-results .item {}.

CSS Guidelines

CSS Guidelines provides "High-level advice and guidelines for writing sane, manageable, scalable CSS." These standards were documented by Harry Roberts, a front-end architect from the UK.

His CSS Guidelines drill down as far as how to format your CSS with multi-lines, how to title your CSS, and how to apply SOLID principles to your CSS.

If you are looking for a good beginner to intermediate guide on getting started with writing clean styles, I would definitely recommend these guidelines.

BEM (Block Element Modifier)

The BEM methodology allows you to "create reusable components and code-sharing in front-end development."

Their approach is similar to maintainablecss.com, but they provide a smaller subset of sections called Block, Element, or Modifier.

• Block - A standalone entity that has meaning on it's own.
• Element - Parts of a block and have no standalone meaning. They are semantically tied to its block.
• Modifier - Flags on blocks or elements. Use them to change appearance or behavior.

With your CSS broken down into these three simple categories, this makes your CSS even easier to maintain.

This is a basic methodology for structuring your CSS and naming your styles properly.

OOCSS (Object Oriented CSS)

OOCSS takes more of a developer approach when writing CSS. Every developer knows what inheritance is so why not apply those techniques to CSS?

The whole idea of OOCSS is to promote reuse of CSS styles, patterns, and abstract modules, to separate the structure from the skin, and to separate the container and content.

Here's a good example of what I mean.

As a developer, you can see the "code re-use"for our CSS classes? This is what OOCSS accomplishes.

Additional Reading

• An Overview of OOCSS, BEM, SMACSS (CSS Methodologies/Practices) with References
• Maintainable CSS with BEM
• Scalable CSS

Conclusion

While there are a number of other CSS methodologies and from what I've seen in the wild, these are the more popular methodologies.

I, personally, am trying to integrate MaintainableCss into my workflow and I'm liking the standards they documented.

Is there a different methodology you like? Are you using straight CSS with your own standards? Post your comments below.