Правило
Не указывайте в таблице стилей значений, которые являются для данного элемента значениями по умолчанию.
Сокращенные формы записи
Второй способ сократить объем таблицы стилей - использование сокращенных форм записи некоторых свойств. В таблице они систематизированы.
| Сокращенная форма | Входящие свойства |
| font: italic small-caps 12px/140% Tahoma, sans-serif | font-style: italicfont-variant: small-capsfont-weight: normalfont-size: 12pxline-height: 140%font-family: Tahoma, sans-serif |
| margin: 1em 2em 0 1em | margin-top: 1emmargin-right: 2emmargin-bottom: 0emmargin-left: 1em |
| padding: 10px 20px | padding-top: 10pxpadding-right: 20pxpadding-bottom: 10pxpadding-left: 20px |
| border: 1px solid #000border-top: 1px solid #000border-right: 1px solid #000border-bottom: 1px solid #000border-left: 1px solid #000 | border-width: 1pxborder-style: solidborder-color: #000 |
| background: url("backgr.gif") #FFF repeat-x | background-color: #FFFbackground-image: url("backgr.gif")background-repeat: repeat-xbackground-attachment: scrollbackground-position: 0px 0px |
Использование сокращенных форм записи является делом весьма полезным и нужным, потому что объем таблицы стилей при этом значительно уменьшается. Это видно уже из сравнения правого и левого столбцов табл. 5.1, но чтобы окончательно вас убедить, я приведу еще один несложный пример. Пусть нам надо создать блок rule, который имеет черную рамку толщиной один пиксел и внутренние отступы величиной 10 пикселов. Ширина блока будет 300 пикселов, а текст в нем будет выводиться полужирным шрифтом Verdana размером 12 пикселов. Если не пользоваться сокращенными формами записи вообще, то код будет такой:
#rule {
font-family: Verdana, sans-serif;
font-weight: bold;
font-size: 12px;
width: 300px;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px}
Воспользуемся сокращенными формами записи, и правило для блока у нас получится такое:
#rule {
font: bold 12 px Verdana, sans-serif;
width: 300px;
border: 1px solid #000;
padding: 10px}
Первое правило занимало 290 байт, а второе всего 96. Вес уменьшился в три раза, т. е. оптимизация достигла 300%! Конечно, этот пример показывает что будет, если не использовать сокращений вообще, но тем не менее он совершенно реальный и вам частенько придется создавать очень похожие блоки, так что примите к сведению эти 300%.
Группировка
Для оптимизации таблиц стилей надо с умом применять группировку. Как вы уже знаете, группировка - это объединение селекторов с одинаковыми объявлениями. Однако из этого определения не вытекает достаточно неочевидное утверждение, что группировать селекторы можно только в том случае, если они содержат совершенно одинаковые объявления. Например, у нас есть такая таблица стилей:
P {
color: #000;
font: 14pxTahoma, Verdana, sans-serif}
TD {
color: #000;
font: 14pxTahoma, Verdana, sans-serif}
P {
text-indent: 2em}
BODY {
color: #000;
font: 14pxTahoma, Verdana, sans-serif}
Ее можно оптимизировать так:
P, TD, BODY {
color: #000;
font: 14pxTahoma, Verdana, sans-serif}
P {
text-indent: 2em}
Получилось очень компактно, но зато логика таблицы стилей сильно пострадала. Если вам понадобится изменить какое-либо объявление в элементе <P>, то в большой таблице вы его можете искать очень долго, потому что селекторы на этот элемент будут располагаться в разных местах. Запомните правило.
Правило
Все объявления для одного и того же элемента должны находится в одном месте
Это означает, что в нашем примере мы можем объединить только селекторы на элементы <BODY> и <TD>, а селекторы на элемент <P> надо свести в один, как того требует правило:
BODY, TD {
color: #000;
font: 14px Tahoma, Verdana, sans-serif}
P {
color: #000;
font: 14px Tahoma, Verdana, sans-serif;
text-indent: 2em}
Кроме того, если вы захотите, скажем, добавить в таблицу стилей фон страницы, то придется разбить группу селекторов BODY и TD, потому что стили к ним уже не будут совершенно одинаковыми. Вот нам, к примеру, понадобилось добавить фоновый цвет на элемент <BODY>. Тогда придется разбить группу, и таблица стилей будет выглядеть так:
BODY {
color: #000;
background-color: #CCC;
font: 14px Tahoma, Verdana, sans-serif}
TD {
color: #000;
font: 14px Tahoma, Verdana, sans-serif}
P {
color: #000;
font: 14px Tahoma, Verdana, sans-serif;
text-indent: 2em}
Строчные и прописные
Что касается манеры записи селекторов, то селекторы элементов я рекомендую писать заглавными буквами, тогда как все остальные - строчными. На самом деле это не играет большой роли, потому что CSS регистронезависимый язык, т. е. разницы между прописными и строчными буквами нет, поэтому все решает привычка. Объявления я тоже рекомендую писать строчными буквами, хотя это опять же дело привычки.
Вот практически все основные правила написания компактных и корректных таблиц стилей. Давайте сейчас оптимизируем отдельно взятую таблицу стилей, чтобы окончательно на практике закрепить полученные знания.
Оптимизация на практике
Исходная таблица у нас страшно неорганизованная и запутанная:
A:link {font-weight: bold; COLOR: black}
A:visited {font-weight: bold; COLOR: #555555}
A:active {font-weight: bold; COLOR: #FF0000}
A:hover {font-weight: bold; COLOR: #FF0000}
#lnk A:link {color: #666666}
#lnk A:visited {color: #666666}
#lnk A:active {color: #ff9900}
#lnk a:hover {color: #ff9900}
BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px} .imgnews {margin-right: 12px}
CODE {color: #00C; font-family: courier new}
em {font-weight: bold; font-style: normal; color: black}
.norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}
p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}
input {border: 1px solid black; margin: 1px 2px}
TEXTAREA {border: 1px solid black; margin-top: 1px; margin-left: 2px; margin-bottom: 1px; margin-letf: 2px}
.EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}
Разобраться в ней непросто. Как видите, здесь нарушены все правила, описанные в этой главе. Начнем все исправлять и упорядочивать. Прежде всего разобьем таблицу стилей на три блока по селекторам: элементы, классы, ID, а в каждом блоке расположим селекторы в алфавитном порядке. Цифры обозначают порядковый номер строки и к самой таблице стилей не относятся. Получится так:
1. A:link {font-weight: bold; COLOR: black}
2. A:visited {font-weight: bold; COLOR: #555555}
3. A:active {font-weight: bold; COLOR: #FF0000}
4. A:hover {font-weight: bold; COLOR: #FF0000}
5. BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}
6. CODE {color: #00C; font-family: courier new}
7. em {font-weight: bold; font-style: normal; color: black}
8. input {border: 1px solid black; margin: 1px 2px}
9. p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}
10. TEXTAREA {border: 1px solid black; margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-letf: 2px}
11. .EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}
12. .imgnews {margin-right: 12px}
13. .norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}
14. #lnk A:link {color: #666666}
15. #lnk A:visited {color: #666666}
16. #lnk A:active {color: #ff9900}
17. #lnka:hover {color: #ff9900}
Пойдем дальше. Для начала займемся правилами для ссылок, которые находятся в строках 1-4. Заранее договоримся, что в объявлениях стилей сначала будет идти цвет и фон, затем шрифт, затем поля и отступы. Итак:
перенесем в начало объявления цвета;
свойство COLOR запишем строчными буквами;
вместо обозначения черного цвета словом black запишем #000;
остальные значения сократим так: #555555 поменяем на #555, #FF0000 поменяем на #F00.
Получится вот что:
1. A:link {
color: #000;
font-weight: bold}
2. A:visited {
color: #555;
font-weight: bold}
3. A:active {
color: #F00;
font-weight: bold}
4. A:hover {
color: #F00;
font-weight: bold}
Заметьте, что последние два селектора имеют совершенно одинаковые объявления, так что можно смело их сгруппировать:
1. A:link {
color: #000;
font-weight: bold}
2. A:visite {
color: #555;
font-weight: bold}
3. A:active, A:hover {
color: #F00;
font-weight: bold}
Займемся строками 5-7:
5. BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}
6. CODE {color: #00C; font-family: courier new}
7. em {font-weight: bold; font-style: normal; color: black}
Объявление стилей на элемент <BODY> содержит четыре отступа, причем все они имеют значение 0, так что можно смело вместо всех четырех отступов использовать сокращенную форму записи, кроме того, надо переписать все свойства строчными буквами:
5. BODY {
margin: 0px;
padding: 0px}
В шестой строке на первый взгляд все правильно, однако в свойстве font-family указан только один шрифт. Укажем кроме него еще и шрифтовое семейство, в данном случае это monospace. Кроме того, названия шрифтов из двух и более слов рекомендуется заключать в кавычки:
6. CODE {
color: #00C;
font-family: "Сourier new", monospace}
В седьмой строке запишем название селектора em большими буквами, переместим в начало свойство color и заменим значение black на #000.
7. EM {
color: #000;
font-weight: bold;
font-style: normal}
Теперь рассмотрим строки 8-10:
8. input {border: 1px solid black; margin: 1px 2px}
9. p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}
10. TEXTAREA {border: 1px solid black; margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-letf: 2px}
Восьмая строка практически правильная, надо только переписать селектор input заглавными буквами. В строке 9 надо:
селектор p заменить на P;
перенести в конец правила свойство text-align;
переписать свойство FONT строчными буквами.
Получится так:
9. P {
color: #555;
font: 12px Verdana, sans-serif;
text-align: justify}
В десятой строке можно кое-что сократить. Заметьте, что верхнее и нижнее поля имеют значение 1 пиксел, а левое и правое - 2 пиксела. Это можно записать сокращенно с помощью объявления margin: 1px 2px. Кроме того, надо в объявлении рамок поменять значение цвета black на #000. Тогда десятая строка будет такой:
10. TEXTAREA {
border: 1pxsolid #000;
margin: 1px 2px}
А сейчас сравните исправленные строки 8 и 10. Они совершенно одинаковые, т. е. можно сгруппировать селекторы INPUT и TEXTAREA:
8. INPUT, TEXTAREA {
border: 1px solid #000;
margin: 1px 2px}
С блоком селекторов по элементам мы разобрались, так что перейдем к классам:
11. .EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}
12. .imgnews {margin-right: 12px}
13. .norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}
Здесь надо в строке 11 переписать название класса EXAMPLE и свойство BORDER строчными буквами, а также написать значение цвета в сокращенной форме. Строка 12 теперь полностью корректна. А в строке 13 надо переписать свойство FONT строчными буквами:
11. .example {
background-color: #EEE;
border: 1px dotted #000;
padding: 20px}
12. .imgnews {
margin-right: 12px}
13. .norm {
color: #555;
font: 12px Verdana, Helvetica, sans-serif}
Остался блок контекстных селекторов:
14. #lnkA:link {color: #666666}
15. #lnk A:visited {color: #666666}
16. #lnk A:active {color: #ff9900}
17. #lnka:hover {color: #ff9900}
Здесь надо только записать цвета в сокращенной форме и сгруппировать селекторы 14 и 15, а также 16 и 17: