Грамотный стиль CSS

2007-08-27

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

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

Далее я использовал упрощенный частичный перевод статьи: Modular CSS Майка Стенхауса и собственные размышления по теме.

У профессиональных разработчиков принято модульное строение таблицы стилей:

типографика;

формы;

навигация;

расположение;

цветовая схема.

В стилях типографики определяются тип шрифта, размер, толщина и указываются нейтральные цвета. Указание цвета в данном модуле можно рассматривать как базовый цвет, который может быть изменён в разделе цветовой схемы.

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

Выделение стилей навигации удобно для того, чтобы не создавать её стиль заново в новом проекте.

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

Цветовая схема содержит минимум свойств стилей: color, background и border-color.

Описанные модули могут находится в одном файле, а могут и в разных. Можно создать, допустим, файл screen.css и к нему подключить файлы, содержащие модули:

/* стили типографики */

@import url("typo.css");

/* стили элементов форм */

@import url("forms.css");

/* размещение */

@import url("layout.css");

/* стили навигации */

@import url("horizontal-nav.css");/* файл горизонтальной навигации*/

/* стили цветовой схемы */

@import url("skin.css");

То есть теперь при разработке проектов можно без изменения использовать файлы typo.css, forms.css, horizontal-nav.css. Файл layout.css будет менять под конкретные нужды дизайнер, а skin.css может вообще выбираться пользователем или создаваться программно в соответствии с его предпочтениями.

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

Думаю, что способ модульной разработки CSS вносит логичность в таблицы стилей и позволяет минимизировать затраты на повторную разработку. Буду использовать.