Since the age of Geocities Era, CSS has been evolved a lot. It has seen the transition from plain CSS to emerging development framework such as such as OOCSS (object oriented CSS), SMACSS and now BEM.

BEM – stands for block, element, modifier. By definition, it is a CSS development methodology specifically designed with flexibility and ease of modification in the mind. In the given podcast episode, Atish Narlawar talks to William Anderson about the BEM. William is a die hard Technologist, Software Engineer and part time Professor at The New School University New York.

The conversation gets a start by going through high-level CSS evolution since the the 1990s. William shares the fascinating things in the CSS in 2015 like logical integration, media queries, and animations. Along with he also explains how CSS development became quite complex down the line due to cascade, responsive design and the javascript itself.

One of the major challenges gets added with the new found complexity includes messy CMS, broken semantics and SEO refactor and BEM emerged as one of the possible solution to address these challenges.

With the example of feature card, William explains how BEM tries to fix the issues mentioned, such as complexity, semantics, and decoupling. Using zero specificity, he shares how seamlessly his team were able to integrate SEO tag change in the live project.

William also shares his valuable insight in terms of how BEM works with other CSS methodologies such as OOCSS (object oriented CSS) or SMACSS (smacks). He tries to clarify the long haunting doubts about BEM such as BEM is too verbose and it pollutes the DOM with Blocks, Elements, and Modifiers all cooked in class names. He shares what could be the best strategy for initiating the adoption of BEM into existing projects, and quite possible barriers team may face during the transitionary switch.

At the end, he also shares valuable resources where someone should start digging about BEM methodology and its related practices.