Ξ

CSS methodologies

Published on 2016-12-25

CSS methodologies like OOCSS, BEM, atomic design, or build your own bootstrap have been all the rage recently. I feel that all of them are part of a general trend, but all of them also add their own quirks that sometimes water down the underlying ideas.

In this post I will try to pinpoint these ideas: Components, base styles, preprocessors and predictable styling. In the end I will also list some open questions that are not agreed upon between methodologies.

Component

All the methodologies agree that most CSS should be structured in the form of components. The details may differ though.

A basic component is an untempered HTML element. The input component, for example, can have states like :disabled or :focus and variants like [type="text"] or [type="password"]. The elements of an ul component are called li.

Now, if we want to extend our vocabulary with custom components, we can use the same structure: Components, states, variants and elements.

Base styles

Base styles are any styles that are applied to standard HTML elements (as opposed to custom components). In practice this means that the CSS uses tag selectors. The baseline for this are the browser default styles, but you will probably want to add your own.

Base styles are most important in areas where you cannot or do not want to add classes, e.g. in user generated content like blog posts or comments.

However, you need to be aware that all custom components are build from standard HTML elements and will therefore inherit their styling. You should keep the base styles at a minimum so you do not need to reset most of them later.

Preprocessors

While preprocessors like Sass, less, or PostCSS are not a necessary part of any methodology, they can help a great deal with keeping your code maintainable. But they are no silver bullets. They are mostly useful for one thing: Keeping consistency across components.

Example: I usually have the color palette in variables and the grid in a mixin. This way I can easily modify them in a single place.

Predictable styling

A major aspect of most methodologies can be boiled down to this: When writing CSS, it should be obvious what styling is actually applied to a DOM element. I feel that a lot of other guidelines can be easily derived from that simple rule:

Open questions

Conclusion

Webdesign has made great leaps in recent years. Designers and developers are finally starting to talk to each other. The craft is maturing. However, methodologies are still very much in flux and it is hard to tell what will prevail.

The guidelines outlined above sum up the current discussion as I know it. They may be totally obsolete one year from now. But for now, they are solid.