47  /  382
Справочник

Правила оформления CSS

Просмотров: 49603
Дата последнего изменения: 02.11.2023
Роберт Басыров
Сложность урока:
2 уровень - несложные понятия и действия, но не расслабляйтесь.
1
2
3
4
5
Недоступно в лицензиях:
Ограничений нет

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

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

Исключения:

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

31
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии
Даниил
Цитата
Псевдоселекторы (:before, :after)

Псевдоселекторы позволяют не нагромождать HTML-код лишними элементами, имеющими декоративное назначение. Важно понимать, что этих элементов нет в DOM и обратиться к ним через JavaScript невозможно.

Уже возможно. Книга Отзывчивый дизайн на HTML5 и CSS3 для любых устройств 3-е издание, Бен Фрэйн, 2022 год, страница 320-321.