Выбор и структура классов по БЭМ

287
05 сентября 2017, 08:31

Пытаюсь правильно выбрать классы по БЭМ + что бы не было каскадности в css. Для css использую stylus, так что могу писать конструкции типа:

.items
  border none
  &__li
    color cornflowerblue
    &_column-2
      margin-left 33px
    // ??? что делать с & span-2 ???
  // ??? что делать с & span-2 ???
// ??? что делать с & span-2 ???

Сам проблемный html:

<li class="items__li-2 items__li items__li_column-2">
    <input id="photons" type="checkbox" name="items" value="photons" checked="checked" class="items__photons items__input-checkbox items__input-checkbox_column-2"/>
    <label for="photons" class="label-photons items__label items__label_column-2 items__label-photons">New 
        <span class="label-photons__span-2 items__photons-span">photons </span>
        <span class="label-photons__span-3 items__photons-span">detector</span>
    </label>
</li>

И проблема здесь в том, какой лучше задать класс для span. Для написания кода в stylus удобнее items__label-photons__span-2 -- но по БЭМ нельзя задавать элемент элемента, а очень много классов задавать элементу не хочется тоже, да и если не items__label-photons__span-2 -- тогда в коде неудобно будет иметь для span-2 код стиля где-то далеко от label-photon, т.е. в конце items, например.

Как все таки лучше в данном случае задать классы по БЭМ (и чтобы в стилях не было каскадности)?

Answer 1

Разбей элемент на более простые элементы, то есть если у тебя есть

<div class="block">
  <div class="block__content">
    <label class="block__content__label"></label>
  </div>
  <div class="block__bottom">
    <label class="block__bottom__label"></label>
  </div>
</div>

Разбей его на 2 блока:

<div class="block">
  <div class="block-content">
    <label class="block-content__label"></label>
  </div>
  <div class="block-bottom">
    <label class="block-bottom__label"></label>
  </div>
</div>

так ты и в стилусе сможешь спокойно все это в одном {} описывать и именование не нарушаешь по факту. Тоже по началу не понимал как это должно работать, пришел к такому варианту.

Кроме того, ссылаться надо только на родителя, а не на полную структуру блока, по этому можно (а может и нужно) и так:

<div class="block">
  <div class="block__content">
    <label class="block__label"></label>
  </div>
  <div class="block__bottom">
    <label class="block__label"></label>
  </div>
</div>
READ ALSO
Нижняя часть страницы не видна на телефоне
HTML

Нижняя часть страницы не видна на телефоне

Доброй ночиНижняя часть данной страницы: http://victory-factory

 285
Меню в мобильной версии, скролл по странице
HTML

Меню в мобильной версии, скролл по странице

Доброй ночи!

 394
loremru для webstorm
HTML

loremru для webstorm

Необходим аналог loremN, где N - число случайных словПрочитал документацию на сайте jetbrains по составлению live templates, потыкал методы, в итоге не нашёл...

 289
Координаты 3D модели в WPF (Helix Toolkit)
c#

Координаты 3D модели в WPF (Helix Toolkit)

Наводя курсор на модель (сфера) и нажимая на нее нужно получить все три координаты и записать ихОчень нужна помощь, в этом коде я получаю координаты...

 291