@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"? Почему-то мне кажется это неловким решением. Тогда для однородности, мне стоило бы и другую часть в спан загнать и оставить там класс без модификатора. Но это явно излишне.

Как бы вы отнеслись к решению, оставить спан без класса и обратится к нему по тегу, через класс родителя?
  • Вопрос задан
  • 144 просмотра
Решения вопроса 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Чтобы помочь вам разобраться нужно видеть дизайн и понимать контекст проблемы, а то что я вижу в вашем наименовании это какая-то тавтология от которой у новичков и возникает неприязнь к БЭМ

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

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

я в последнее время избегаю давать такие имена, типо 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>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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;
    }
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы