IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

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:

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:

Examples

Material Design Lite

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

Vegeu també

Enllaços externs