БЭМ

[raptor-dm]

Никогда раньше не работал с ним. Сейчас знакомлюсь и ряд вопросов.
1) Обязательно ли каждому элементу dom давать класс? или можно напрямую в css обратиться к элементу?
2) А если у меня много вложенных блоков. То что делать в таком случае? разделять на логические подблоки? просто по сути даже у корневого родителя можно найти куча элементов.

[wwt]

мне вообще кажется что БЭМ как таковой хорош при построении интерфейсов, а вот при создании обычных сайтов малопригоден из-за неуниверсальности блоков в макетах.

[Sergey_K_2015]

Задавая каждому элементу dom класс можно при стилизации вообще обойтись без вложенности. И в CSS не будет картины типа (nav ul li a). Кроме того, не нужно будет комментировать HTML (если нормально имена классам задавать). На мой взгляд, с БЭМ удобнее верстать. Сначала, правда, придется помучиться с придумыванием имен классов.

[wwt]

  On 2/18/2016 at 6:14 PM, Sergey_K_2015 said:

Задавая каждому элементу dom класс можно при стилизации вообще обойтись без вложенности. И в CSS не будет картины типа (nav ul li a). Кроме того, не нужно будет комментировать HTML (если нормально имена классам задавать). На мой взгляд, с БЭМ удобнее верстать. Сначала, правда, придется помучиться с придумыванием имен классов.

что мешает задавать оригинальные классы элементам и без БЭМ ?

[andrey7287]

  Вы вообще о чём. Фишка БЭМ как раз в том и заключается, что придумывать оригинальные классы НЕ нужно, они становятся таковыми априори. А если вам приходиться мучиться с придумыванием имен классов, то вы просто не умеете его готовить. С БЭМ разметкой у вас может быть несколько правил для &__item  в разных местах CSS и вы будете знать что означает каждый из них.

 

 

  On 2/18/2016 at 3:58 PM, raptor-dm said:

А если у меня много вложенных блоков. То что делать в таком случае? разделять на логические подблоки?

   Оно УЖЕ разделено. Всё что нужно, это научиться отличать блоки от элементов. 

[Igor Schnaider]

  On 2/18/2016 at 7:13 PM, wwt said:

что мешает задавать оригинальные классы элементам и без БЭМ ?

Ничего, по сути, это одно и то же будет. Но с правилами наименования по БЭМу сразу видишь, что к чему относится. Это удобно.

 

  On 2/18/2016 at 3:58 PM, raptor-dm said:

А если у меня много вложенных блоков. То что делать в таком случае? разделять на логические подблоки? просто по сути даже у корневого родителя можно найти куча элементов.

А в чем проблема здесь? БЭМ не запрещает вкладывать один блок в другой (в самом DOM имеется ввиду). Они по-прежнему останутся самостоятельными сущностями, просто один блок будет находиться в каком-то элементе другого блока.

[Sergey_K_2015]

  On 2/18/2016 at 7:13 PM, wwt said:

что мешает задавать оригинальные классы элементам и без БЭМ ?

С БЭМ стили задавать удобнее.

В LESS получается конструкция типа:

.блок  {

   ...

   &__элемент1  {

      ...

      &_модификатор  {

         ...

      }

   }

   &__элемент2  {

      ...

   }

}

[wwt]

  On 2/19/2016 at 4:19 AM, Sergey_K_2015 said:

С БЭМ стили задавать удобнее. В LESS получается конструкция типа: .блок { ... &__элемент1 { ... &_модификатор { ... } } &__элемент2 { ... } }

 

Так можно делать и без БЭМ

.header {  &-slogan {}  &-phone {}  &-callback {}}

  On 2/19/2016 at 1:33 AM, Igor Schnaider said:

Ничего, по сути, это одно и то же будет. Но с правилами наименования по БЭМу сразу видишь, что к чему относится. Это удобно.

 

при нормальном именовании классов тоже было видно что к чему относится, БЭМ лишь собрал в кучу все полезные приемы и добавил структурированность. Предположим раньше я создавал блок с меню как то так:

<ul class="menu">  <li class="active"></li>  <li></li></ul>

.menu {  >li {}  >.active {}}

Теперь я делаю:

<ul class="menu">  <li class="menu__item menu__item_active"></li>  <li class="menu__item"></li></ul>

.menu {  &__item {    &_active {}  }}

На маленьких проектах типо лендингов и небольших сайтов бэм зачастую только мешает тем что количество кода в html возрастает.  На больших проектах это оправданно, а при верстке лендинга нафига мне каждому li прописывать класс, кода можно обойтись простым правилом в CSS

>li {}

БЭМ полезен, но он не панацея и пихать его везде на мой взгляд не стоит. Я обычно комбинирую оба приема если жесткая структура не нужна.

[Igor Schnaider]

del

Edited February 19, 2016 by Igor Schnaider