Гигиена CSS-кодинга

Этот пост основан на статье разработчика Yahoo Store Иствана Сайпосса «How to create clean and efficient CSS» и содержит некоторые общие правила написания качественного CSS кода. Текст не является прямым переводом, а скорее изложением содержания оригинала, дополненным моими комментариями.

• Храните CSS во внешних файлах, присоединяя их к HTML документам тегами link.

  <link rel="stylesheet" type="text/css" href="/css/common.css">

  Это даст возможность браузеру сохранять такие файлы в кэше и не загружать лишний раз при переходах внутри сайта.
• Всегда стремитесь минимизировать количество отдельных CSS файлов. Когда их число возрастает, внутри стилей становится сложно найти необходимое, особенно если селекторы в одном файле наследует те, что определены в другом. Именам файлов всегда стоит задавать осмысленные имена (например, common.css и print.css будут выглядеть понятнее, чем style1.css и vasya.css). Имена директорий, в которых хранятся таблицы стилей, так же стоит определять согласно стандартизованной (пусть даже в рамках одного сайта) схеме. Например, /css/* или /themes/theme_name/css/*. Кроме того, не стоит забывать о директиве @import, как хорошем вспомогательном средстве структуризации CSS файлов. Уже на этапе проектирования файлового фреймворка для сайта нужно избавить себя от потенциальной проблемы поиска по всему дереву файлов нужной таблицы стилей.
• Практически никогда не стоит использовать inline CSS, т.е. определения стилей непосредственно внутри HTML кода с помощью атрибутов style. Во-первых, это противоречит логике (смысл применения CSS состоит в отделении стилей оформления от семантикидокумента, а не в смешивании того и другого), во-вторых, может сделать документ менее управляемым, блокируя возможность задавать стили тем или иным элементам из внешнего CSS. Встраивание CSS является приемлемым в тех случаях, когда не предполагается правка кода в дальнейшем. Например, если он генерируется програмно для отображения в каких-то конкретных условиях. Но в этом случае, опять же, соит все взвесить, чтобы не перенести проблему с путанницей в стилях на уровень генератора кода.
• Атрибуты id и class стоит использовать строго по назначению: id — для идентификации уникальных элементов, class — для объединения типовых элементов группы. С их помощью можно подчеркнуть структуру и логику построения документов. В то же время при неправильном использовании, HTML и CSS может стать более громоздским и неуправляемым.
• Не стоит многократно повторять определение одного и того же класса для группы элементов, когда его можно определить для их общего контейнера. Например, вместо

  <a class="nav" href="index.html">Home</a>
  <a class="nav" href="info.html">Info</a>
  <a class="nav" href="contents.html">Contents</a>

  гораздо логичнее сделать

  <div id="navlinks">
  <a href="index.html">Home</a>
  <a href="info.html">Info</a>
  <a href="contents.html">Contents</a>
  </div>
  

• Отражайте иерархию HTML документов в CSS файлах. Например, вначале стоит дать наиболее общее описание для тегов, далее — перейти к описанию классов, сгруппированных согласно смысловым узлам страниц (общая разметка страницы, шапка, навигационные элементы, отдельные колонки и т.д.). Благодаря хорошей структурированности стилей, их код можно сделать более лаконичным и легко воспринимаемым. Не понадобится лишний раз переопределять глобальные стили и делать аналогичные описания для разных элементов. О поддержке структурированности CSS не стоит забывать не только при первоначальной верстке, но и при дальнейшей корректировке стилей, т.к. на этом этапе так же есть хорошие шансы создать беспорядок даже в грамотно-написанном CSS.
• Не нужно лишний раз использовать !important. Очень часто его используют для исправления неполадок в частных случаях, но наличие !important само по себе может привести к дополнительным сложностям при дальнейшей работе с таким CSS. То же, кстати, относится к разнообразным хакам: если без них можно обойтись, значит без них нужно обойтись.
• Совершенно бессмысленным шагом явялется использование цепочек id (например #main #maintable #navbar). id по определению предназначен для уникальной идентификации элементов и для определения стиля всегда достаточно простого указания его имени, без дополнительного уточнения. Цепочки уместно ипсользовать в отношении элементов и классов.

Ссылки по теме

• How to create clean and efficient CSS by Istvan «RTML 101» Siposs @ Y-Times Blog

Комментарии к заметке «Гигиена CSS-кодинга»

# pepelsbey: ^{(8 января, 2008 @ 13:51)}

Всё вполне внятно, кроме: «Не создавайте слишком большого количества отдельных CSS файлов. Лучше всего, если их будет 1 или 2.»… вилами по воде. Файлов должно быть столько, сколько их нужно. И совет «1 или 2» звучит несколько странно. Лучше прозвучал бы совет «старайтесь минимизировать их количество».

Плюс не упомянута директива @import, как хорошее средство организации тех самых файлов.

# admin: ^{(8 января, 2008 @ 14:04)}

pepelsbey: Спасибо за конструктивное дополнение. По-поводу одного-двух файлов действительно был ляп (когда писал, держал в голове частный случай). Исправил.

# Алексей А. Евдокимов: ^{(28 января, 2008 @ 13:52)}

У меня есть смешное замечание про использование @import.

В любом IE c 4 по 7 присутствует неприятный баг: игнорируются 33-й и последующие импорты. То есть, можно юзать максимум 32 @import во всех подгруженных CSS-ках, остальные он пропустит. В других браузерах ограничений на количество @import-ов нету.

Описание бага с тесткейсами я запостил на MSConnect, подтвердили, обещали в восьмёрке исправить… :)

# admin: ^{(28 января, 2008 @ 15:25)}

Алексей А. Евдокимов: Спасибо за комментарий. Не знал о таком баге.

# ekim: ^{(16 октября, 2008 @ 12:13)}

32 @import – это должен быть очень большой проект:) я предпочитаю сваливать все в один css и размечать комментариями внутри, что есть что

/* header / / company */ и т.д

Написать комментарий