Правила оформления CSS
Каскадные селекторы
Любой блок на странице должен описываться селектором класса. Не используйте каскадные селекторы так как они нарушают принцип независимости компонентов. Это же правило относится к селекторам прямого потомка (>) и соседнего элемента (+).
Исключения:
- Селекторы состояний (: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>
bx-.
- Если к элементу происходит обращение по классу через JavaScript, то такой класс должен иметь префикс js-.
- Для верстки шаблона сайта допускается опускать префикс модуля.
Inline-стили
Избегайте инлайновых стилей, все стили должны задаваться в CSS-файле через назначение классов элементам. Инлайновые стили применимы, только если они являются неотъемлемой частью контента страницы (аватар пользователя, размер ползунков в фильтре и т. п.).
Селектор тега и селектор на атрибут
Избегайте использование имен классов с селектором тега и атрибута.
Плохо:
Хорошо:
Сокращенная форма записи свойств
CSS предлагает множество различных сокращенных форм записи (например, margin, padding, border и другие), которые рекомендуется использовать везде где это возможно, даже если задается только одно из значений. Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.
Плохо:
.meeting-sidebar {
margin-top: 5px;
margin-bottom: 3px;
border-width: 1px;
border-style: solid;
border-color: #fff;
}
Хорошо:
Сокращенные формы для шрифта (font) и фона (background) допускается разделять на несколько свойств.
Единицы измерения
Используйте значения в пикселях. Размеры, указанные в px, абсолютные, четкие, понятные и не зависят ни от чего. Допустимо использовать проценты % везде, кроме размера текста (font-size).
0 и единицы измерения
Не указывайте единицы измерения для нулевых значений.
Плохо:
Хорошо:
Кавычки в ссылках
Не используйте кавычки с функцией url(), кроме случая, когда ссылка содержит пробел, либо формируется программно (обычно при использовании inline-стилей).
Плохо:
Хорошо:
Цвет
Для указания цвета элемента используйте шестнадцатеричную запись или rgba(), если требуется указать прозрачность. Не используйте rgb() и верхний регистр в значении свойства.
Плохо:
Хорошо:
Хаки
Избегайте хаков в CSS-коде. Если все таки требуется сделать уникальные свойства для конкретного браузера, воспользуйтесь специальными классами .bx-chrome, .bx-firefox, .bx-ie10.
Плохо:
Хорошо:
Группировка правил
Старайтесь, чтобы селекторы, описывающие определенный блок верстки, находились в одном месте и не были раскиданы по 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.
Шрифты, ссылки, цвета
Для оформления текста всегда указывайте семейство шрифтов.
Плохо:
Хорошо: