Web Complete BEM modification

bem.css

.h-left { /* !important */ }
.h-hidden { /* !important */ }
.h-text-center { /* !important */ }

.btn {}
.btn.m-big {}
.btn.is-active {}
.btn.is-process {}

.price {}
.price.m-with-action {}
.price__l {}
.price__r {}
.price__r._gray {}

.product-block {}
.product-block__l {}
.product-block__r {}
.product-block__img-wrapper {}
.product-block__img {}
.product-block__info {}
.product-block__actions {}
.product-block .btn { /* контекст product-block компонента btn */ }
.product-block .price { /* контекст product-block компонента price */ }

.page-search {}
.page-search__totals {}
.page-search__list {}
.page-search .product-block__info { /* контекст page-search элемента info компонента product-block */ }
.page-search .product-block__actions { /* контекст page-search элемента actions компонента product-block */ }

bem.md

Web Complete BEM modification

1. Блоки и их элементы [block]__[element]

<div class="product-block">
  <div class="product-block__l">
    <div class="product-block__img-wrapper">
      <img class="product-block__img" />
    </div>
    <div class="product-block__info"></div>
  </div>
  <div class="product-block__r">
    <div class="product-block__actions"></div>
  </div>
</div>

2. Вложенные блоки (price, btn)

<div class="product-block">
  <div class="product-block__l">
    <div class="product-block__image"></div>
    <div class="product-block__info"></div>
  </div>
  <div class="product-block__r">
    <div class="price">
      <div class="price__l"></div>
      <div class="price__r"></div>
    </div>
    <div class="product-block__actions">
      <button class="btn">buy</button>
      <button class="btn">compare</button>
    </div>
  </div>
</div>

3. Контекст

Родительский элемент блока не может иметь свойства:
margin, top, left, right, bottom. С осторожностью: width, height.
Данные свойства можно задавать только в контексте.
Контекст может менять как позиционирование, так и отображение.
Контекст может иметь только один уровень вложенности. См. css.

<div class="page-search">
  <div class="page-search__totals"></div>
  <div class="page-search__list">
    <div class="product-block"></div>
    <div class="product-block"></div>
    <div class="product-block"></div>
    <div class="product-block"></div>
    <div class="product-block"></div>
  </div>
</div>

4. Модификаторы. Задаются у блока или элемента m-[modifier]

<button class="btn m-big"></button>
<div class="price _with-action">
  <div class="price__left"></div>
  <div class="price__right m-gray"></div>
</div>

5. Состояния. is-[state]

<button class="btn is-active"></button>
<button class="btn _big is-process"></button>

6. Хелперы. h-[helper]

<p class="h-text-center"></p>
<button class="btn h-hidden"></button>
<div class="price h-left"></div>

7. Организация css в порядке подключения

1. reset.css (normalize)
2. base.css (grids + helpers)
3. common.css (small blocks / ui)
4. product.css, ... (blocks)