БЭМ-анализ
БЭМ — это набор международных соглашений об именах CSS.Это очень полезное, мощное и простое соглашение об именах, которое делает интерфейсный код более читабельным, простым для понимания и легко расширяемым. БЭМ — это сокращение от блока, элемента, модификатора.
- B: Блок — это блок, независимый компонент, который делит все на компонент.
- E: Элемент является дочерним узлом в блоке.Чтобы указать, к какому блоку принадлежит дочерний узел, используется метод записи block__element.
- M: Модификатор объявляет состояние модификации узла.
Мы используем окно поиска, чтобы кратко проиллюстрировать использование трех вышеуказанных вещей:
Это поле поиска можно рассматривать как блок, состоящий из двух дочерних узлов, один из которых является областью ввода, а другой — кнопкой кнопки запроса.
Для именования этого блока, согласно правилу БЭМ, мы можем записать его следующим образом:
<form class="site-search">
<input type="text" class="site-search__input">
<input type="button" class="site-search__button" value="search">
</form>Назовите общее поле поиска поиск по сайту как модуль.За двумя подузлами под модулем следуют два символа подчеркивания, а также ввод их собственных имен и кнопка.Этот метод именования, даже если мы не видим содержимое веб-страницы, вы можете почувствовать взаимосвязь между структурой страницы и элементами страницы, просто взглянув на имя стиля CSS.
Если мы хотим объяснить, что кнопка-кнопка серая, мы также можем добавить модифицированный модификатор имени класса, например site-search__button--gray.
На приведенном выше рисунке показано, что элемент может быть модульным и может содержать несколько элементов.Такое соглашение об именах может лучше объяснить взаимосвязь между элементами.
Зачем использовать способ именования БЭМ
Вы когда-нибудь ломали голову, когда писали названия стилей CSS? Вы когда-нибудь сталкивались с командной работой, которая не может видеть чужой код и может только беспомощно сказать: «Это переписывание CSS быстрее, чем изменение старых файлов»?
Номенклатура БЭМ дает нам следующие удобства:
- Номенклатура БЭМ дает нам хороший шаблон, который может отражать взаимосвязь между различными элементами в именовании.Именование CSS более семантично, и элементы легче читаются.
- А уникальный метод именования позволяет лучше повторно использовать код, поэтому нет необходимости быть осторожным при написании имени стиля, опасаясь того, что имя будет совпадать с именем стиля в контексте, что приведет к изменению стиля элемента. компонент, который необходимо перезаписать.
- Если вы новичок в методе именования БЭМ, вам может показаться, что имя класса элемента слишком многословно и некрасиво, но такое многословное именование значительно снижает вероятность повторения имен классов.
На официальном сайте BEM указано, что наиболее важными особенностями этого соглашения об именах являются:Ключевой особенностью БЭМ является независимость блоков. Как предполагает CSS, блок можно разместить в любом месте веб-страницы и быть уверенным, что его окружение не повлияет на него. И если вам недавно понадобилось вложить в текущий блок еще один блок, их полная совместимость гарантирована. Другими словами, при поддержке веб-приложения вы можете перемещать блоки по всей странице, добавлять другие элементы и комбинировать их.
Ознакомьтесь с интерфейсом билетов
Интерфейс Tao Piao Piao красиво написан, но недавно я посмотрел на метод именования CSS Tao Piao Piao и почувствовал себя немного неуместным.
Например, индексная полоса в верхней части Taopin Tickets.
Ниже приведено CSS-название верхней панели навигации от Tao Piao Piao.Чтобы сделать структуру страницы лучше для всех, я просто обработал элементы страницы и добавил несколько строк комментариев:
<div class="head-wrap" data-spm="header">
<div class="head-content center-wrap">
<!-- logo：淘票票logo的放置 -->
<h1 class="logo">
</h1>
<!-- cityWrap：有一栏显示当前城市 -->
<div class="cityWrap M-cityWrap">
</div>
<!-- nav-wrap：几个切换页面的地方 -->
<div class="nav-wrap">
<ul class="nav">
<li class="J_NavItem current ">
<a href="#" target="_top">首页</a>
</li>
</ul>
</div>
<!-- entrance-wrap：最右边的两个导肮 -->
<div class="entrance-wrap">
<ul class="entrance">
<li class="entrance-item">
<a class="phone" href="#" target="_blank">手机购买</a>
</li>
<li class="entrance-item">
<a class="service">客服咨询</a>
</li>
</ul>
</div>
</div>
</div>Здесь есть еще две серьезные проблемы:
1. Структура страницы непонятна. Судя по способу именования CSS, трудно увидеть, что вышеперечисленные классы собраны вместе, а контент в одном модуле лишен связи.
2. Именование CSS связано с содержимым страницы, а возможность повторного использования кода низкая. Обратите внимание на приведенные выше методы именования, такие как cityWrap, entry, phone и т. д. Все методы именования связаны с содержимым страницы. Недостатком этого метода именования является то, что его нельзя переместить в другие места для повторного использования. Потому что на других страницах может не быть контента городов, подъездов и мобильных телефонов. Или, если необходимо изменить элементы страницы, например сменить город (cityWrap) на страну (country), для сохранения единообразия CSS и содержимого страницы необходимо изменить все стили CSS, что добавляет много для обслуживания кода.трудность.
Мое предложение для изменения состоит в том, чтобы использовать номенклатуру БЭМ, разделив элементы страницы на модули.
Вся панель навигации как модуль, модуль можно разделить на три типичных слоя: заголовок, тело, нижний колонтитул, соответственно хранить логотип, содержимое панели навигации, другие функции в хвосте:
<!-- 整个导航栏堪称一个模块Block，由三个子节点Element -->
<div class="head-wrap" data-spm="header">
<div class="head-wrap__hd">
<h1 class="head-wrap__logo">
</h1>
</div>
<div class="head-wrap__bd">
<div class="head-wrap__bd__title">南昌</div>
<div class="head-wrap__bd__content">
<ul class="head-wrap__bd__item">
<li class="head-wrap__bd__items">首页</li>
</ul>
</div>
</div>
<div class="head-wrap__ft">
<ul class="head-wrap__ft__item">
<li class="head-wrap__ft__items"><a>手机购买</a></li>
</ul>
</div>
</div>Панель навигации рассматривается как целый блок модуля, который имеет три элемента подузла Elemet.После этого метода именования, даже если вы не смотрите на элементы страницы, просто смотрите на имена классов элементов CSS, можете ли вы угадайте общую структуру? Кроме того, содержимое страницы не используется в качестве метода именования. В этом случае страницы с аналогичной структурой в будущем также могут напрямую повторно использовать этот набор стилей CSS. Полегче.
Адрес статьи Segmentfault:сегмент fault.com/ah/119000001…