Организация шрифтов в CSS

У меня на сайте случилось знаменательное событие! Каждый год, когда я меняю дизайн сайта, я обычно не успеваю к самопридуманному дедлайну и делаю это только для морды и страниц блога. Всякие же /soft/, /forum/ и прочий /about/ остается "на потом". Такими темпами у меня до недавнего времени скопилось аж три разных набора стилей. И вот в прошедшие выходные я наконец разобрался с этими двухлетними хвостами. Теперь у меня все одинаково выглядит и однотипно сверстано. Также все стало гораздо проще, и я наконец удалил хаки из Джанго-кода для поддержки этого безобразия. Вау!

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

Итак, мой нынешний fonts.css выглядит так (почти полностью, без правил для раскраски синтаксиса):

/* Body fonts */

body,
th,
address,
cite {
  font: normal medium Trebuchet MS, Tahoma, sans-serif;
}

.about #text address {
  font: bold 100% Trebuchet MS, Tahoma, sans-serif;
}

small,
.blog #recentcomments .text,
.forum#article_deleted_list td,
.forum#spam_queue td,
.about #author p,
.soft #beta,
.sanestat td {
  font: normal 85% Trebuchet MS, Tahoma, sans-serif;
}

/* Header fonts */

h1 {
  font: normal 200% Georgia, serif; text-transform: uppercase;
}

h2 {
  font: normal 150% Georgia, serif; text-transform: uppercase;
} 

h3,
.blog#index h2,
.forum#index h2,
.sanestat h2,
.sanestat caption,
.usertext .strong strong,
.soft #download_link {
  font: normal 125% Georgia, serif; text-transform: uppercase;
}

h4 {
  font: normal 110% Georgia, serif; text-transform: uppercase;
}

h5,
.usertext caption,
.blog#index h3 {
  font: normal 100% Georgia, serif; text-transform: uppercase;
}

Прокомментировать я хочу две вещи.

Группировка

Про первую я когда-то тут уже писал, но вскользь, поэтому повторюсь. Как видно, я довольно нетрадиционно группирую правила: не по блокам, к которым они применяются, а по "фичам". У меня есть отдельные файлы для цветов, шрифтов, раскладки блоков и спецэффектов. В цветах, например, существует одно правило, устанавливающее цвет "#600", к которому цепляются все селекторы, к которым это цвет относится. В раскладке есть такое же одно правило, задающее верхний и нижний margin'ы в 1em, к которому прицеплено десятка два селекторов.

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

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

Шрифты

Тем не менее, то, что получилось у меня со шрифтами, мне действительно нравится. Раньше я разделял шрифтовые правила на более мелкие — размер, жирность, гарнитура. И в процессе подцепления новых элементов к существующим правилам ничто не мешало мне комбинировать любые из описанных размеров, гарнитур и жирностей. Приводило это к тому, что на сайте могло встречаться очень много разных стихийно сложившихся начертаний (6 размеров * 3 стиля * 2 гарнитуры — уже 36 %-) ).

Теперь же я в одном правиле задаю все начертание целиком. И получаю такие выгоды:

• пропадает бардак
• есть компактная карта всех шрифтов на сайте
• можно использовать вкусное компактное свойство font вместо разрозненных font-size, font-weight и т.д.

Вот, кстати, видно, что второе по счету правило про .about #text address используется всего для одного элемента на сайте, и возможно его стоит заменить на что-то более подходящее.

Ну как?