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

грамматика

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

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

/* 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;
}

Декларация по заказу

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

1. позиционирование
2. Box модель
3. типографский
4. визуальный

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

Другие свойства влияют только внутренние компоненты (внутри) или не влияет на атрибут первые две группы, так что на спине.

Полный список свойств и их порядок относятся к 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> элемент
• По Sass или менее как CSS препроцессора несколько файлов CSS собраны в один файл
• Рельсами, Джекил или другая система при условии, что CSS файл функции слияния

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

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

<!-- 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 Каждая строка выбора ( ^ ⌘A). В Sublime Text 2, используйте Выбор → Добавить предыдущей строки (^ ⇧ ↑ ) и выбор → Добавить следующую строку (^ ⇧ ↓ ).

/* 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;
}

Меньше и 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 {
  ...
}

имя класса

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

Sass и меньше для переменной именования также прочитать все спецификации, перечисленные выше.

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

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

селектор

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

Дальнейшее чтение:

• Классы CSS Область с префиксами
• Остановить каскад

/* 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 файла. Например: на Bootstrap в .editorconfig инстанции . Для получения дополнительной информации, пожалуйста , обратитесь к О программе EditorConfig .