Статьи и справочные
материалы

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

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

Группировка стилей по смыслу

Каждый CSS-файл, созданный мной, начинается с одной и той же структуры включающей следующие группы:

• • Отмена существующих стилей – У браузеров есть стили, которые применяются по умолчанию, причем разные браузеры имеют разные стили и, соответственно, отображают по-разному. В этой секции я отменяю большинство таких стилей. Таким образом мне не приходится создавать стили для разных браузеров в отдельности.
• • Основные – Эта часть включает в себя элементы без id или классов. Здесь я назначаю стили для элементов, общих для всего сайта. Например для body, ссылок, заголовков, таблиц, списков, и т.д.
• • Шрифты – Вместо того, чтобы назначать один и тот же шрифт много раз во всем CSS, лучше собрать все в этой секции. Здесь я группирую селекторы по font-family. Например, собрав все селекторы, указывающие на элементы, которые должны отображаться шрифтом Georgia, здесь я один раз определю для всех них данный шрифт. Это уменьшает число раз, когда мне нужно использовать это обьявление, и делает изменение шрифта проще.
• • План раскладки – Если отделять стили, определяющие структуру страницы (например: колонки, фон, позиционирование элементов), отделить от стилей для более частных или маленьких областей – это в последствии намного упрощает управление CSS. Здесь я определяю только общие элементы, такие области как header, footer и content и главные обьявления, такие как display, width, margin, padding, position, background и float.
• • Содержимое – Эта часть предназначена для основной части стилей, определяющих детали веб-сайта, сгруппированных в подгруппы согласно назначению.

Чтобы легко визуально отделять одну логическую часть CSS от другой, я использую линию из, примерно, 70 символов '='. К тому же, эти разделители помогают быстрее анализировать CSS без подсветки синтаксиса.

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

Вот три уровня заголовков, которые я использую:

1.	/* Level 1
=====================================…*/
2.	/*--- Level 2 ---*/
3.	/* Levels 3, 4, 5, etc. */

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

Располагать в алфавитном порядке

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

Некоторые разработчики предпочитают группировать объявления по действию, например, указание высоты и ширины, отступов и полей, начертания и цвета… Если вам удобно – замечательно. Я считаю, что удобнее в алфавитном порядке, так как проще искать в коде нужное объявление. Если мне нужно поменять background или width, я знаю что искать нужно вверху или внизу списка соответственно.

Пишите «разборчиво»

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

Когда нужно записать одно, два или три объявления, обычно нет нужды писать каждое в отдельной строке. В одну строку будет также читабельно и сэкономит место. Но когда объявлений в правиле много, имеет смысл для каждого использовать новую строку. Этот баланс вы должны понять сами. Я предпочитаю использовать и тот и другой способ. Обычно я пишу так, чтобы строки не были в длину больше 100 символов или около того.

У каждого есть свои способы и правила организации CSS-кода. Техника, которую я описал, получилась в результате работы над многими разными сайтами, начиная от простейших, заканчивая большими и сложными. Я организую код так, чтобы любой, взглянув на него, мог сразу понять что я делал и зачем. И я имею ввиду не только своих коллег, но любого, кто хочет почерпнуть что-то новое о CSS.

Оригинал Tips for organizing your CSS
Перевод 3hrek