BEM/OOCSS

Yandex BEM/OOCSS

http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/

If you’re writing your HTML and CSS code in OOCSS-style, Yandex’s BEM style specifically, you will like this filter. It provides some aliases and automatic insertions of common block and element names in classes.

In short, BEM introduces three concept types for CSS classes: Block, Element and Modifier. Block is a some sort of a namespace for a semantic sections of HTML page, for example, search-form. Element is a part of section, for example, serch-form__query-string. Modifiers define variations of block and elements: search-form_wide or search-form_narrow. Elements in class names are separated with __ (double underscore) and modifiers are separated with _ (single underscore).

While BEM/OOCSS is a great way to maintain and re-use CSS, it may be very tedious to write these class names in plain HTML, even with help of Emmet abbreviations. You have to write the same block or element name in every element of abbreviation:

<!-- 
form.search-form.search-form_wide>input.search-form__query-string+input:s.search-form__btn.search-form__btn_large
-->
<form class="search-form search-form_wide" action="">
	<input class="search-form__query-string" type="">
	<input class="search-form__btn search-form__btn_large" type="submit" value="">
</form>

The bem filter allows you to make abbreviation a bit sorter:

<!-- 
form.search-form._wide>input.-query-string+input:s.-btn_large|bem
-->
<form class="search-form search-form_wide" action="">
	<input class="search-form__query-string" type="">
	<input class="search-form__btn search-form__btn_large" type="submit" value="">
</form>

even if use :

<!-- 
form.searchForm._wide>input.-queryString+input:s.-btn_large|bem
-->
<form class="searchForm searchForm_wide" action="">
	<input class="searchForm__queryString" type="">
	<input class="searchForm__btn searchForm__btn_large" type="submit" value="">
</form>

Emmit-BEM语法规则

主要包括两种前缀：

• 元素前缀： __element 或 -element
• 修饰前缀： _modifier

当一个类名以这两种前缀开始时，过滤器按以下规则补全：

<!-- ================================================ -->
<!--  `.` 开头的作为块名                              -->
<!-- ================================================ -->

.b|bem
<div class="b"></div>

.b_m|bem
<div class="b_m"></div>

.b._m|bem
<div class="b b_m"></div>

.b-e_m|bem
<div class="b-e_m"></div>

.b._m1._m2|bem
<div class="b b_m1 b_m2"></div>

<!-- ================================================ -->
<!--  以元素前缀 `__` 或 `-` 作为类名开头             -->
<!--  过滤器会根据父节点的块名自动加上块名            -->
<!-- ================================================ -->


.b>.-e1|bem  <!-- 在Vim-emmit中下级不加上html-Tag会出错 -->
<div class="b"></div>
<e1></e1>

.b>div.-e1|bem  <!-- 加上html-Tag就OK了 -->
<div class="b">
	<div class="b__e1"></div>
</div>

.b>.b.-e1|bem
<div class="b">
	<div class="b  b__e1"></div>
</div>

<!-- ================================================ -->
<!--  当类名以修饰前缀`_`开头，过滤器会根据           -->
<!--  当前节点或父节点补上块名和元素名                -->
<!-- ================================================ -->

.b-e>._m|bem
<div class="b-e">
	<div class="b-e b-e_m"></div>
</div>



<!-- ================================================ -->
<!--  同时使用元素前缀与修饰前缀，过滤器会            -->
<!--  生成块名并同时加上有修饰和没有修饰的元素        -->
<!-- ================================================ -->

.b>div.-e_m|bem
<div class="b">
	<div class="b__e b__e_m"></div>
</div>

.b>.b.-e1_m1|bem

<div class="b">
	<div class="b  b__e1 b__e1_m1"></div>
</div>

div.b1>div.-e1._m1|bem
<div class="b1">
	<div class="b1__e1 b1 b1_m1"></div>
</div>


div.b1>.b1.-e1|bem
<div class="b1">
	<div class="b1  b1__e1"></div>
</div>

div.b1>.b1.-e1_m1|bem
<div class="b1">
	<div class="b1  b1__e1 b1__e1_m1"></div>
</div>

div.b1>div.b1.-e1_m1+div.b1.-e1|bem
<div class="b1">
	<div class="b1  b1__e1 b1__e1_m1"></div>
	<div class="b1  b1__e1"></div>
</div>

<!-- ================================================ -->
<!-- 如果使用多个元素前缀，过滤器会补全父节点的块名   -->
<!-- ================================================ -->