Which is the best CSS methodology?

When we're working a small project involving a small team issues in coding practices don't really come into play. But when we are working on a really large project, following a methodology means that all developers are on the same page and the website CSS is easier to read, write and maintain which can lead to savings in project hours and page file size.

Which are the most used CSS Methodologies?

BEM - Blocks, Elements and Modifiers

This is a popular naming convention used by developers to better describe the relationship between elements and it's simple to put into practice.

Blocks - these are known as parents, wrappers or standalone blocks e.g. navigation, header, signup-form, button.

Elements - these are child elements of the block e.g. navigation link, signup-form label, button arrow.

Modifiers - these are ways of modifying either a block or element from its original state e.g. active, disabled, error, confirm.

What's great about BEM is that it tells us the relationship of classes to other classes just from the naming convention. For example .button--error is the error class for a regular button (indicated by double dash) whereas .button__arrow is the arrow that's a child element or within the button tag.

The drawback with using BEM is that you end up using larger names to describe classes, meaning that your HTML and CSS files can get cluttered and overgrown.

Atomic

This involves writing simple reusable classes e.g.

.centered { text-align:centered; }

and then applying the reusable class in the HTML rather than writing

text-align:center

in each class you want it. It can also be applied to your SASS filing structure so that reusable parts are seperated into smaller scss files that can be copied and pasted across projects.

SMACSS

SMACSS looks at the categorisation of styles in 5 categories: Base, Layout, Module, State and Theme.

Base is the default styles across your site e.g. reset styles like

body { margin:0; padding:0; }

or

a { color:blue }

Layout styles divide the page into groups and sections, most likely, containing modules.

Modules reusable sections and strips we use in templates such as social media feeds and calls to action at the end of a page.

State styles describe the state of a module or layout e.g. active, disabled, error, confirmed.

Themes are less common but help us describe overall differences in layouts and modules e.g. christmas theme, shopping cart header, etc.

Object Oriented CSS (OOCSS)

This involves extending classes and not using location dependent styles.

For instance, if you have a background style, set it up as a SASS mixin and then extend it each time rather than adding it multiple times. It will mean that you maintain it at its source (the mixin) rather than having to amend each instance.

It also means specifying elements direct so instead of saying

.nav li a li a { ... }

put a class of .list-item on the element and call it direct.

So which should I use?

Each technique has similar concepts that are executed in slightly different ways. BEM seems to be the most popular at the time of writing but each deals with tackling the same issues; easier-to-maintain code. 

We recommend choosing the right methodology for the development team as a whole.  Meaning our websites are created faster and more efficiently, and are easy to maintain and add to in the future.