CSS

Статус: черновик.

CSS

CSS синтаксис

Для отступов вместо пробелов используется семантичная табуляция. В любом редакторе кода размер можно настроить на своё усмотрение (например, размер табуляции 4).
В этом примере ∙∙∙∙ - четыре пробела, а ―――― - один отступ с табуляцией.

/* Плохо */
.heading {
  ∙∙∙∙font-size: 32px;
}

/* Хорошо */
.heading {
  ――――font-size: 32px;
}

Каждый селектор на отдельной строке.

/* Плохо */
.header,
.main,
.footer {
  margin-left: auto;
  margin-right: auto;
}

/* Хорошо */
.header,
.main,
.footer {
  margin-left: auto;
  margin-right: auto;
}

1 пробел перед {.

/* Плохо */
.heading {
  font-size: 32px;
}

/* Хорошо */
.heading {
  font-size: 32px;
}

1 перенос на новою строку перед }.

/* Плохо */
.heading {
  font-size: 32px;
}

.heading {
  font-size: 32px;
}

/* Хорошо */
.heading {
  font-size: 32px;
}

1 перенос на новую строку после } и между группами объявлений.

/* Плохо */
.heading {
  font-size: 32px;
}
.highlight {
  background-color: #f00;
}

/* Хорошо */
.heading {
  font-size: 32px;
}

.highlight {
  background-color: #f00;
}

1 пробел после :.

/* Плохо */
.heading {
  font-size: 32px;
}

/* Хорошо */
.heading {
  font-size: 32px;
}

Все объявления завершаются с ;.

/* Плохо */
.heading {
  font-size: 32px;
}

/* Хорошо */
.heading {
  font-size: 32px;
}

1 пробел после запятых в значениях свойств.

/* Плохо */
.header {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Хорошо */
.header {
  background-color: rgba(0, 0, 0, 0.5);
}

Не добавляйте начальный ноль для значений.

/* Плохо */
.transparent {
  opacity: 0.5;
}

/* Хорошо */
.transparent {
  opacity: 0.5;
}

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

/* Плохо */
.white {
  background-color: #fff;
}

/* Хорошо */
.white {
  background-color: #fff;
}

Используйте короткие 16-ичные значения.

/* Плохо */
.highlight {
  color: #ffffff;
  background-color: #0088ff;
}

/* Хорошо */
.highlight {
  color: #fff;
  background-color: #08f;
}

" для значений атрибутов внутри селектора.

/* Плохо */
input[type="text"] {
  /* ... */
}

/* Хорошо */
input[type="text"] {
  /* ... */
}

Опускайте единицы измерения при нулевом значении.

/* Плохо */
.header {
  margin-top: 0px;
}

/* Хорошо */
.header {
  margin-top: 0;
}

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

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

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

Полный список порядка свойст можно посмотреть в конфигурации CSScomb.

Небольшой пример:

.declaration-order {
  /* Позиционирование */
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  /* Расположение */
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 16px;

  /* Блочная модель */
  display: block;
  float: left;
  width: 100px;
  height: 100px;

  /* Типографика */
  font-family: "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 24px;
  text-align: center;

  /* Отображение */
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  opacity: 1;

  /* Прочее */
  transition: 0.25s ease-out;
  transform: scale(0.75);
}

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

Склеивайте CSS-файлы в один файл и минифицируйте.
Компилируйте CSS-код в один файл с помощью препроцессоров, например, Stylus, Sass или Less.

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

<!-- Используйте тег link -->
<link rel="stylesheet" href="assets/styles/main.min.css">

<!-- Избегайте @import -->
<style>
    @import url(assets/styles/main.css);
</style>

Место для media query

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

Вот типичная структура:

.element {
  /* ... */
}
.element-avatar {
  /* ... */
}
.element-selected {
  /* ... */
}

@media only screen and (min-width: 480px) {
  .element {
    /* ... */
  }
  .element-avatar {
    /* ... */
  }
  .element-selected {
    /* ... */
  }
}

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

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

/* Свойства с префиксами */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

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

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

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

/* Плохо */
.sprite {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(../images/sprite.png);
}
.sprite-home {
  background-position: 0 -20px;
}
.sprite-account {
  background-position: 0 -40px;
}

/* Хорошо */
.sprite {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(../img/sprite.png);
}

.sprite-home {
  background-position: 0 -20px;
}

.sprite-account {
  background-position: 0 -40px;
}

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

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

padding
margin
font
background
border
border-radius

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

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

/* Плохо */
.element {
  margin: 0 0 10px;
  background: red;
  background: url(../img/image.jpg);
  border-radius: 3px 3px 0 0;
}

/* Хорошо */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url(../img/image.jpg);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

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

Селекторы

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

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

Scope CSS classes with prefixes.
Stop the cascade.

/* Плохо */
span {
  /* ... */
}
a.link {
  /* ... */
}
#logo {
  /* ... */
}
.page-container #stream .stream-item .tweet .tweet-header .username {
  /* ... */
}
.user {
  /* ... */
}

/* Хорошо */
.link {
  /* ... */
}

.user {
  /* ... */
}

.user:hover .user__name {
  /* ... */
}

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

Разделите CSS-код на несколько файлов со своими состовляющими:
- Сброс стилей.
- Шрифты.
- Базовые стили.
- Общие стили:
  - Шапка.
  - Подвал.
- Блоки.
- Компоненты.
Ориентируйтесь на блоки и компоненты, а не на страницы, которые могут быть переработаны, а блоки и компоненты могут перемещаться с одной страницы на другую.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css.md

css.md

CSS

Оглавление

CSS

CSS синтаксис

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

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

Место для media query

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

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

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

Комментарии

Селекторы

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

Files

css.md

Latest commit

History

css.md

File metadata and controls

CSS

Оглавление