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