Common CSS Methodologies and BEM

When we code small sites it usually does not matter how we organize the styles. However, when it comes to larger, more complex projects, how you organize your code is the key to efficiency in at least these three ways: it affects how long it takes you to write code, how much of that code you’ll have to write and how much loading your browser will have to do.

What is a CSS Methodology?

A CSS methodology is a set of guidelines for writing modular, reusable and scalable code.

some of the common CSS Mythologies.

Object-Oriented CSS (OOCSS)

In OOCSS the structure is separated from the skin. The methodology makes a clear distinction between content and its containers.

Atomic CSS

In this method we define single-purpose class selectors for every reusable declaration. In other words create a class selector for every repeating CSS declaration. This allows ease in maintaining consistent code and not having to invent classes for components requiring a single CSS rule.

Scalable and Modular Architecture for CSS

SMACSS works by dividing CSS into five categories – base, layout, module, state and theme – commonly split into separate files.SMACSS provides well-organised CSS code split logically across multiple files.

BEM

BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copying and pasting.

Example of classes named with BEM convention below:

/* Block component */
.btn {}

/* Element that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

The block component .btn is like a parent element. All of the child elements of this block should have a name like .btn__price, written with two underscores after the block element. Style is applied to the block element like
.btn--orange, written with two hyphens after the block element.

Why BEM ?

BEM is easier to understand than some some of the others above but still provides us the good architecture we want and with a recognizable terminology. Some advantages include:

1)If we want to make a new style of a component, we can easily see which modifiers and children already exist.

2)We can quickly get an idea of which element depends on another (in the previous example we can see that .btn__price depends on .btn)

3)Provides Modularity ,Reusability and Structure.

4)BEM gives everyone on a project a declarative syntax that they can share so that they’re on the same page.