Каскадные селекторы
Любой блок на странице должен описываться селектором класса. Не используйте каскадные селекторы так как они нарушают принцип независимости компонентов. Это же правило относится к селекторам прямого потомка (>) и соседнего элемента (+).
Исключения:
- Селекторы состояний (:visited, :active, :hover).
- Селекторы контекста. Существуют случаи, когда компонент используется на разных страницах или в разном окружении. В этом случае удобно использовать селекторы контекста. Важно, чтобы эти контекстные стили содержались в родительском компоненте.
- Верстка, в которой нельзя изменить структуру HTML-тегов.
Именование классов
- Имена классов записываются на английском языке в нижнем регистре. Если не уверены в написании английского слова, проверьте его по словарю. PHPStorm имеет встроенную проверку орфографии.
- Желательно, чтобы терминология в названии класса совпадала с названиями, которыми оперирует разработчик (названия полей в базе данных, названия PHP-классов).
- Для разделения слов в именах используется дефис (
-).
- Создавайте имена CSS-селекторов максимально информативными и понятными. Это поможет упростить разработку и отладку кода. Не стесняйтесь использовать длинные названия классов.
- Название класса должно отражать суть блока, а не его внешний вид.
- Первым словом в названии класса должно идти название модуля. На втором месте - название блока. Название блока может состоять из нескольких слов. Такой формат, с одной стороны, сразу показывает принадлежность стилей, с другой - гарантирует их уникальность. Уникальность стилей обеспечивает независимость верстки компонентов.
<div class="task-detail">
<div class="task-detail-title"></div>
<div class="task-detail-description"></div>
</div>
<div class="crm-lead-form">
<div class="crm-lead-form-title"></div>
<div class="crm-lead-form-description"></div>
</div>
- Вложенные элементы должны сохранять контекст именования блока. Блок не обязательно должен быть прямым родителем элемента.
Оба варианта именования допустимы:
<div class="disk-user">
<div class="disk-user-info">
<div class="disk-user-avatar"></div>
<div class="disk-user-name"></div>
</div>
</div>
<div class="disk-user">
<div class="disk-user-info">
<div class="disk-user-info-avatar"></div>
<div class="disk-user-info-name"></div>
</div>
</div>
- Не допускайте сокращений. Сокращения могут привести к ситуации, когда одинаковые вещи будут названы по-разному (btn/button).
- Не используйте старый префикс
bx-.
- Если к элементу происходит обращение по классу через JavaScript, то такой класс должен иметь префикс
js-.
- Для верстки шаблона сайта допускается опускать префикс модуля.
Inline-стили
Избегайте инлайновых стилей, все стили должны задаваться в CSS-файле через назначение классов элементам. Инлайновые стили применимы, только если они являются неотъемлемой частью контента страницы (аватар пользователя, размер ползунков в фильтре и т. п.).
Селектор тега и селектор на атрибут
Избегайте использование имен классов с селектором тега и атрибута.
Плохо:
div.task-detail-title {
margin: 20px;
}
input[name=user] {
margin: 20px;
}
Хорошо:
.task-detail-title {
margin: 20px;
}
.task-detail-user-field {
margin: 20px;
}
Сокращенная форма записи свойств
CSS предлагает множество различных сокращенных форм записи (например, margin, padding, border и другие), которые рекомендуется использовать везде где это возможно, даже если задается только одно из значений. Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.
Плохо:
.meeting-sidebar {
margin-top: 5px;
margin-bottom: 3px;
border-width: 1px;
border-style: solid;
border-color: #fff;
}
Хорошо:
.meeting-sidebar {
margin: 5px 0 3px;
border: 1px solid #fff;
}
Сокращенные формы для шрифта (font) и фона (background) допускается разделять на несколько свойств.
Единицы измерения
Используйте значения в пикселях. Размеры, указанные в px, абсолютные, четкие, понятные и не зависят ни от чего. Допустимо использовать проценты % везде, кроме размера текста (font-size).
0 и единицы измерения
Не указывайте единицы измерения для нулевых значений.
Плохо:
.timeman-task-list {
margin: 0px 12px 0px 13px;
}
Хорошо:
.timeman-task-list {
margin: 0 12px 0 13px;}
Кавычки в ссылках
Не используйте кавычки с функцией url(), кроме случая, когда ссылка содержит пробел, либо формируется программно (обычно при использовании inline-стилей).
Плохо:
.im-user-status {
background: url("images/im-sprite.png");
}
Хорошо:
.im-user-status {
background: url(images/im-sprite.png);
}
Цвет
Для указания цвета элемента используйте шестнадцатеричную запись или rgba(), если требуется указать прозрачность. Не используйте rgb() и верхний регистр в значении свойства.
Плохо:
.disk-invitation-popup {
background: #FFFFFF;
}
Хорошо:
.disk-invitation-popup {
background: #fff;
}
Хаки
Избегайте хаков в CSS-коде. Если все таки требуется сделать уникальные свойства для конкретного браузера, воспользуйтесь специальными классами .bx-chrome, .bx-firefox, .bx-ie10.
Плохо:
*+ html .vote-answers {
margin: 5px;
}
Хорошо:
.bx-ie7 .vote-answers {
margin: 8px;
}
Группировка правил
Старайтесь, чтобы селекторы, описывающие определенный блок верстки, находились в одном месте и не были раскиданы по CSS-файлу.
Псевдоселекторы (:before, :after)
Псевдоселекторы позволяют не нагромождать HTML-код лишними элементами, имеющими декоративное назначение. Важно понимать, что этих элементов нет в DOM и обратиться к ним через JavaScript невозможно.
Сброс стилей (CSS Reset)
Не используйте CSS Reset в верстке. Компоненты являются независимыми блоками. На них не должны влиять CSS-правила, созданные для всей страницы. Это нарушает независимость блоков и затрудняет их повторное использование. Общий сброс стилей реализуется с помощью глобальных CSS-правил, которые в большинстве случаев пишутся к селекторам на тег, что нежелательно использовать в верстке. Кроме того, сброс стилей влияет на производительность рендеринга страницы и может конфликтовать с версткой клиентов.
Браузерные префиксы
Свойство без префикса всегда должно быть в конце.
Плохо:
.menu-item {
-webkit-box-shadow:0 0 10px 20px #000;
box-shadow:0 0 10px 20px #000;
-moz-box-shadow:0 0 10px 20px #000;
}
Хорошо:
.menu-item {
-webkit-box-shadow:0 0 10px 20px #000;
-moz-box-shadow:0 0 10px 20px #000;
box-shadow:0 0 10px 20px #000;
}
Селекторы состояний (selected, active и hover)
Классы-модификаторы должны именоваться согласно общим правилам:
<div class="menu">
<div class="menu-item"></div>
<div class="menu-item menu-item-selected"></div>
<div class="menu-item"></div>
</div>
Приоритеты селекторов и !important
Избегайте использования модификатора приоритета !important.
Шрифты, ссылки, цвета
Для оформления текста всегда указывайте семейство шрифтов.
Плохо:
.disk-external-folder {
font: 12px "Helvetica Neue";
}
Хорошо:
.disk-external-folder {
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
