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

Question

[Сергей Соболь]

Писал верстку и вогнал себя судя по всему в тупик. На первом скрине то, как я написал классы. 2-е вариации. Подскажите, пожалуйста, как правильно будет оформить эти мини-блоки (скрин макета прикрепил еще ниже)?

Comments

[Ankhena]

Если цена может переиспользоваться отдельно от блока namely, то это блок. Точнее микс блока и элемента.
Если не может, то это просто элемент.

Еще я думаю, что div.prices лишняя обертка.

[Сергей Соболь]

Ankhena, а правильно будет назвать блок "namely__sizes", а заголовок и item назвать "namely__sizes-title" и "namely__sizes-item"?

[Ankhena]

Сергей Соболь,

правильно будет назвать блок "namely__sizes"

Нет. Так пишутся названия элементов, а не блоков.

[Сергей Соболь]

Ankhena, спасибо

[Ankhena]

Сергей Соболь, меня еще и слово namely смущает. Я бы предпочла существительное в качестве названия блока. Но. возможно, это вопросы вкуса или уровня владения языком.

[Ankhena]

Сергей Соболь, Ещё я думаю, что блок это карточка товара.
И что всё таки вряд ли размеры будут переиспользоваться в отрыве от карточки товара.
А цена возможно будет миксом. Блоком карточки товара и самостоятельным блоком (переиспользуемым и как цена и как сумма покупок и т.д.)

[Сергей Соболь]

Ankhena, а можете подсказать еще, как правильно будет стилизовать размеры (скирн я прикреплял), если там паддинги в каждом из размеров разные?

[Ankhena]

Сергей Соболь, это же одинаковые квадраты, при чем тут разные паддинги? ))
Сделайте паддинги одинаковыми просто для того, чтобы не буквы никогда не прилипли к границам.
Дальше, например, считайте в em.

[Сергей Соболь]

Ankhena, просто если написать одинаковые паддинни, то для последних размеров — квадраты будут чуть длиннее, чем на макете, чего допустить не хотелось бы. Нужно использовать модификаторы?

[Ankhena]

Сергей Соболь, ширина и высота!

[Сергей Соболь]

Ankhena, я извиняюсь, это я напутал. Спасибо за ответы. Удачного дня!

[Ankhena]

Сергей Соболь, на всякий случай минимальную ширину, а не фикс.
https://jsfiddle.net/1L52kajq/

Answer 1

[Realetive]

У вас какая-то «солянка» из БЭМа и Бутстрапа, в итоге получилась буквально «каша», поэтому и зашли в тупик.

Это не мини-блоки, это элементы. На минуту забудьте про Бутстрап и прочие обёртки: у вас есть товар; у товара есть страница, где перечислены характеристики (свойства) товара: фотографии, цена, скидка, размеры, возможно — описание и т. д. Так вот — любая самостоятельная сущность (товар, статья, пост блога) — всегда блок. Все свойства, характеристики, признаки этой сущности — всегда элементы этого блока. Ankhena утверждает, что «если цена может переиспользоваться отдельно от блока namely, то это блок» — теоретически да, но на практике цена никогда не будет использоваться отдельно от товара, т. к. всегда «принадлежит» какому-то товару.

Ещё минута «без Бутстрапа» — сначала запишите все свойства товара, как они идут в дизайне (одна строка — одно свойство):

- товар
  - фотография
  - цена
  - старая цена
  - размеры

— вот вам и блок с элементами. Нехватает только вспомогательных блоков, чтобы сгруппировать некоторые элементы (например, объеденить в одной строке «цену» и «старую цену») — добавьте ещё один элемент-обёртку (.namely_prices), который их «объединит»:

<article class="namely">
  <img class="namely__photo" src="...">
  <dl class="namely__prices">
    <div class="namely__price">
      <dt class="visually-hidden">Новая цена</dt>
      <dt class="namely__price-currency">$</dt>
      <dd class="namely__price-value">311</dd>
    </div>
    <div class="namely__price namely__price_old"> <!-- Модификатор «опишет» цвет и «зачёркнутость» -->
      <dt class="visually-hidden">Старая цена</dt>
      <dt class="namely__price-currency">$</dt>
      <dd class="namely__price-value">450</dd>
    </div>
  </dl>
  <div class="namely__sizes">
    <h4 class="namely__sizes-heading">Выберите размер</h4>
    <div class="namely__sizes-list">
      <label class="namely__size">
        S
        <input class="namely__size-control input input_type_radio" type="radio" name="size" value="s">
      </label>
      <label class="namely__size">
        M
        <input class="namely__size-control input input_type_radio" type="radio" name="size" value="m">
      </label>
      <!-- … и т. д. -->
    </div>
  </div>
</article>

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

Comments

[Сергей Соболь]

Большое спасибо!

[Ankhena]

Цена (правильнее, наверное, назвать деньги) может быть, например, суммой заказа не являясь элементом товара.

И не стоит перевирать. Я написала "возможно". Если переиспользуется самостоятельно, то будет миксом. Если нет, то только элементом. А вовсе не утверждала, что всегда блок.

А про бутстрап да, я бы его в разметку вообще не стала бы писать, а убрала в примеси препроцессора.

[Realetive]

Ankhena, Тогда «сумма» будет элементом блока «корзина». Совпадёт ли этот элемент дизайном (размером, цветом, жирностью шрифта) с .namely__price — мы не знаем. Даже если совпадёт — выносить это «совпадение» в отдельный блок — мало толку («экономим» три строки в CSS, добавляем класс-микс .price в каждую HTML-сущность). Я без претензии — если в вашей практике было оправдано, значит, так и должно быть.