Skip to content

Instantly share code, notes, and snippets.

@artpolikarpov
Created August 10, 2012 13:07
Show Gist options
  • Save artpolikarpov/3314084 to your computer and use it in GitHub Desktop.
Save artpolikarpov/3314084 to your computer and use it in GitHub Desktop.
Variation on BEM
<div class="b-block">
<div class="block__before">
<div class="b-text b-text--smaller">
<p></p>
<p></p>
<div class="text__incut">
<p></p>
</div>
<p></p>
</div>
<div class="block__after">
</div>
@miripiruni
Copy link

Как уже совершенно справедливо заметил Сергей, b-block и block это совершенно разные блоки.

@mistakster
Copy link

Так надо быть последовательным в нейминге. От префикса b- можно полностью отказаться, если вся разметка делается вручную. Не вижу смысла оставлять его не блоке и убирать на элементах и модификаторах.

Чтобы цеплялся глаз за блоки, корневому элементу каждого блока можно назначать дополнительный класс b. С точки зрения БЭМ, на одном элементе могут размещаться несколько блоков (clearfix, hidden и прочие утилитарные классы назначаются элементам именно по этому принципу). Пусть будет ещё один маркер, который поможет ориентироваться в разметке. К тому же он не увеличит количество байт и нажатий на кнопки, если это тебе важно.

@mistakster
Copy link

<div class="b block">
  <div class="block__before">
  <div class="b text text--smaller">
    <p></p>
    <p></p>
    <div class="text__incut">   
      <p></p>
    </div>
    <p></p>
  </div>
  <div class="block__after">
</div>

@sapegin
Copy link

sapegin commented Aug 12, 2012

Не очень понимаю, зачем нужно обозначать как-то корень блока — никогда не страдал из-за этого. Да и это затруднило бы использование препроцессоров:

.block {
    ...
    &__elem {
       ...
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment