Правильно ли я верстаю, используя методологию БЭМ?

Question

[Алексей Верховцев]

Приветствую! Вчера познакомился с БЭМ методологией и решил использовать её в новом проекте, только стиль наименования. Так вот, интересно, правильно ли я пока всё делаю или можно как-то улучшить или в корне неправильно, жду советов и помощи, если что. Заранее хочу предупредить, что использую блоки центрирования контента, .row {margin-left: -15px; marign-right: -15px} col-12 {padding-left: 15px; padding-right: 15px} но их я не отношу к данной методологии, они служат мне просто как разметка и я делаю вид, что их просто не существует, в коде увидите сами, знаю, что так неправильно вроде, но не знаю как под другому сделать, да и так в принципе неплохо. Код codepen.io/anon/pen/ZBVVgy

Comments

[Алексей Верховцев]

Извините, действительно сейчас сделаю

Answer 1

[Vasyl Kovbassa]

Все так делают после прочтения официальной документации))
Но все на много проще. Представь себе что у тебя в макете есть кнопки перехода на другие страницы.
Значит нужно что-то вроде <a href='#'>Кнопка</a>, но оно не очень похоже на кнопку, поэтому:

1. на первом уровне тебе нужно найти все общее между всеми кнопками в макете и создать элементарную bem сущность button.
   <a class='button' href='#'>Кнопка</a>
   

   // COMMON
   .button{
     display: inline-block;
     padding: 0.5em 1em;
     text-align: center;
     text-decoration: none;
   }

   
   
   
2. 
   дальше, к примеру видим, что в макете есть кнопки двух размеров - большие и маленькие, соответственно:
   

   // SIZE
   <a class='button button_size_m' href='#'>Кнопка</a>
   <a class='button button_size_l' href='#'>Кнопка</a>
   
   // COLOR
   <a class='button button_primary' href='#'>Кнопка</a>
   <a class='button button_secondary' href='#'>Кнопка</a>

   
   

   /*        _MODS_       */
   // SIZE
   .button{
      &_size_s{
        font-size: 1rem;
        }
      &_size_l{
        font-size: 2rem;
        }
   }
   
   // COLOR
   .button{
     &_primary{
       background: #607D8B;
       color: #ffffff;
       }
     &_secondary{
       background: #8BC34A;
       color: #ffffff;
       }
   }

   
   
   
3. 
   и на последнем уровне переопределения мы имеем большую кнопку по центру хедера, где ее родитель за руку ставит в то место, где она должна стоять))
   
   

   <a class='button button_primary button_size_l header__button' href='#'>Кнопка</a>

   
   

   // PARENT__BLOCK
   .header{
       &__button{
         display: block;
         width: 200px;
         margin: 0 auto;
        }
   }

   
   
   

Далее примерно такой же подход ко всем остальным блокам.
определил общее > доопределил/переопределил варианты > при необходимости родителем расставил по местам и косишь как будто ты не верстальщик, а rонструкторо-собиральщик :)
codepen.io/kovbassa/pen/ObrqZv

Answer 2

[Serj-One]

1) Много лишних обёрток.
2) banner banner_position_relativebanner__inner-banner_display_table ???

Comments

[Алексей Верховцев]

1) Ну я обертки делаю на будущее, с ними проще управляться, нежели использовать голые блоки
2) banner - блок, banner_position_relative - модификатор блока banner с названием position, значением - relative, banner__inner-banner_display_table - модификатор элемента inner-banner с названием display, значение - table

[Serj-One]

Алексей Верховцев:
1) Половина обёрток - сетка, которая не должна быть завязана на блоки. Вторая половина - элементы, которые должны быть уже блоками.
2.1) Вряд ли блок с display table сохранит свой вид с display block. Это явно не модификатор.
2.2) _display_table Если отделяешь модификатор подчёркиванием, у тебя тут 2 модификатора. Чтоб не путаться, советую отделять модификатор через "--" .block--modifier
2.3) Позиционирование в подобных случаях не выносится в модификатор. Если позиционируешь внутренний блок - он элемент родительского блока, а не модификатор. Если сам блок без родителя, то relative можно задать без модификатора.

Answer 3

[sim3x]

centerbox
glenbrook-row
glenbrook-col-12

нужно интегрировать в свои классы используя миксины в less/sass/stylus
Отговорки на счет того, что ты придумал новую версию БЕМ не катят

Comments

[Алексей Верховцев]

Как вы это видите? :)

[sim3x]

Алексей Верховцев:

.banner {
  @extend .centerbox;
...
}