Cascading Style Sheets

Источник:

Оглавление

Соответствие стандартам
Селекторы
1. Использование нескольких селекторов
Свойства
1. Упорядочивание по свойств по алфавиту
2. Использование в свойстве нескольких значений
Комментарии
Направление письма

Соответствие стандартам

Код CSS использованный в проектах должен соответствовать требованиям CSS 2.1, но допускается соответствие CSS 3.0.

Селекторы

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

.book-navigation .page-previous {
}

[к оглавлению]

Использование нескольких селекторов

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

#forum td.posts,
#forum td.topics,
#forum td.replies,
#forum td.pager {
}

[к оглавлению]

Свойства

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

#forum .description {
  color: #efefef;
  font-size: 0.9em;
  margin: 0.5em;
}

[к оглавлению]

Упорядочивание по свойств по алфавиту

Несколько свойств в одном селекторе перечисляются в алфавитном порядке.

Правильно:

body {
  background: #000;
  color: #fff;
  font-family: helvetica, sans-serif;
  font-weight: normal;
}

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

body {
  font-weight: normal;
  background: #000;
  font-family: helvetica, sans-serif;
  color: #fff;
}

[к оглавлению]

Использование в свойстве нескольких значений

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

font-family: helvetica, sans-serif;

[к оглавлению]

Файлы CSS должны использовать комментарии в соответствии с правилами CSSdoc. Комментарий идёт перед кодом, к которому он относиться. Блок/секция кода комментируется также, как в PHP.

/**
* Documentation here.
*/

Файл должен начинаться с тега CVS ID и содержать комментарии к подключаемым файлам, краткое и полное описание.

/* $Id$ */

/**
* @file
* Short description
*
* Long description
*/

Тег CVS ID вверху файла будет расширен CVS до содержанию в нём полезной информации.

/* $Id: style.css,v 1.15 2008/12/22 15:27:26 keithsmith Exp $ */

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

  background-position: 2px 2px; /* <abbr title="Left to right — слева направо, направление письма в большинстве языков">LTR</abbr> */
  padding-left: 25px; /* <abbr title="Left to right — слева направо, направление письма в большинстве языков">LTR</abbr> */

[к оглавлению]

Направление письма

Drupal поддерживает загрузку .css-файлов по условиям, которые могут переопределять правила для языков с направлением письма справа налево. В модулях, правило переопределения должно быть определено подобным названием файла: MODULE-rtl.css, например, node-rtl.css. В темах, правило переопределения должно быть определено подобным названием файла: style-rtl.css. Правила переопределения могут быть также закомментированы в стандартном файле стилей вашей темы. Из файла node-rtl.css:

#node-admin-buttons {
  clear: left;
  float: right;
  margin-left: 0;
  margin-right: 0.5em;
}

Правила node.css, которые будут переопределены, если файл загружен файл rtl.css:

#node-admin-buttons {
  clear: right; /* LTR */
  float: left; /* LTR */
  margin-left: 0.5em; /* LTR */
}

Если вы определяете свойства для языка использующего письмо справа налево, то добавляйте комментарий /* LTR */ в файл стилей вашей темы в случаях:

Когда вы используете в свойстве ключевые слова left или right, например, float: left;
Когда вы используете неравные значения для свойств margin, padding или borders, например:
margin-left: 1em; margin-right: 2em;
Когда вы определяете направление языка, например, direction: ltr;