BEM

BEM is a methodology developed by the developers at http://yandex.ru.

The key thing I took from BEM is just how much a naming convention can buy you when it comes to CSS maintenance.

Note

If you are interested in reading more about BEM, the canonical resource is http://en.bem.info. For a good explanation of where it all began I recommend starting here: https://en.bem.info/method/history

Again, like SMACSS, I'm not going to attempt to fully explain the ins and outs of BEM methodology. However, I will give you the elevator pitch explanation of the key points. The BEM methodology works around the notion that key areas of a page can be defined as Blocks. In turn, those key areas are made up of Elements. We can then represent the relationship between the Block and its Elements in the way we name things. Consider the OOCSS media object example from before. In a BEM approach we might use classes like this:

<div class="media">
  <a href="#" class="media__img...