You are on page 1of 2

BEM: Block, Element, Modifier

Notas tomadas de: http://www.vanseodesign.com/css/block­element­modifier/ 
 
The BEM approach to developing websites comes from the developers at Yandex. It has similar 
goals to the approaches we’ve seen before. 
● Quick development 
● Team efficiency 
● Scalability 
● Code reuse 
 
Blocks and Elements 
Under BEM a block is it’s own independent entity. Blocks can be simple or complex and they can 
contain other blocks. 
 
At the highest level of a design, your blocks might be your header block, footer block, main 
content block, and sidebar block. Your header would likely include several blocks inside such as 
one for your logo and tagline, another for a navigation bar, and maybe another making up a 
search field and button. 
 
Elements are parts of blocks. They perform certain functions within the block and they’re context 
dependent. Take an element outside its block and it no longer makes sense 
 
Blocks and elements should have keywords (names) associated with them. The only way the 
same name or keyword is reused is when the same block or element is being reused. Blocks 
must be independent of each other to allow for arbitrary placement within the design. We want to 
be able to take our search block and easily move it from the top right in the header to the middle 
of the sidebar for example. 
 
This leads to 3 guidelines for writing css: 
● Blocks should have unique names, which become classes 
● HTML elements should not be used in css selectors since they aren’t context­free 
● Cascading selectors for several blocks should be avoided 
 
Modifiers 
What happens when you have a block like a search input and button and you want to add 
another to the page that looks similar, though not exactly like the first? This is where modifiers 
come in. Modifiers help us create similar though different blocks from already existing blocks. 
 
A modifier is a property of a block or an element that alters its look or behavior. 
Documento creado por Francisco Quintero 
A modifier has a name and a value. Several modifiers can be used at once.  
 
Typically a modifier will be an additional css class you would add to an element. 
 
Para mayor detalle, leer documentación: http://bem.info/method/definitions/ 
Documento creado por Francisco Quintero