Концепция CSS БЭМ
Я пытаюсь обойти концепцию Block-Element-Modifier в CSS, и я немного запутался. Вот пример кода
<div class = "block">
<div class = "block-header">
<h3>Block Title</h3>
</div>
<div class = "block-content">
<p>Lorem Ipsum</p>
</div>
<div class = "block-footer">
<p>Footer</p>
</div>
</div>
Насколько я понимаю, классы .block, .block-header, .block-content и .block-footer являются БЛОКАМИ концепции БЭМ (поправьте меня, если это не так), но тогда что такое <h3> and <p> блок или элемент?
меня просто поразило, так что редактирование вопроса,
Если оба <h3> and <p> являются блоками (в случае, если это), что, вероятно, может быть элементами этих двух тегов?
отредактировано снова
Вот блок кода в html
<div class = "block">
<div class = "block-content">
<div class = "user-image"> <img class = "user-image__image" src = "image/1.jpg" alt = ""> </div>
<div class = "user-meta">
<h3 class = "user-meta__username user-meta__username-red"> Trump </h3>
</div>
<ul class = "nav">
<li class = "nav__item nav__item_active"><a class = "nav__link">One</a></li>
<li class = "nav__item"><a class = "nav__link">Two</a></li>
<li class = "nav__item"><a class = "nav__link">Three</a></li>
</ul>
</div>
</div>
Не могли бы вы просмотреть приведенный выше код и сообщить мне, правильно ли это,
.block, .block-content, .block-image, .user-meta and .navявляются БЛОКАМИ БЭМuser-meta__username and nav__item— Элементы БЭМ.user-meta__username-red— Модификатор БЭМ.
Я начал пару дней назад, поэтому новичок в этом, да, я читал о соглашениях об именах, я думал, что класс block-header тоже был блоком. Это то, что я тоже написал .. Так является ли блок-заголовок, блок-контент и блок-нижний колонтитул Элементами или Блоками?
Эй, это красивый учебник .... спасибо, @Helenesh.
Это зависит. Я бы исследовал это как можно больше и просматривал примеры. Поначалу это может быть трудно понять, но вы справитесь. Все, что я могу сделать, это повторить то, что находится внутри документации. Удачи!
@Helenesh, я только что прошел урок, который вы опубликовали. В нем говорится, что блоки могут быть вложены друг в друга, и у вас может быть любое количество уровней вложенности, поэтому я понимаю, что блок-заголовок, блок-содержимое и блок-нижний колонтитул являются блоками. Можете ли вы проверить.
Ответы 2
БЭМ следует соглашению об именах block__element--modifier
Приведение примера
<ul class = "menu">
<li class = "menu__item menu__item--active"></li>
<li class = "menu__item"></li>
<li class = "menu__item"></li>
<li class = "menu__item"></li>
</ul>
Блок - menu,
Элемент - menu__item,
Модификатор - menu__item--active
Вы так и не ответили на мой вопрос, являются ли .block, .block-header, .block-content и .block-footer блоками или элементами, а как насчет h3 и p? Я не ищу соглашения об именах.
Насколько я читал и понимаю, что блок может быть вложен в другой блок, поэтому все три класса являются блоками, но ответ выше меня еще больше смущает.
Во-первых, нам не нужно упоминать «блок», когда сам заголовок/контент/нижний колонтитул является блочным элементом. когда дело доходит до h3 и p, в большинстве случаев эти теги будут использоваться как элементы (возможно, «заголовок» или «описание»). Приведем еще один пример - контент, контент__название, контент__описание
Я называю div моего блока страницы, так что это делает его блоком, я мог бы использовать блок, но блок звучит лучше, во-вторых, этот блок далее разделен на три раздела: заголовок, контент и нижний колонтитул, я знаю, что я делаю прямо сейчас так что да, вы можете назвать это БЛОК. И после прохождения ru.bem.info/methodology/quick-start/#block я чувствую, что да, эти разделы определенно являются блоками концепции БЭМ. h3 и p - элементы, и я думаю, что они и в этом случае.
как насчет этого, заголовок, нижний колонтитул или контент могут дополнительно содержать набор блоков. Навигация - это блок, в котором есть еще блок логотипа, блок меню и блок панели поиска... Да, да, да, да, я получил часть блока, теперь к элементу.
Во-первых, название и структура — дело личное. Хотя концепция БЭМ вполне ясна. Это инструкция, а не закон.
Блокировать: Сколько блоков, элементов или модификаторов у вас есть, зависит от того, насколько вы хотите повторно использовать свой собственный код. Количество блоков (повторяющихся элементов) может быть таким большим или маленьким, как вы хотите в своем собственном проекте. Мои собственные рекомендации заключаются в том, что я использую блок только тогда, когда знаю, что ситуация будет повторяться.
Руководство по CSS для блоков:
- Использовать только селектор имени класса
- Нет имени тега или идентификатора Нет зависимости от
- другие блоки/элементы на странице
Элемент: Элементной частью БЭМ является блок его «статического» содержимого. Это могут быть неповторяющиеся элементы, такие как одноразовые стили заголовков, стили списков, графические элементы и т. д. Вы никогда не смешиваете элементы других блоков внутри своего собственного блока. Пример:
ХОРОШО:
<div class = "logo">
<img src = "/" class = "logo__image">
</div>
ПЛОХОЙ:
<div class = "logo">
<img src = "/" class = "branding__logo">
</div>
Руководство по CSS для элементов
- Использовать только селектор имени класса
- Нет имени тега или идентификатора
- Отсутствие зависимости от других блоков/элементов на странице
Модификатор: Модификаторы можно использовать для блоков и элементов в зависимости от того, насколько сильно вы хотите изменить макет, когда происходит действие. Это может быть выделение чего-то, чтобы полностью изменить внешний вид дизайна. Или просто спрятать вещи.
Руководство по CSS для модификаторов
- Чтобы изменить элементы на основе модификатора уровня блока
- Чтобы изменить элементы на основе модификатора элемента
Подробнее о БЭМ можно узнать здесь: http://getbem.com/
Пример вашего кода:
<!-- Begin block: topbar -->
<div class = "topbar">
<div class = "topbar__content">
<!-- Begin block: user -->
<div class = "user">
<img class = "user__image" src = "image/1.jpg" alt = "">
<div class = "user__meta">
<h3 class = "user__username user__username--red"> Trump </h3>
</div>
</div>
<!-- Begin block: nav -->
<ul class = "nav">
<li class = "nav__item nav__item--active"><a class = "nav__link">One</a></li>
<li class = "nav__item"><a class = "nav__link">Two</a></li>
<li class = "nav__item"><a class = "nav__link">Three</a></li>
</ul>
</div>
</div>Имейте в виду, что это мой личный вывод из концепции БЭМ. Будьте свободны не соглашаться или использовать другие методы.
Привет. БЭМ четко указывает, что за элементами должны следовать двойные символы подчеркивания, например
block__headerвместоblock-header. Но, конечно же, вы можете сами выбирать стиль элементов. Концепция четко объяснена здесь. Если вы предпочитаете визуальное руководство, обратитесь к этому раздел. Удачи!