Block Element Modifier (S'ha redirigit des de: BEM)

 Compartiu 

La metodologia Block Element Modifier (aka BEM) és un naming convention popular quan utilitzem CSS. El sistema va ser creat per la gent de Yandex i el seu objectiu és ajudar als desenvolupadors a entendre millors les relacions entre el codi HTML i els estils CSS aplicats al document.

Introducció

Conceptes:

• Block: A block is an independent entity, a “building block” of an application. A block can be either simple or compound (containing other blocks).
• Element: An element is a part of a block that performs a certain function. Elements are context-dependent: they only make sense in the context of the block they belong to.
• Modifier: A modifier is a property of a block or an element that alters its look or behavior

Blocks:

https://img-fotki.yandex.ru/get/15534/158800653.0/0_111fb2_7710ab3d_orig

Elements:

https://img-fotki.yandex.ru/get/15588/158800653.0/0_111fb6_192672cf_orig

Modifiers:

https://en.bem.info/method/key-concepts/

Extret de:

https://en.bem.info/method/key-concepts/

Resources:

• https://en.bem.info/method/key-concepts/
• https://css-tricks.com/bem-101/

Exemples

Un exemple de botons:

http://codepen.io/team/css-tricks/pen/226a65c8f7d64615aabd45048d1d3b6d

Extret de:

https://css-tricks.com/bem-101/

BEM amb SaSS

Resources:

• https://laracasts.com/series/modern-css-workflow/episodes/5

Examples

Material Design Lite

MDL utilitza BEM. Vegeu http://www.getmdl.io/faq/index.html#css-naming-conventions

Vegeu també

• CSS
• CSS Preprocessors
• Sass
• Frontend

Enllaços externs

• https://laracasts.com/series/modern-css-workflow/episodes/5
• https://en.bem.info/method/key-concepts/
• https://css-tricks.com/bem-101/
• http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
• https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/