При написании достаточно объемного 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 в данном примере хотя и один, но стиль определяет для разных элементов, поэтому он различается.
