Оптимизация на практике

Строчные и прописные

Группировка

Для оптимизации таблиц стилей надо с умом применять группировку. Как вы уже знаете, группировка - это объединение селекторов с одинаковыми объявлениями. Однако из этого определения не вытекает достаточно неочевидное утверждение, что группировать селекторы можно только в том случае, если они содержат совершенно одинаковые объявления. Например, у нас есть такая таблица стилей:

P {
color: #000;
font: 14px Tahoma, Verdana, sans-serif}
TD {
color: #000;
font: 14px Tahoma, Verdana, sans-serif}
P {
text-indent: 2em}
BODY {
color: #000;
font: 14px Tahoma, Verdana, sans-serif}

Ее можно оптимизировать так:

P, TD, BODY {
color: #000;
font: 14px Tahoma, Verdana, sans-serif}
P {
text-indent: 2em}

Получилось очень компактно, но зато логика таблицы стилей сильно пострадала. Если вам понадобится изменить какое-либо объявление в элементе

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

Правило
Все объявления для одного и того же элемента должны находится в одном месте

Это означает, что в нашем примере мы можем объединить только селекторы на элементы, а селекторы на элемент

надо свести в один, как того требует правило:

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 {
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. #lnk a: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}

Объявление стилей на элемент содержит четыре отступа, причем все они имеют значение 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: 1px solid #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. #lnk A:link {color: #666666}
15. #lnk A:visited {color: #666666}
16. #lnk A:active {color: #ff9900}
17. #lnk a:hover {color: #ff9900}

Здесь надо только записать цвета в сокращенной форме и сгруппировать селекторы 14 и 15, а также 16 и 17:

14. #lnk A:link, #lnk A:visited {
color: #666}
15. #lnk A:active, #lnk A:hover {
color: #F90}

Вся обновленная таблица стилей будет выглядеть следующим образом:

1. A:link {
color: #000;
font-weight: bold}
2. A:visited {
color: #555;
font-weight: bold}
3. A:active, A:hover {
color: #F00;
font-weight: bold}
5. BODY {
margin: 0px;
padding: 0px}
6. CODE {
color: #00C;
font-family: "Courier new", monospace}
7. EM {
color: #000;
font-weight: bold;
font-style: normal}
8. INPUT, TEXTAREA {
border: 1px solid #000;
margin: 1px 2px}
9. P {
color: #555;
font: 12px Verdana, sans-serif;
text-align: justify}

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. #lnk A:link, #lnk A:visited {
color: #666}
15. #lnk A:active, #lnk A:hover {
color: #F90}

Как видите, таблица стилей стала значительно более структурированной и читаемой. Кроме того, первоначальная таблица весила 877 байт, а оптимизированная таблица весит 677 байт (если убрать переводы строк и лишние пробелы перед каждым объявлением). Мы смогли уменьшить вес таблицы стилей на 23%, что само по себе не так уж мало. К тому же она стала более логичной, так что теперь найти нужное объявление или селектор не составит труда. Это и есть цель данной главы - научиться создавать легкочитаемые и компактные таблицы стилей, а также оптимизировать старые, уже созданные ранее.

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