Оптимизация CSS: группировка правил

Эта запись открывает цикл статей, посвященных оптимизации CSS. Будут рассмотрены методы автоматической и ручной оптимизации. Я постарался собрать все разумные приемы создания компактной, удобной для чтения и модификации таблицы стилей.

Материал ориентирован на аудиторию, знакомую с принципами разделения контента и оформления страниц, сознающую преимущества такого разделения.

Данная статья – о принципах группировки правил в CSS.

Группировка правил CSS

Благодаря корпорации Microsoft и ее «шедевру» Internet Explorer 6 (божий дар для хакеров и мучение для верстальщиков), с очень высокой вероятностью, придется исправлять «ошибки» верстки. Да и просто изменять что‑либо в пределах уже сверстанного макета намного удобнее, если в процессе создания таблицы стилей автор задумывается о возможности модификации.

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

1. Комментарий с указанием используемых цветов
2. Общие элементы оформления
   • Основная гарнитура
   • Выравнивания, бордюры и пр.
3. Интерактивность элементов
4. Расположение блоков страницы
   • Хидер
   • Контент
   • Футер и пр.
5. Правила для текста и элементов форматирования контентной части
   • Заголовки
   • Прараграфы
   • Списки и пр.

Сам файл выглядит при этом примерно так:

/* COLORS:

EDFB78 - orange - background of header
B8A7E6 - blue — links
1C0CCE - blue — links: hover
[… ]
*/


 /* FOR ALL */

[сброс стандартных стилей (к примеру, вот такой)]
body {font:0.625em/1.2em serif; color:#3b3b3b}
#wrapper {overflow:hidden}
.right {text-align:right}
.center {text-align:center}
.hide {display:none}
.clean {clear:both;}
[...]


/* INTERACTIVE */

a {color:#8d8; text-decoration:none}
a:hover {color:#000}
[...]


/* BLOCKs */

/* all */
#header, #wrapper, #footer {width:980px;}
[...]

/* header */
#header {background:#fff}
#wrapper {padding:0 12px 10px 12px}
.content {float:left; width:565px; padding:0 30px 0}
.sidebar {float:left; width:350px; padding:0 6px 0}
[...]


/* CONTENT */

/* text */
h1, h2, h3, h4, h5 {color:#007cb9}
p {margin-bottom: .5em}
[...]

/* lists */
ul, ol {list-style:outside}
[...]

Данный пример выглядит несколько хаотично, ибо многоточиями заменены значительные объемы текстовых данных. В реальном CSS подобная хаотичность не просматривается.

Примечание

Секция «COLORS» нужна для быстрой замены цветов («найти и заменить» в любом текстовом редакторе).

Нюанс

Обращу Ваше внимание на секцию «CONTENT». В приведенном примере правила сгруппированы по типу тегов – заголовки и параграфы, списки, таблицы, формы и пр. описаны отдельно. Иногда, имеет смысл группировать CSS‑правила по типу самих правил. То есть отдельно друг от друга описываются отступы элементов, гарнитуры, цвета. Это уже индивидуальные особенности конкретного проекта.

Заключение

Часто, после множества модификаций, описанная структура утрачивается, но сколько же она экономит времени при исправлениях и поисках проблемных участков кода!

Добавление от 30.06.2009

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

15 мая 2008
Категория: Web–разработка
Метки: CSS, оптимизация
Комментировать ↓