Five Methodologies for Architecting 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 they should reside, and how to keep them granular enough for reuse.

Learn the Structure of CSS to Make a Difference

It can make life a lot easier on yourself as a programmer if you are willing to learn the structure of CSS and how it works out. You just need to figure out what is going on with this and make sure you can end up mastering it as you are likely to use it frequently. 

Many state that learning CSS is not much different from learning other coding languages, but it does take some time to get a grip on it. Just like learning any coding language, it is important to give yourself the time and space necessary to learn the intricacies of the code that you are working on now. 

Take a little time out of your day each day to learn a little more of the code, and then you should be all set. There is no shortage of need for people who can properly write CSS code, and that is why it is so important that you learn how to do so properly. It can lead you to learn a lot of valuable lessons that you ultimately use along the way. 

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 standard 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 you can 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 standard document for writing modular, scalable, and maintainable CSS.

The site is well-structured and provides a great number of examples of 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 its 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 the 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.

/* Without OOCSS Methodology */

.button {
  width: 100px;
  border: 1px solid black;
}

.widget {
  width: 200px;
  overflow: hidden;
  border: 1px solid black;
}

/* After applying OOCSS strategy */

.skin {
  border: 1px solid black;
}

.button {
  width: 100px;
}

.widget {
  width: 200px;
  overflow: hidden;
}

As a developer, you can see the "code reuse" 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 in the sidebar.