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

Question

[MyQuestion]

Добрый день!

Вопрос простой конечно, но ставит меня в тупик.

Такая структура:

<td class="table__col shop-col">
                        <p class="shop-col__price">
                          1,2 кг х
                          <span class="shop-col__price shop-col__price--grey">200 руб.</span>
                        </p>
                      </td>

Правильно ли так делать? С моей точки зрения, это не совсем корректно, потому что для контейнера "p", может быть задана внутренняя и внешняя геометрия.
Оставлять один модификатор, по БЭМ нельзя.
Опять миксить, и считать этот спан отдельным блоком? Типо "price-text price-text--grey"? Почему-то мне кажется это неловким решением. Тогда для однородности, мне стоило бы и другую часть в спан загнать и оставить там класс без модификатора. Но это явно излишне.

Как бы вы отнеслись к решению, оставить спан без класса и обратится к нему по тегу, через класс родителя?

Comments

[Ankhena]

Наводящий вопрос: а вы уверены, что 1,2 кг это цена?

[MyQuestion]

Ankhena,
Да, я долго сомневался, цена ли эта, получается 200 руб. за килограмм, тут 1,2 кг ... Следующая ячейка, имеет класс shop-col__count.
В макете корзины есть три ценовых позиции:
- Цена за килограмм (200 руб.)
- Сумма, с учётом веса покупки (1.2 кг х 200 руб.)
- Цена всех покупок (total order).

Вроде как не price, но не хочется писать, что-то вроде price per kilogram. "На этом мои полномочия всё) ... "

[strelok011]

Смешались в кучу люди, кони... :)
Нарушена семантика

Answer 1

[Виталий Першин]

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

Как бы вы отнеслись к решению, оставить спан без класса и обратится к нему по тегу, через класс родителя?

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

я в последнее время избегаю давать такие имена, типо item-title )

И правильно делаете, то что вам предложили это дичь полная, блоки и элементы БЭМ не должны быть прилагательными и отвечать на вопрос какой, какая, какие и т.д.. это работа модификаторов.

А теперь по делу. Если взять за основу вашу разметку, то тут несколько вариантов. Например проработать структуру. Вам правильно подсказали вы в цену обернули и цену и вес, а значит вы явно что-то делаете не так. Ваш код может быть таким:

<td class="table__col shop-col">
    <p class="shop-col__info">
        <span class="shop-col__weight">1,2 кг</span>
        х
        <span class="shop-col__price">200 руб.</span>
    </p>
</td>

И можете без проблем модифицировать любой элемент.

Еще возможны миксы с классами отвечающими за цвет, у вас может быть заранее определены классы с конкретными цветами, которые повторяются в макете:

<td class="table__col shop-col">
    <p class="shop-col__info">
        <span class="shop-col__weight">1,2 кг</span>
        х
        <span class="shop-col__new-price color-accent">199 руб.</span>
        <span class="shop-col__old-price color-grey">200 руб.</span>
    </p>
</td>

Comments

[MyQuestion]

Спасибо, за такой развёрнуты ответ.

color-grey

Хотел так сделать, но вспомнил то самое определение БЭМ. Т.е. в таком формате, я не могу сказать, что это как бы имя блока, которое по БЭМ не должно отвечать на вопрос "какой, как выглядит?".

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

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

Тогда как Вы относитесь к избытку классов? Если в разметке, в дереве БЭМ, они там не лишние, но в стилях не используются? Допустим, будут дополнительные состояния, для мобильных устройств, но в моей текущей задачи, нет такой необходимости, проектировать такое решение.

Или например у меня есть такой стек классов:
- Block
- Block__elem mix-class mix-class--modif

По идее, я мог бы описать внешнюю геометрию в классе block__elem, общие стили в mix-class, и в mix-class--modif отличие для каждого элемента. Но представим, что этот элемент, я хочу позиционировать относительно и его координаты задаю не в block__elem, а в mix-class--modif, что бы в стилях, было наглядно ясно, как каждый блок позиционируется. Такой подход не верный? Особенно, если block__elem в этом случае, останется без стилей в принципе.
И как избежать разбросанных кусков кода? Когда за позиционирование будет отвечать одно, за общую структуру другое, а дальше пойдут всякие модификаторы в каждом конкретном случае?

[Виталий Першин]

Хотел так сделать, но вспомнил то самое определение БЭМ. Т.е. в таком формате, я не могу сказать, что это как бы имя блока, которое по БЭМ не должно отвечать на вопрос "какой, как выглядит?".

Верно. Это своего рода тоже соглашение, как в фреймворках, заранее определенные классы, который делают то что они делают. Чтобы добавить гибкости мы можем использовать не названия цвета, а его назначение, например color-accent color-primary

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

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

Тогда как Вы относитесь к избытку классов? Если в разметке, в дереве БЭМ, они там не лишние, но в стилях не используются? Допустим, будут дополнительные состояния, для мобильных устройств, но в моей текущей задачи, нет такой необходимости, проектировать такое решение.

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

И как избежать разбросанных кусков кода? Когда за позиционирование будет отвечать одно, за общую структуру другое, а дальше пойдут всякие модификаторы в каждом конкретном случае?

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

[MyQuestion]

Виталий, Если в конкретном случае, то есть несколько попапов, вот структура одного из них:

<div class="shopping-cart__popup popup popup--shopping-cart dropdown"></div>

Вешаю общие стили на класс popup:

.popup {
  position: absolute;
  
  background-color: #f8f7f4;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}

А потом решаю, раз класс popup общий, и его всплытие зависит от конкретных координат, и он не влияет на родителя в потоке документов, то координаты я пропишу в классе модификаторе:

.popup--shopping-cart {
  right: 0;
  top: 110%;

  width: 540px;
  padding: 20px 15px;

  color: #323232;
}

А класс shopping-cart__popup, в таком случае, у меня остаётся пустым...

Хотя, когда я писал всё это, уже был уверен на 70%, что координаты должны быть в shopping-cart__popup, а не в его модификаторе (

А по поводу, кусков кода, я имел ввиду, что часть кода, забирают классы, которые я буду переиспользовать. Эти классы, я описываю, в самом начале простыни, до header. Потом уже, в общем потоке стилей, через 500-700 строчек, дохожу до описания конкретных блоков, и уже в них всплывают модификаторы переиспользуемых стилей.
Т.е. кусок кода в начале простыни, кусок в средине и т.д.

А ещё же количество классов в одном теге возрастает.
Посмотрите на мой пример. 4-е класса и все они описывают один элемент разметки. Все находятся в разных частях css стиля. Читать такое неудобно ) Хорошо есть инспектор браузера, но без него, даже свой собственный код, достаточно сложно воспринимать. Поэтому кстати, очень сильно гружусь, с правильным, лаконичным названием класса, что бы было ясно, что он делает.

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

[Виталий Першин]

А класс shopping-cart__popup, в таком случае, у меня остаётся пустым..

Это не страшно

А ещё же количество классов в одном теге возрастает.

4 класса это не так много. Постарайтесь давать короткие понятные имена, чтобы они много места не занимали, а со временем поймете как сократить кол-во классов. В хваленом tailwind там по 20 классов пихают и всех все устраивает:

<button type="button" class="py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75">
      Click me
    </button>

Все находятся в разных частях css стиля.

Ну в вашем примере popup и dropdown, как не крути это 2 разных блока и сверху на них придется накатить модификацию или микс, вы сами себя в такую ситуацию поставили, тут 2 варианта либо менять структуру и упростить код, либо работать с чем есть

[MyQuestion]

Виталий, Спасибо Вам большое, за такой развёрнутый ответ )

Answer 2

[Steppp]

<td class="table__col shop-col">
  <p class="shop-col__price shop-col__price--grey">
    1,2 кг х
    <span>200 руб.</span>
  </p>
</td>

.shop-col__price {
  &--grey {
    color: green;
    span {
      color: grey;
    }
  }
}

Comments

[MyQuestion]

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

[Steppp]

MyQuestion, Нет, это не препятствие! Я верстаю под CMS, и заказчики сами просят, допустим блок текста, в нем есть ссылки, жирные слова, курсив! Так вот смысла нет им задавать классы) В блоке врядли чтото еще будет, а класс может быть длинный.

Не обьязательно всем тегам задавать класс! Может вылезти так, что у тебя весь html в классах будет) А потом классы да id для js писать)

[Steppp]

и это не верно

<p class="shop-col__price">
<span class="shop-col__price

Это 2 разных элемента! Тут лучше так

<p class="shop-col__price">
<span class="shop-col__price-grey">

[MyQuestion]

Steppp,

Тут лучше так

Кстати да, просто я в последнее время избегаю давать такие имена, типо item-title )

Спасибо за Ваш ответ )