Руководство по написанию кода. Стандарты для разработки гибкого, надежного и поддерживаемого кода на CSS.

Каждая строка кода должна казаться написанной только одним человеком, вне зависимости от количества разработчиков

Синтаксис

  • Используйте мягкие отступы с двумя пробелами — это единственный способ гарантировать, что ваш код будет везде одинаково выглядеть.
  • При группировке селекторов помещайте каждый селектор на отдельную строку.
  • Для лучшей читаемости оставляйте один пробел перед открывающейся фигурной скобкой блока объявлений.
  • Помещайте закрывающуюся фигурную скобку блока объявлений на новой строке.
  • Оставляйте один пробел после : для каждого объявления.
  • Каждое объявление должно находится на отдельной строке для более точного сообщения об ошибках.
  • Завершайте все объявления точкой с запятой. Для последнего объявления в блоке это не является обязательным, но в противном случае ваш код будет более подвержен ошибкам.
  • Для свойств, значения которых разделены запятыми, следуюет оставлять по одному пробелу после каждой запятой (например, box-shadow).
  • Не оставляйте пробелов после запятых внтури значений rgb(), rgba(), hsl(),hsla(), или rect(). Это помогает различать различные цветовые значения (запятая без пробела) от нескольких значений одного свойства (запятая с пробелом).
  • Не добавляйте начальный ноль для значений (например, .5 вместо 0.5).
  • Все 16-ичные значения записывайте строчными буквами (в нижнем регистре), например,#fff. Строчные буквы гораздо легче различить при просмотре файла, поскольку они, как правило, имеют больше уникальных форм.
  • Используйте короткие 16-ичные значения везде, где это возможно, например, #fffвместо #ffffff.
  • Всегда берите в кавычки значения атрибутов внутри селектора, например,input[type="text"]. В некоторых случаях это делать необязательно, но это является хорошей практикой для поддержки согласованности.
  • Опускайте единицы измерения при нулевом значении, например, margin: 0; вместоmargin: 0px;.

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

Объявления логически связанных свойств должны быть сгруппированы в следующем порядке:

  1. Позиционирование
  2. Блочная модель
  3. Типографика
  4. Отображение

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

Все остальные объявления, выполняющиеся внутри компонента или не оказывающие влияния на предыдущие два раздела, следуют в последнюю очередь.

Для ознакомления с полным списком свойств и их порядком обратитесь к Recess.

Не используйте @import

По сравнению с тегом <link> правило @import медленнее, создает дополнительные запросы и может вызвать иные непредвиденные проблемы. Избегайте это правило и используйте вместо него один из альтернативных подходов:

  • Используйте несколько тегов <link>
  • Компилируйте ваш CSS-код в один файл с помощью препроцессоров, например, Sass или Less
  • Склеивайте ваши CSS-файлы с помошью инструментов, которые есть в Rails, Jekyll и других окружениях

Для получения дополнительной информации следует познакомиться со статьей Стива Соудерса.

Место для media query

Помещайте media queries настолько близко к соответствующим наборам правил, насколько это возможно. Не объединяйте их в отдельную таблицу стилей. Не помещайте их в конце файла. В противном случае это приведет к тому, что media queries будут не замечены в будущем. Вот типичная структура:

Свойства с префиксами

Когда вы используете свойства с префиксами вендоров, оставляйте отступы для каждого свойства так, чтобы значения объявлений выстраивались в вертикальную линию. Это упрощает многострочное редактирование.

Правила с одиночными объявлениями

В случаях, когда набор правил включает в себя только одно объявление, рекомендуется удалить переносы строк для удобства чтения и редактирования. Любой набор правил с несколькими объявлениями должен быть разделен на отдельные строки.

Ключевым фактором здесь является обнаружение ошибок — например, валидатор CSS сообщает вам, что в строке 183 есть синтаксическая ошибка. С одиночным объявлением не возникнет сложности с исправлением. В случае с несколькими объявлениями, разделенными на строки, так же проблем не возникнет. Но если несколько объявлений будут записаны в одну строку, то вам будет сложнее понять какое именно объявление вызвало синтаксическую ошибку.

Сокращенная запись

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

  • padding
  • margin
  • font
  • background
  • border
  • border-radius

Часто нам не нужно устанавливать все значения сокращенной записи свойства. Например, HTML заголовки устанавливают только отступы сверху и снизу, таким образом, в случае необходимости нужно переопределить только эти два значения. Чрезмерное использование сокращенной записи свойств часто приводит к грязному коду с ненужными переопределения и непреднамеренными побочными эффектами.

На сайте Mozilla Developer Network есть отличная статья о сокращенной записи свойств для тех кто не знаком с такой формой записи.

Вложенность в Less и Sass

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

Комментарии

Код написан и поддерживается людьми. Убедитесь, что ваш код является описательным, хорошо прокомментирован и доступным (понятным) для других. Хорошие комментарии к коду передают контекст и цель кода, а не просто повторяют название класса или компонента.

Обязательно пишите законченные предложения для больших комментариев и короткие фразы для общих замечаний.

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

  • Записывайте имена классов строчными буквами и используйте знаки тире (а не знаки нижнего подчеркивания или camelCase). Знаки тире служат разделителями во взаимосвязанных классах (например, .btn и .btn-danger).
  • Избегайте чрезмерные и произвольные сокращения. .btn подойдет для button, но .sне означает ничего.
  • Придерживайтесь коротких и емких имен классов настолько, насколько это возможно.
  • Используйте осмысленные имена; используйте структурные или целенаправленные имена вместо презентационных.
  • Классы с префиксами должны основываться на ближайшем классе-родителе или на каком то базовом классе.
  • Используйте имена классов с префиксом .js-* для обозначения поведения (в отличие от стиля), но не используйте эти классы в вашем CSS.

Также будет полезно использовать многие из приведенных рекомендаций для имен переменных в препроцессорах Sass и Less.

Селекторы

  • Используйте имена классов место имен тегов для оптимальной производительности отображения.
  • Избегайте использования нескольких селекторов по атрибуту (например,[class^="..."]) для часто встречающихся компонентов. Это негативно повлияет на производительность браузера.
  • Используйте короткие селекторы и старайтесь ограничить количество элементов в каждом селекторе до трех.
  • Вкладывайте классы в ближайший родительский класс только в случае необходимости (например, когда не используете классы с префиксами).

Дополнительно к прочтению:

Организация кода

  • Организуйте разделы кода согласно вашим компонентам.
  • Разработайте последовательную иерархию для комментариев.
  • Отделяйте разделы кода несколькими пустыми строками. Это упростит просмотр кода в крупных файлах.
  • Когда вы используете множество CSS-файлов, разбивайте их по компонентам, а не по страницам. Страницы могут быть переработаы и компоненты перемещены с одной страницы на другую.

Настройки редактора кода

Установите в вашем редакторе следующие настройки, которые помогут избежать распространенных несогласованностей в коде и грязи:

  • Использовать мягкие отступы размером в два пробела.
  • Обрезать конечные пробелы при сохранении.
  • Кодировка файлов UTF-8.
  • Добавлять новую строку в конец файлов.

Подумайте над документированием и применением этих настроек в файле.editorconfig вашего проекта. Для примера, ознакомьтесь с файлом настроек для Bootstrap. Узнайте больше об EditorConfig.