It is a known fact that the right styleguide can significantly increase productivity for development, debugging, and implementation of new features in legacy code. Sadly, most CSS codebases are sometimes developed without any structures or rules. This leads to an unmaintainable CSS codebase in the long term. To address this issue, we need to understand better CSS methodologies and choose some specific techniques to set up a conventional standard for our team to follow.

ACSS is a method of using one class for one CSS property so that same property can be used in different parts of a site. This eliminates the possibility of duplicating that property in the stylesheet since the class itself is being used multiple times in the HTML. This results in smaller, 'drier' stylesheets, and is also a great way to quick a way for prototype layout and components on a web page.

Example of ACSS Coding Style

Block, Element, Modifier — more commonly called BEM — is a CSS class-naming system devised by the dev team at Yandex (the Google of Russia). The idea behind BEM is to differentiate CSS classes that fulfill different roles. This is done by naming CSS classes in a way that indicates their role.

In BEM terminology, a block is an independent, modular UI component. A block may be composed of multiple HTML elements, or even multiple blocks. An example of a block might be your navigation menu or search form.

An element is a component of a block. An element serves a singular purpose. For example, if you have a navigation menu block, then elements of it might be your navigation menu’s links, which, in turn, might be in the form of list items (li elements) and links (a elements).

A modifier is a CSS class that changes the default presentation of a block or element.

BEM Example

Nicole Sullivan’s Object-Oriented CSS was launched in 2009. It was really the first CSS methodology to become widely adopted. It’s still hugely influential today.

One goal of the OOCSS methodology is to reduce duplication of the same properties throughout your various style rules. In other words, OOCSS can help maintain dry stylesheets. The methodology attempts to achieve this goal by using lots of small, modular, specialist CSS classes.

OOCSS advocates the separation of structure from skin. The methodology makes a clear distinction between content and its containers. In OOCSS, style rules are written exclusively using CSS class selectors.

For example, the style of the button elements might be set via two classes.

OOCSS Example

Developed in 2011 by Jonathan Snook, SMACSS works by identifying the styles into 5 categories: base, layout, module, state and themes. Each of these categories come with a set of usage rules.

• Base styles are the default styles directed at the basic HTML tags like <p>, <a:link>.
• Layout styles are styles used to define the layout of the page, like coding where the header, footer and side menus will go.
• Module styles are specific to a module like gallery or slideshow.
• State styles are for highlighting elements with changeable states like hidden or disabled.
• Theme is used for changing the visual scheme of the page.

The different style rules can be identified using a prefix in the class name, for example: l-header (for layout) or t-header (for theme). These different types of rules can also be organized by placing them in separate files and folders.

SMACSS Example