Блог

Главная - Вопросы по программированию - Как бы я назвал эти вложенные элементы с помощью BEM?

Как бы я назвал эти вложенные элементы с помощью BEM?

#html #css #bem

#HTML #css #bem

Вопрос:

Итак, у меня есть страница, подобная так:

 <div class="dashboard">
  <div class="dashboard-item">
    <div class="dashboard-item__header">
        <span class="dashboard-item__header__icon dashboard-item__header__icon--modifier"></span>Header Title
    </div>
    <div class="dashboard-item__content">
        <p class="???"></p>
    </div>
  </div>
</div>

У меня есть панель мониторинга, которая является моим контейнером, и в ней могут быть разные элементы. Затем элемент имеет заголовок и некоторое содержимое, но этот элемент всегда будет на панели мониторинга. Итак, я действительно должен назвать это dashboard__item ?

Кроме того, как насчет вложенных элементов, таких как заголовок и содержимое? Должны ли они использовать название dashboard__item__header?

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

Итак, как я должен назвать такой случай?

И в содержимом, если у меня есть некоторые элементы, которые должны выглядеть по-другому, потому что они находятся внутри элемента панели мониторинга?

Ответ №1:

должен ли я действительно назвать это dashboard__item ?

Это зависит. Если все элементы внутри dashboard очень похожи и довольно просты, можно использовать элемент of dashboard . Но если они разные или сложные, вы можете рассмотреть возможность создания отдельных блоков для каждого вида возможных элементов и, при необходимости, смешивать их с dashboard__item целью позиционирования (см. https://en.bem.info/methodology/faq/#mixes ).

Должны ли они использовать название dashboard__item__header?

Нет, используйте что-то вроде dashboard__item-header . See https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

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

Смотрите вторую часть этого ответа https://en.bem.info/methodology/faq/#why-should-i-avoid-using-nested-selectors

PS: Вы задали 3 вопроса из нашего FAQ в одном сообщении! 😉