PART 1.4.3 – BEM

BEM at Vaimo

More and more FE devs in Vaimo have started using BEM. Product department have implemented BEM in multiple modules.

There have been requests to Magento to adopt a more BEM like approach as well more on that here: https://alankent.me/2016/10/06/magento-2-css-class-naming-request-for-feedback/ 

BEM at a glance

BEM style naming methodology which allows you effectively scopes your CSS so you only use the cascade then you actually want to.

.block {}

.block__element {}

.block–modifier {}

 

.site-search {} /* Block */

.site-search__field {} /* Element */

.site-search–full {} /* Modifier */

.block represents the higher level of an abstraction or component.

.block__element represents a descendent of .block that helps form.block as a whole.

.block–modifier represents a different state or version of .block.

 

It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers. They are far more strict and informative, which makes the BEM naming convention ideal for teams of developers on larger projects that might last a while.

<form class=”site-search  site-search–full”>

    <input type=”text” class=”site-search__field”>

    <input type=”Submit” value =”Search” class=”site-search__button”>

</form>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s