При написании достаточно объемного CSS-файла следует придерживаться некоторых общих рекомендаций, которые помогут избежать ошибок, сделать код понятным и удобным.

Пишите все правила для каждого селектора в одном месте

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

Пример 18.1

TD { background: olive; }
TD { color: white; }
TD { border: 1px solid black; }

Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите аргументы для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид (пример 18.2).

Пример 18.2

TD {
 background: olive;
 color: white;
 border: 1px solid black;
}

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

Имеет приоритет значение, указанное в коде ниже

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

Пример 18.3

P { color: green; }
P { color: red; }

В данном примере для селектора P цвет текста вначале устанавливается зеленым, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к параметру color.

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

Начинайте с селекторов верхнего уровня

Учитывая, что многие стилевые свойства элементов наследуются от своих родителей, начинать таблицу стилей лучше именно с селекторов, которые выступают контейнерами для других элементов. В частности, это BODY, TABLE, UL, OL и т.д. Если требуется задать гарнитуру шрифта для всего текста веб-страницы, то надо применить параметр font-family к селектору BODY, как показано в примере 18.4.

Пример 18.4

BODY {
 font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта */
 font-size: 110%; /* Размер шрифта */
}

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

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

Достоинство и удобство группирования состоит в применении набора параметров сразу к нескольким селекторам одновременно. Так, в примере 18.5 показано добавление одинаковых атрибутов для трех разных идентификаторов. Но поскольку для них требуется различный цвет фона, то он устанавливается уже ниже.

Пример 18.5

#col1, #col2, #col3 {
 font-family: Arial, Verdana, sans-serif; /* Гарнитура шрифта */
 font-size: 90%; /* Размер шрифта */
 font-weight: bold; /* Нормальное начертание */
 color: white; /* Цвет текста */
}

/* Цвет фона для каждого слоя */
#col1 { background: #ebe0c5; }
#col2 { background: #bbe1c4; }
#col3 { background: #add0d9; }

Используйте идентификаторы и классы

Классы или идентификаторы удобно использовать, когда нужно применить один стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и т.д. Если тег перед именем класса не установлен, то он может добавлять к любому тегу (пример 18.6).

Пример 18.6

.new {
 ... /* Этот стиль можно использовать с любыми тегами */
}

P.new {
 ... /* Этот стиль работает только для тега <P> */
}

Класс new в данном примере хотя и один, но стиль определяет для разных элементов, поэтому он различается.

Применяйте универсальные стилевые параметры

Универсальные параметры задают одновременно сразу несколько значений. Примеры таких свойств: border (вид границы), padding (поля вокруг элемента), margin (отступы вокруг элемента).

Так, параметр padding определяет поля одновременно для всех четырех сторон элемента. Поэтому использование padding: 10px короче и понятнее, чем последовательное добавление аргументов padding-left, padding-top, padding-right и padding-bottom, определяющих поля для каждой стороны. Через padding также можно задать разные значения сверху, справа, снизу и слева. В примере 18.7 показано использование универсального стилевого атрибута margin.

Пример 18.7

P {
 margin-top: 10px;
 margin-right: 30px;
 margin-bottom: 5px;
 margin-left: 0;
}
P {
 margin: 10px 30px 5px 0;
}

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