Правила стиля кода CSS

css

Валидность кода CSS

Старайтесь использовать валидный код CSS.

Используйте CSS-код, за исключением случаев работы с ошибками программы проверки CSS или необходимости в проприетарных решениях.

Используйте такие инструменты, какW3C CSS validator, для проверки валидности.

Использование корректного CSS — важный показатель качества. Если вы обнаружите CSS-код, который не оказывает эффекта, удалите его и обеспечьте надлежащее использование CSS.

Именование ID и классов

Присваивайте ID и классам обобщённые и осмысленные имена.

По ID или имени класса должно быть понятно, для чего предназначен элемент, а не поверхностное или расплывчатое именование.

Следует отдавать приоритет именованию на основе конкретного назначения элемента, так как это проще всего понять и позволяет сократить количество обновлений.

Обобщённые имена можно добавлять к элементам, где соседние элементы не являются особенными или не имеют индивидуального значения, например обобщённые имена вроде "helpers".

Использование функциональных или обобщённых имён сокращает ненужные изменения документа или шаблона.

/* 不推荐: 无意义 不易理解 */
#yee-1901 {}

/* 不推荐: 表达不具体 */
.button-green {}
.clear {}
/* 推荐: 明确详细 */
#gallery {}
#login {}
.video {}

/* 推荐: 通用 */
.aux {}
.alt {}

Стиль именования ID и классов

Когда это не обязательно, имена ID и классов должны быть как можно короче.

Кратко передавайте, к чему относится ID или класс.

Таким образом, код легко понять, и он эффективен.

/* 不推荐 */
#navigation {}
.atr {}
/* 推荐 */
#nav {}
.author {}

Селекторы типов

Избегайте использования CSS-селекторов типов.

Когда это не обязательно, не объединяйте имена тегов элементов с ID или классами.

Из соображений производительности избегайте использования узлов-предков в качестве селекторов.причины производительности. 

/* 不推荐 */
ul#example {}
div.error {}
/* 推荐 */
#example {}
.error {}

Сокращённая запись свойств

Используйте сокращённую запись при указании значений свойств.

Многие CSS-свойства поддерживают сокращённую записьсокращённая запись(например font ) По возможности используйте сокращённую запись, даже если задаётся только одно значение.

Использование сокращённой записи повышает эффективность кода и делает его более понятным.

0 и единицы

Когда это не обязательно, 0 не добавляйте единицы после него.

margin: 0;
padding: 0;

Десятичные дроби, начинающиеся с 0

Опускайте 0 перед десятичной точкой у десятичных дробей, начинающихся с 0.

Для значений или длин в диапазоне от -1 до 1 0 перед десятичной точкой 0 можно опустить.

font-size: .8em;

Кавычки вне URI

Опускайте кавычки вне URI.

Не url() используйте кавычки в ( "" , '' ) 。

Шестнадцатеричная

Используйте 3 символа для шестнадцатеричных значений, когда это возможно.

Это используется при добавлении значений цвета; использование 3-символьного шестнадцатеричного кода короче и лаконичнее.

/* 不推荐 */
color: #EEBBCC;
/* 推荐 */
color: #ebc;

Префиксы

Добавляйте специальный префикс идентификатора приложения перед селекторами (необязательно).

В больших проектах лучше всего добавлять идентифицирующий префикс (пространство имён) перед именами ID или классов, соединённый коротким дефисом.

Использование пространств имён может предотвращать конфликты имён и упрощать сопровождение, например при операциях поиска и замены.

Разделители в именах ID и классов

Разделяйте слова в именах ID и классов коротким дефисом "-".

Не используйте в именах селекторов другие соединители, кроме короткого дефиса "-" (включая полное отсутствие таковых), чтобы улучшить понимание и поиск имён.

/* 不推荐：“demo”和“image”中间没加“-” */
.demoimage {}

/* 不推荐：用下划线“_”是屌丝的风格 */
.error_status {}
/* 推荐 */
#video-id {}
.ads-sample {}

Хаки

Лучше всего избегать чёртовых CSS "хаков" — сначала попробуйте другие решения.

Хотя соблазнительно использовать их для определения user-agent или специальных CSS-фильтров, их поведение слишком нестабильно и в долгосрочной перспективе навредит эффективности проекта и управлению кодом, поэтому, если можно использовать другие решения, найдите их.

Правила форматирования CSS-кода

Порядок объявлений

Объявляйте в алфавитном порядке.

Объявление всего в алфавитном порядке облегчает запоминание и поддержку.

Игнорируйте порядок браузерно-специфичных префиксов, но несколько браузерно-специфичных префиксов для определённого CSS-свойства должны сохранять относительный порядок (например, префикс -moz перед -webkit).

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

Отступы в блоках кода

Делайте отступ для всего содержимого внутри блоков кода (между "{}").

Делайте отступ для всегосодержимого блока кода, так как это улучшает наглядность иерархии.

Окончания объявлений

Все объявления должны заканчиваться ";".

Для согласованности и расширяемости добавляйте точку с запятой в конце каждого объявления.

/* 不推荐 */
.test {
  display: block;
  height: 100px
}
/* 推荐 */
.test {
  display: block;
  height: 100px;
}

Окончания имён свойств

Добавляйте пробел после двоеточия в имени свойства.

Из соображений согласованности добавляйте пробел между именем свойства и значением (заметьте, не между именем свойства и двоеточием).

/* 不推荐 */
h3 {
  font-weight:bold;
}
/* 推荐 */
h3 {
  font-weight: bold;
}

Переносы строк для селекторов и объявлений

Разделяйте селекторы и объявления переносами строк.

Каждый селектор и каждое объявление должны находиться на новой строке.

/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}
/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

Переносы строк для правил

Каждое правило — на отдельной строке.

Оставляйте пустую строку между двумя правилами.

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

Правила метаданных CSS

Раздел комментариев

Пишите комментарии по группам. (Необязательно)

Если возможно, пишите единые комментарии для группы таблиц стилей в соответствии с функциональной категорией. Размещайте их на отдельных строках.

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

Раздел для критики

Придерживайтесь принципа согласованности

Если вы собираетесь редактировать код, потратьте несколько минут на изучение его стиля кода. Если в нём что-то делается определённым образом, вы должны делать так же.

При едином стиле создаётся среда общего мышления, и участники могут сосредоточиться на том, что вы пытаетесь сказать, а не сначала гадать, на каком языке и с какой планеты вы говорите. Хотя мы предлагаем здесь единые правила стиля, это лишь для того, чтобы все узнали о них и научились на их основе корректировать собственный стиль. Конечно, поддерживать свой уникальный стиль тоже важно. Бла-бла-бла...

Связанные ресурсы