BEM Naming and Sass

Block, Element, Modifier

BEM is a front end naming methodology, which is used for naming CSS classes to make it easier for developers to have a better understanding of the front end infrastructure. By using BEM naming, the classes can be informative and descriptive while preventing bad semantics. It was originally developed by Yandex to allow for “fast development and long-lasting results”. It can ensure your code is carefully structured, readable and ensure maintainability when working in large, and constantly changing, teams.

Here is how BEM works in CSS:

.block {}
.block--modifier {}
.block__element {}
.block__element--modifier {}

The .block is the parent component. Examples of this could be a <section></section>, main component or container element.
The .block__element is usually a direct child of the .block element. These usually make up the .block element.
The .block__element--modifier and .block--modifier are the states or versions of the elements in .block.

Here’s an example:

<div class="media media--wide">
   <div class="media__img"></div>
   <div class="media__text media__text--list"></div>
</div>

SASS (read more about sass)

We can also apply this to SASS variables. This is useful because it improves the clarity of the variables, which makes it easier for other developers to read and use.

Here are some examples:

$color__primary: #AAAAAA;
$color__primary--light: #CCCCCC;
$color__primary--dark: #666666;

$font__primary--style: Helvetica;
$font__primary--size: 14px;
$font__primary--weight: 200;

References:
https://en.bem.info/method/
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
http://mathayward.com/modular-css-with-sass-and-bem/