Стандарты кодирования CSS в Bootstrap

Синтаксис

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

Вопросы по терминологии, используемой здесь? См. в ВикипедииCascading Style Sheets - Syntax。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

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

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

Позиционирование
Блочная модель
Типографические
Визуальные

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

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

Полный список свойств и их порядок см. вRecess。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

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

и<link>По сравнению с тегом,@importдирективы гораздо медленнее: они не только добавляют дополнительные запросы, но и вызывают непредсказуемые проблемы. Альтернативы включают:

Используйте несколько<link>элементов
Скомпилируйте несколько CSS-файлов в один файл с помощью препроцессора CSS, такого как Sass или Less.
С помощью функции объединения CSS-файлов, предоставляемой Rails, Jekyll или другими системами.

Пожалуйста, обратитесь кстатье Стива Саудерса, чтобы узнать больше.

<!-- Use link elements -->
<link rel="stylesheet" href="core.css.html">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

Размещение медиазапросов

Размещайте медиазапросы как можно ближе к связанным правилам. Не объединяйте их в одну таблицу стилей и не размещайте в нижней части документа. Если вы отделите их, в будущем о них просто забудут. Типичный пример приведен ниже.

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

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

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

В Textmate используйтеText → Edit Each Line in Selection(⌃⌘A). В Sublime Text 2 используйтеSelection → Add Previous Line(⌃⇧↑) иSelection → Add Next Line (⌃⇧↓).

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

Однострочные объявления правил

Для стилей,содержащих только одно объявление, для удобочитаемости и быстрого редактирования рекомендуется размещать объявления в одной строке. Для стилей с несколькими объявлениями объявления всё равно следует разбивать на несколько строк.

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

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

Сокращённые объявления свойств

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

padding
margin
font
background
border
border-radius

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

У MDN (Mozilla Developer Network) есть отличная статья осокращённых свойствах, которая очень полезна для пользователей, не знакомых с сокращёнными объявлениями свойств и их поведением.

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

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

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

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

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

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

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

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

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

Вы также можете обращаться к спецификациям, перечисленным выше, при именовании переменных Sass и Less.

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

Селекторы

Используйте классы для общих элементов, что полезно для оптимизации производительности рендеринга.
Для часто встречающихся компонентов избегайте селекторов атрибутов (например,[class^="..."]). На производительность браузера влияют эти факторы.
Селекторы должны быть как можно короче, и старайтесь ограничивать количество элементов, составляющих селектор; рекомендуется не превышать 3.
Толькопри необходимости следует ограничивать класс ближайшим родительским элементом (т. е. селекторами-потомками) (например, когда не используются классы с префиксами — префикс подобен пространству имён).

Дополнительные материалы:

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

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

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

/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

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

Настройте редактор следующим образом, чтобы избежать распространённых несоответствий в коде и различий:

Используйте два пробела вместо табуляции (мягкая табуляция, то есть пробелы вместо символов табуляции).
При сохранении файлов удаляйте пробельные символы в конце строк.
Установите кодировку файлов UTF-8.
Добавьте пустую строку в конце файла.

Обратитесь к документации и добавьте эти параметры конфигурации в.editorconfigфайл проекта. Например:Пример .editorconfig в Bootstrap. Для получения дополнительной информации обратитесь коб EditorConfig。

Другие расширения

Bootstrap CSS

Bootstrap Компоненты макета

Bootstrap Плагин

Bootstrap Другое

Стандарты кодирования CSS в Bootstrap

Синтаксис

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

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

Размещение медиазапросов

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

Однострочные объявления правил

Сокращённые объявления свойств

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

Комментарии

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

Селекторы

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

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

Bootstrap CSS

Bootstrap Компоненты макета

Bootstrap Плагин

Bootstrap Другое

Стандарты кодирования CSS в Bootstrap

Синтаксис

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

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

Размещение медиазапросов

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

Однострочные объявления правил

Сокращённые объявления свойств

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

Комментарии

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

Селекторы

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

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

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