Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
140 lines (99 sloc) 5.12 KB

Правила форматирования 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, которую нужно учесть, и желательно, на сервере.