BEM
BEM(Block-Element-Modifier) is a methodology to create maintainable websites.We are going to use its naming rules
A block is an independent entity, a "building block" of an application. A block can be either simple or compound (containing other blocks).
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.
A modifier is a property of a block or an element that alters its look or behavior.
Read more:
http://bem.info/method/definitions/ (images are blocked by the company firewall)
http://www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
Block
Blocks may also be contained inside other blocks. For example, a Head Block includes other blocks.
Blocks Reiteration
Blocks may appear more than once on a page.
In CSS related terms, it means:
ID-based CSS selectors must not be used.
Only class selectors satisfy our non-uniqueness requirement.
On the JavaScript side it means:
Blocks with similar behavior are detected unequivocally: they have the same CSS classes
Using CSS class selectors allow picking all blocks with a given name to apply the required dynamic behavior.
Element
Use “__” to separate block and element in the name, element names must be unique within the scope of a block.
/tabs/
/tabs-label/
/tabs-label/
/tabs-label/
/tabs-label/
<div class="tabs">
<ul class="tabs__list">
<li class="tabs__label"></li>
<li class="tabs__label"></li>
<li class="tabs__label"></li>
<li class="tabs__label"></li>
</ul>
</div>
Modifier
Modifier for blocks, separate with “--”
<div class="nav">...</div>
<div class="nav nav--tabs">...</div>
<div class="nav nav--buttons">...</div>
<div class="tabs">
<ul class="tabs__list">
<li class="tabs__label"></li>
<li class="tabs__label"></li>
<li class="tabs__label tabs__label--highlighted"></li>
<li class="tabs__label"></li>
</ul>
</div>
No comments:
Post a Comment