Попытка сделать модификаторы БЭМ более приятными в использовании за счет изменения нотации именования.

gistfile1.md

Альтернативный способ именования модификатора в методологии БЭМ

Строится по формуле <префикс>-<состояние>-<значение>, с учетом 3х правил:

1. Префикс всегда it (как функция it в Jasmine)
2. Состояние описывается глаголом в 3 лице, единственноом числе (простым или вкупе с дополнением): is, has, has_icon, looks_like, stands, appears
3. Значение состояния описывается существительным или прилагательным: hidden, buttons, dark

Получаем: it-is-hidden, it-looks_like-link, it-has-childs

В CSS модификаторы добавляются к блокам или элементам использованием правила множественных классов: .block.modifier или .elem.modifier

Ниже представлен пример, приближенный к реальности. В примерах разделитель между блоком и элементом -- и разделитель слов в названиях блоков и элементов -

gistfile2.html

<nav class="page-menu it-looks_like-tabs">
    <a href="#" class="page-menu--link it-has_icon-production">Production</a>
	<a href="#" class="page-menu--link it-has_icon-contacts">Contacts</a>
	<a href="#" class="page-menu--link it-has_icon-about">About company</a>
</nav>
<form class="add-review">
    <dl class="add-review--block it-stands-left">
		<dt class="add-review--block-label">Your name:</dt>
		<dd class="add-review--block-value">
			<input class="add-review--block-value-field it-has-placeholder" placeholder="Type your name here..." type="text" value="" />
		</dd>
	</dl>
	<dl class="add-review--block it-stands-right">
		<dt class="add-review--block-label">Review:</dt>
		<dd class="add-review--block-value">
			<textarea class="add-review--block-value-field" type="text"></textarea>
		</dd>
	</dl>
	<div class="add-review--submit">
		<input class="add-review--submit-button" type="submit" value="Send" />
	</div>			
</form>

gistfile3.sass

.page-menu
    // ...
	&.it-looks_like-tabs
		// ...

.page-menu--link
    // ...
	.page-menu.it-looks_like-tabs &
		// ...

	&.it-has_icon-production
		// ...
	&.it-has_icon-contacts
		// ...
	&.it-has_icon-about
		// ...

.add-review
    // ...
.add-review--block
	// ...
	&.it-stands-left
		// ...
	&.it-stands-right
		// ...

.add-review--block-label
    // ...
.add-review--block-value
	// ...
.add-review--block-value-field
	// ...
	&.it-has-placeholder
		// ...

.add-review--submit
	// ...
.add-review--submit-button
	// ...

gistfile4.css

.page-menu { ... }
.page-menu.it-looks_like-tabs { ... }

.page-menu--link { ... }
.page-menu.it-looks_like-tabs .page-menu--link { ... }

.page-menu--link.it-has_icon-production { ... }
.page-menu--link.it-has_icon-contacts { ... }
.page-menu--link.it-has_icon-about { ... }


.add-review { ... }
.add-review--block { ... }
.add-review--block.it-stands-left { ... }
.add-review--block.it-stands-right { ... }

.add-review--block-label { ... }
.add-review--block-value { ... }
.add-review--block-value-field { ... }
.add-review--block-value-field.it-has-placeholder { ... }

.add-review--submit { ... }
.add-review--submit-button { ... }