БЭМ CSS, глобалы и именование классов - PullRequest
Новая
       36

БЭМ CSS, глобалы и именование классов

0 голосов
/ 05 октября 2018

Я пытаюсь определить подход для стандартизации классов в CSS для использования в нескольких проектах.

Я понимаю, что модель BEM облегчает разработку, указав блокэлементы уровня для автономного стиля.Меня беспокоит этот подход в обработке глобальных элементов.

Пример:

У меня есть два "модуля": новости и события.Оба модуля имеют список своих элементов, но на сайт 1 модули идентичны, а на сайт 2 они имеют довольно уникальные стили.

Текущее понимание:

Этот пост 2014 года заставляет меня поверить, что лучшим подходом будет: 

<div class="news news--listing module module--listing">...</div>
<div class="events events--listing module module--listing">...</div>

Мне кажется, что это может быть лучшим подходом, так каклюбой глобальный стиль может быть обработан в module__listing, и если требуется уникальность, доступны определенные классы.

Хотя у меня отсюда и более тяжелые времена с детьми.Скажем, у обоих есть список товаров, как к этому можно подходить?Пример: 

<div class="news news--listing module module--listing">
    <ul class="news__list item__list">
       <li class="news__item item">...</li>
    </ul>
</div>

Похоже на то, что вы идете за борт - но я не уверен в лучшем решении.Могу ли я просто сохранить это соглашение об именах в дочернем списке?

Вопрос:

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

Ответы [ 2 ]

0 голосов
/ 16 марта 2019

Блок, Элемент, Методология модификаторов (БЭМ)

На вашем примере это будет выглядеть так: 

<div class="[block]">
    <ul class="[block__element1]">
       <li class="[block__element2]">...</li>
       <li class="[block__element2] [block__element2--modifier]">...</li>
    </ul>
</div>

Тогда ваш код будет выглядеть так: 

<div class="news">
    <ul class="news__list">
       <li class="news__item">...</li>
       <li class="news__item news__item--selected">...</li>
    </ul>
</div>

Обратите внимание, что за модификатором (news__item - selected) всегда следует класс элемента (news__item).

Дополнительная информация:

BEM Documentation, Quick Start: https://en.bem.info/methodology/quick-start/

БЭМ по примеру: https://seesparkbox.com/foundry/bem_by_example

0 голосов
/ 05 октября 2018

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

...