Writing modular CSS

CSS has changed a lot in the last few years. Developers used CSS2 as a declarative language to decorate the page. Today's CSS3 gives us many more capabilities. Nowadays, CSS is used widely to implement design ideas animating elements on the page or even applying logic such as hiding and showing content blocks. A lot of CSS code requires better architecture, file structuring, and proper CSS selectors. Let's explore a few concepts that could help with this.

BEM (block, element, modifier)

BEM (http://bem.info/method/definitions) is a naming convention introduced by Yandex back in 2007. It became a popular concept to develop frontend applications. In fact, it is not only applicable for CSS but also for any other language because it has very few rules that work well.

Let's say we have the following HTML markup:

<header class="site-header">
    <div class="logo"></div>
    <div class="navigation"></div>
</header>

The instant CSS which we can come...