Cascading Style Sheets
Соответствие стандартам
Код 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 files should be remarked using CSSdoc syntax. As per PHP coding standards, block level documentation should be used as follows, to describe a section of code below the comment.
/**
* Documentation here.
*/At the top of the file a CVS ID tag and a separate file-level CSSDoc block should be included to describe the contents of the file.
/* $Id$ */
/**
* @file
* Short description
*
* Long description
*/
The CVS ID tag at the top will be exanded by the CVS to contain useful information.
/* $Id: style.css,v 1.15 2008/12/22 15:27:26 keithsmith Exp $ */Shorter inline comments may be added after a property, preceeded with a space.
background-position: 2px 2px; /* LTR */
padding-left: 25px; /* LTR */RTL
Drupal supports conditional loading of CSS files with specific override rules for right-to-left languages. For a module, the override rule should be defined in a file named MODULE-rtl.css, eg. node-rtl.css. For a theme, the override rule should be defined in a file named style-rtl.css. The rule that is overridden should be commented in the default CSS rule.
From node-rtl.css:
#node-admin-buttons {
clear: left;
float: right;
margin-left: 0;
margin-right: 0.5em;
}Rules in node.css which will be overridden if the rtl.css file is loaded:
#node-admin-buttons {
clear: right; /* LTR */
float: left; /* LTR */
margin-left: 0.5em; /* LTR */
}See also: http://drupal.org/node/132442#language-rtl. As a rule of thumb, you should consider adding a /* LTR */comment in your style
- When you use the keywords, 'left' or 'right' in a property, e.g.
float: left; - Where you use unequal margin, padding or borders on the sides of a box, e.g.
margin-left: 1em;
margin-right: 2em; - Where you specify the direction of the language, e.g.
direction: ltr;
Комментарии
Комментировать