Каскадные селекторы

Любой блок на странице должен описываться селектором класса. Не используйте каскадные селекторы так как они нарушают принцип независимости компонентов. Это же правило относится к селекторам прямого потомка (>) и соседнего элемента (+).

Исключения:

• Селекторы состояний (: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;
}