Организация CSS-файлов: Совет 1 - Флаги
Вам приходилось писать и работать с большими CSS-файлами? Мучались с бесконечным скроллингом вверх-вниз в поисках нужной части кода? CSS-файлы, с которыми я работаю, часто весьма велики. Постоянно приходится прокручивать несколько экранов вниз-вверх, чтобы изменить то или иное правило, или добавить новое. Работая над текущим проектом, я решил воспользоваться маленькой уловкой, благодаря которой я нахожу то, что мне нужно, практически мгновенно.
Группируем CSS-правила
Пару месяцев назад в предыдущей статье "CSS Organization" я слегка коснулся этой темы. В качестве примера, если вы когда-либо смотрели мои CSS-файлы, вы наверное заметили, что я всегда делю файлы на ключевые разделы. В каждом проекте, над которым я работаю, я делю весь CSS-код на следующие части:
- Header (заголовок)
- Structure (структура)
- Nav (навигация)
- Search (поиск)
- Headings (заголовки)
- Lists (списки)
- Forms (формы)
- Links (ссылки)
- Misc (прочее)
Когда я начал изучать CSS в 2002 году перед тем, как приступить к редизайну сайта Wired News, я разработал свою собственную систему использования комментариев и дефисов, чтобы были четко видны границы каждого раздела:
/* Navigation (Навигация) ----------------------------------------------- */
Благодаря этому трюку мне - или клиенту, который принимает от меня работу - очень легко отыскать определенное правило, или разобраться, к какой части дизайна то или иное правило относится. Что еще более важно, этот метод организации позволяет экономить кучу времени, когда приходится править код CSS, особенно, когда приходится поправлять старые проекты, когда уже и не помнишь, что как и для чего ты там написал.
Как их быстро отыскать?
Так как же быстро найти правила при работе над файлом? Некоторые приложения позволяют расставлять маркеры в документе, на которые можно быстро перейти нажатием определенной комбинации клавиш. Это прекрасно, если только вы пользуетесь такой программой. Но у вас все равно возникнут затруднения с каждым новым CSS-файлом, где программные маркеры еще не расставлены.
Еще вы можете воспользоваться функцией, которой я пользуюсь много-много лет: команда "Find" есть в любом текстовом редакторе, и она всегда позволит вам быстро найти искомый текст. Однако, если ваш CSS-файл выглядит так же, как мой, простой поиск строк "nav" или "h2" будет выдавать вам несколько мест в файле. Из-за этого вам придется жать кнопку "Find Next" до тех пор, пока редактор не найдет нужное вам место в документе.
А бывает еще и так, что команда "Find" вообще находит совершенно не то, что вам нужно: скажем у вас есть раздел, который вы пометили сокращением "RDE":
/* RDE ----------------------------------------------- */
Великолепно. Теперь вы четко видите, какие правила относятся к "RDE". Но стоит вам только попытаться перейти на этот раздел с помощью команды "Find", как вы сразу же обнаружите, что текстовый редактор будет натыкаться на все строки со следующим текстом:
#nav {
float:left;
width:182px;
border-top:1px solid #911;
}
Простейшее решение: Флаги
Вчера меня осенила идея. Если я поставлю небольшой флажок рядом с заголовком раздела - например символ "=", который не используется в синтаксисе имен классов (class) и идентификаторов (id) - я могу моментально с помощью простейшего текстового поиска перейти на нужный мне раздел. Набрав в окошке "Find" текст "=rde", я немедленно попадаю туда, куда мне надо:
/* =RDE ----------------------------------------------- */
Минимум нажатий клавиш. Никакой путаницы с другими схожими строками. Символ "=" даже не надо помещать сразу перед заголовком раздела. В текущем проекте у меня несколько разделов "MISC". Так вот я помещаю флаг "=" перед самым уникальным словом в заголовке:
/* MISC: =Lists ----------------------------------------------- */
Благодаря этому я быстро перехожу к разделу, где сгруппированы правила для списков. Для этого в поиске надо набрать только "=list".
Разумеется эта хитрость работает только в том случае, если вы строго придерживаетесь правила помечать все свои большие CSS-файлы подобным образом.
Следующий совет будет о том, как именно я разбиваю CSS-файл на разделы, и как я решаю, какие правила в какой раздел поместить, если то или иное правило подходит и для того и для другого раздела.
Оставить комментарий
Комментарии
Так же и в веб-программировании, нормальный верстальщик всегда найдет всё, что ему надо + все эти организации, коментарии загружают код и браузер может долго грузить страницу, не зависимо от скорости интернета.
Основной раздел:
HTML {}
BODY {}
#HEADER {}
#CONTENT {}
#FOOTER
Дополнительный раздел - HEADER:
#HEADER A {}
#HEADER P {}
Мне очень нравится. Впрочем, безусловно дело привычки.
Рецепт такой:
Сначала пишем стили для тегов, потом классов, потом идентификаторов. Кроме того, сортируем стили по алфавиту. Также очень полезно сортировать по алфавиту и описания стилей...
Например:
A {font-family:Arial; text-decoration:none;}
BODY {margin:0px;}
.copyright {}
.logo {}
#content {padding:10px;}
#header {position: absolute; top:0px; width:100%;}