1. Спецификация именования (спецификация БЭМ)
Спецификация БЭМ является основной спецификацией именования CSS.БЭМ соответствует блоку, элементу и модификатору соответственно, чтобы положить конец запутанному методу именования и получить семантический метод именования CSS.
1.1 Что такое Блок
В спецификации БЭМ блок означает компонент.Предположим, вы хотите написать компонент кнопки, вам нужно только установить кнопку класса .button, а затем вы можете использовать этот класс на любой кнопке для генерации традиционного стиля компонента. В БЭМ блоки записываются с тем же именем, что и класс, следующим образом:
.button {
}
.header {
}
БЭМ использует .button вместо прямого<button>Причина для элемента в том, что имена классов можно бесконечно повторно использовать. Например, если<button>Если цвет фона элемента установлен на красный, все будут вынуждены наследовать красный фон. Если вы хотите установить другой цвет для кнопки на своей странице, вы должны переопределить<button>элементы для исправления кода, таким образом не только загромождается код CSS, но и может<button>Взаимодействие элементов.
/* good */
.button { background-color: red; }
.button--secondary { background-color: blue; }
/* bad */
button { background-color: red; }
.parent button { background-color: blue;}
Как показано в правильном демонстрационном коде выше, если установлена кнопка класса .button, ее можно использовать в любом <button>Выберите, использовать ли класс .button для элемента. Затем, если вам нужен другой цвет фона, вы должны изменить его на новый класс, такой как .button--secondary, а --secondary здесь фактически является модификатором, который будет обсуждаться ниже.
1.2 Что такое элемент
Элементы являются дочерними элементами блоков, и элементы представляют цель, а не состояние. Блоки и элементы разделяются двойным подчеркиванием, поэтому, если вы видите, например,.form__rowС таким именем класса вы сразу узнаете, что в блоке .form есть элемент строки.
/* good */
.form__row {
}
/* bad */
.form .row {
}
Следует отметить, что для элемента его нельзя использовать независимо от родителя блока, как показано в следующем коде:
/* good */
<header class="header">
<p class="header__body"></p>
</header>
/* bad */
<header>
<p class="header__body"></p>
</header>
1.3 Что такое модификатор
Модификаторы — это флаги, которые изменяют внешний вид блока. Чтобы использовать модификатор, разделите его двойной пунктирной линией, как видно из примера в 1.1 выше, измененная кнопка будет называться .button--secondary, --secondary — это модификатор,
.header--first {
}
.header__button--selected {
}
Следует также отметить, что для модификатора его нельзя использовать независимо от родителя блока и элемента, как показано в следующем коде:
/* good */
<p class="header">
<p class="header__body">
<button class="header__button header__button--primary"></button>
<button class="header__button header__button--default"></button>
</p>
</p>
/* bad */
<p>
<p>
<button class="header__button--primary"></button>
<button class="header__button--default"></button>
</p>
</p>
2. Значение атрибута
2.1 Числовое значение
Если значение представляет собой десятичное число от 0 до 1, рекомендуется опустить 0 в целой части.
/* good */
.panel {
opacity: .8
}
/* bad */
.panel {
opacity: 0.8
}
2.2 Длина
Рекомендуется опускать единицу, если длина равна 0.
/* good */
.list {
padding: 0 5px;
}
/* bad */
.list {
padding: 0px 5px;
}
2.3 Цвет
Не рекомендуется использовать именованные значения цвета.
/* good */
.button--success {
color: #90ee90;
}
/* bad */
.button--success {
color: lightgreen;
5.2 字重
[强制] font-weight 属性必须使用数值方式描述。
2.4 Чистый поплавок
Рекомендуется очистить исправление, установив для псевдокласса clear или активировав BFC, когда элемент должен поддерживать высоту, чтобы содержать внутренний плавающий элемент. Старайтесь не использовать метод добавления пустых тегов.
2.5 !important
Помимо общедоступных стилей, старайтесь не использовать !important в бизнес-коде.
2.6 z-index
Рекомендуется накладывать z-индекс, чтобы управлять визуальной иерархией абсолютно позиционированных элементов вне потока документа.
3. Верстка
3.1 Размер шрифта
Из-за механизма рендеринга шрифтов в Windows эффект отображения текста размером менее 12 пикселей крайне плохой и трудный для чтения. Поэтому китайский контент, отображаемый на платформе Windows, должен иметь размер шрифта не менее 12 пикселей.
3.2 Вес слова
Свойство font-weight рекомендуется описывать численно.
/* good */
h1 {
font-weight: 700;
}
/* bad */
h1 {
font-weight: bold;
}
3.3 Высота строки
Line-height должен использовать числовое значение при определении абзаца текста. Установите для высоты строки значение, и браузер произведет перерасчет на основе размера шрифта, установленного текущим элементом. В сочетании текстовых абзацев с разными размерами шрифта можно добиться более удобного эффекта межстрочного интервала, избегая необходимости устанавливать высоту строки для каждого набора размеров шрифта. Если высота строки используется для управления вертикальным центрированием, она должна быть установлена в соответствии с высотой контейнера.
/* good */
.container {
line-height: 1.5;
}
/* bad */
.container {
line-height: 15px;
}
4. Связанный с селектором
4.1 Не добавляйте селекторы типов для id, селекторы классов
Мало того, что это не очень эстетично, так еще и влияет на производительность.
/* good */
#error,.message {
font-color: #c00;
}
/* bad */
input#error,p.message {
font-color: #c00;
}