Just

Kitich

web-design

CSS-рефакторинг

Качественная верстка веб-страницы занимает некоторое время. Итоговый макет тестируется в различных браузерах, готовый шаблон тестируется для различных страниц CMS, а таблица стилей тем временем усовершенствуется, чтобы покрыть все необходимые функции. Проще говоря, как и любой программный код, обрастает заплатками и «затычками».

И получается, что конечный «идеальный» CSS-файл обычно очень далек от идеала.

Рефакторинг

Рефакторинг — процесс изменения внутренней структуры программы, не затрагивающий её внешнего поведения и имеющий целью облегчить понимание её работы. [вики]

Я не буду писать о правилах и вашем личном стиле оформления кода, но хочу дать несколько советов, что следует сделать с CSS-кодом, чтобы потом, при необходимости, с ним было легче работать. Каждый из этих моментов, казалось бы, лежит «на поверхности», но, кажется, мы часто забываем о них на практике :)

Зачистка мусора

Сколько раз в процессе верстки вы задумывались: может стоит сделать так, а может так. Вы экспериментировали, добавляли какие-то фоны и рамки, чтобы четко видеть границы элементов. Хорошо, если все промежуточные варианты и «костыли» были удалены сразу, как только утратили свою актуальность. Если нет — самое время сделать это сейчас.

Найдите в коде и удалите все закомментированные, неиспользуемые и повторяющиеся стили. Избавьтесь от внутренних противоречий (я, например, люблю писать что-то вроде .dark { color: #000; color: #333; color: grey; } — must die).

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

Разбейте ваш CSS-файл на разделы — так легче найти необходимый селектор, когда необходимо что-то изменить. Используйте комментарии, чтобы озаглавить разделы и визуально выделить их из текстовой массы.

/*
    TITLE
*/

Я, например, использую, как минимум, следующие разделы:

  • сброс стилей;
  • стили для построения общей сетки;
  • форматирование текстов;
  • хедер;
  • футер;
  • и еще по 1 на каждую внутреннюю страницу с отдельным макетом (главная, список новостей, новость, поиск и т.д.).

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

Поиск «близнецов»

Все началось с того, что я решил поменять оттенок желтого на своем блоге. Но искомый #FB0 оказался разбросан по всему файлу аж в 24 экземплярах. Подозреваю, что не у одного меня такая проблема :)

Многие из нас верстают линейно, но стандарт CSS позволяет строить иерархии стилей. Посмотрите на сверстанный макет, найдите похожие элементы и присвойте им одинаковые стили.

Пусть

.class1 { font-family: arial; color: #AAA; }
...
h2 { font-family: arial; color: #AAA; }
...
ul.menu { font-family: arial; color: #AAA; background: #FFF; }

превратится в

.class1, h2, ul.menu { font-family: arial; color: #AAA; }
...
ul.menu { background: #FFF; }

Это позволит уменьшить объем файла и, в дальнейшем, вносить 1 изменение не в 10 стилях, а в 1.

The end

И не забывайте проверять свой CSS на валидность.

Читать еще:
Подписаться: RSS
Поделиться: в Facebook в ЖЖ в Контакт в Twitter
Оценить: Бяка :(Няка :)
  1. Я в последнее время перестал делать сброс отступов, потому что в браузерах умолчальные не так уж плохи (да и декларируются в стандартах w3c). А то как-то глупо выходит: сперва сбрасываем, а потом зато для каждого элемента отдельно прописывать. Ну и стараюсь верстать так, чтобы отличия браузеров не сильно влияли на вид страницы. То есть пусть немного плавает, +/- .

  2. 7.01.2011
    kitich #2 Ответить

    @Тормоз: В принципе, в последних версиях браузеров «умолчальные» да, ничего. Раньше это было гораздо актуальнее, а сейчас касается лишь отдельных элементов. Но с собственным сбросом работать как-то спокойнее — рендер страницы становится хоть немного, но предсказуемее.

    А про кроссбраузерность в целом можно вообще много писать. Многие привычки еще с ИЕ5 остались, но до сих пор головную боль количественно уменьшают.

  3. Ну, мы все же понимаем, что хороший резет — это и обратная совместимость, и хороший тон, и вообще, удобный инструмент для создания абсолютно идентичных на разных платформах (браузерах) макетов — вплоть до размера шрифта (хак 62.5%), не только отступов (которые, кстати, представляют проблему и сейчас — из-за box-sizing). Ну и, конечно, если делать все по правилам, то лишних отступов везде писать не надо — иначе зачем наследование вообще.

    А вот группировки, на мой вкус, зло — в хорошем редакторе и так видна разметка CSS, а блоки выделяются двумя отступами и начинаются с корневых элементов типа #header, #content — куда уж понятнее?

    Да и зачем лишние комментарии в продакшен коде? Для нагруженного проекта вообще можно использовать любой автоматический рефакторинг CSS, который заодно заменит normal на 100, соединит одинаковые правила и прочее.

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

  4. 11.01.2011
    kitich #4 Ответить

    С комментариями ИМХО гораздо удобнее работать, особенно в достаточно объемном CSS. А любой код должен быть удобочитаемым и пригоден к дальнейшей доработке.

    Как вариант, хранить 2 файла: конечный «чистый» и комментированную dev-версию — подобно java-скриптам Wordpress

rss.)))

Что это?