July 4, 2022

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

Для того, чтобы CSS легко читался, полезно соблюдать пять правил форматирования.

Каждое свойство – на отдельной строке

Так – неверно:

/*+ no-beautify */
#snapshot-box h2 { padding: 0 0 6px 0; font-weight: bold; position: absolute; left: 0; top: 0; }

Так – правильно:

/*+ no-beautify */
#snapshot-box h2 {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 0 6px 0;
  font-weight: bold;
}

Цель – лучшая читаемость, проще найти и поправить свойство.

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

Неправильно:

/*+ no-beautify */
#snapshot-box h2, #profile-box h2, #order-box h2 {
  padding: 0 0 6px 0;
  font-weight: bold;
}

Правильно:

/*+ no-beautify */
#snapshot-box h2,
#profile-box h2,
#order-box h2 {
  padding: 0 0 6px 0;
  font-weight: bold;
}

Цель – лучшая читаемость, проще найти селектор.

Свойства, сильнее влияющие на документ, идут первыми

Рекомендуется располагать свойства в следующем порядке:

  1. Сначала положение элемента относительно других: position, left/right/top/bottom, float, clear, z-index.
  2. Затем размеры и отступы: width, height, margin, padding
  3. Рамка border, она частично относится к размерам.
  4. Общее оформление содержимого: list-style-type, overflow
  5. Цветовое и стилевое оформление: background, color, font

Общая логика сортировки: «от общего – к локальному и менее важному».

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

Например:

/*+ no-beautify */
#snapshot-box h2 {
  position: absolute; /* позиционирование */
  left: 0;
  top: 0;

  padding: 0 0 6px 0; /* размеры и отступы */

  color: red;         /* стилевое оформление */
  font-weight: bold;
}

Свойство без префикса пишется последним.

Например:

-webkit-box-shadow:0 0 100px 20px #000;
box-shadow:0 0 100px 20px #000;

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

Организация CSS-файлов проекта

Стили можно разделить на две основные группы:

  1. Блоки-компоненты имеют свой CSS. Например, CSS для диалогового окна, CSS для профиля посетителя, CSS для меню.

    Такой CSS идёт «в комплекте» с модулем, его удобно выделять в отдельные файлы и подключать через @import.

    Конечно, при разработке будет много CSS-файлов, но при выкладке проекта система сборки и сжатия CSS заменит директивы @import на их содержимое, объединяя все CSS в один файл.

  2. Страничный и интегрирующий CSS.

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

    /*+ no-beautify */
    .tab .profile { /* профиль внутри вкладки */
      float: left;
      width: 300px;
      height: 200px;
    }

    Важные страничные блоки можно выделять особыми комментариями:

    /** ===========================
     *  Профиль посетителя
     *  ===========================
    */
    
    .profile {
      border: 1px solid gray;
    }
    
    .profile h2 {
      color: blue;
      font-size: 1.8em;
    }

CSS-препроцессоры, такие как SASS, LESS, Stylus, Autoprefixer (доступен как онлайн-инструмент) делают написание CSS сильно удобнее.

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

Карта учебника

Комментарии

перед тем как писать…
  • Если вам кажется, что в статье что-то не так - вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.