Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 11656
Последний выпуск: 19.06.2015

Организация CSS-файлов: Совет 1 - Флаги

Автор: Douglas Bowman
перевод: Александр Качанов
Источник: www.webmascon.com
3 мая 2005 года

Вам приходилось писать и работать с большими 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-файл на разделы, и как я решаю, какие правила в какой раздел поместить, если то или иное правило подходит и для того и для другого раздела.

Оставить комментарий

Комментарий:
можно использовать BB-коды
Максимальная длина комментария - 4000 символов.
 

Комментарии

1.
32K
19 января 2011 года
Clubberry
186 / / 19.01.2011
+0 / -1
Мне нравитсяМне не нравится
25 января 2011, 15:20:46
Это конечно хорошо, но взять к примеру сайт-визитку, в нём мало каких стилей, скриптов и вообще всякого кода. Больше потратишь время на сортировку. Я к примеру просто графический дизайнер, опыт работы уже 6 лет и я никогда за эти 6 лет не группировал слои в группы и не именовал их. Нормальный дизайнер всегда помнит где и что находится. (За исключением последнего года, я начал групиировать слои, чисто ради красоты, ведь уже в фотошопе работаю на автомате и захотелось разнообразия).

Так же и в веб-программировании, нормальный верстальщик всегда найдет всё, что ему надо + все эти организации, коментарии загружают код и браузер может долго грузить страницу, не зависимо от скорости интернета.
2.
272
26 июля 2006 года
Комаджу
850 / / 26.07.2006
Мне нравитсяМне не нравится
22 августа 2006, 10:44:49
Я использую другую модель - сначала основной блок, где описываю основные элементы страницы, а затем более мелкие разделы, где стили элементов страницы. Например:

Основной раздел:
HTML {}
BODY {}
#HEADER {}
#CONTENT {}
#FOOTER
Дополнительный раздел - HEADER:
#HEADER A {}
#HEADER P {}

Мне очень нравится. Впрочем, безусловно дело привычки.
3.
19K
29 июня 2006 года
Kiriller
1 / / 29.06.2006
Мне нравитсяМне не нравится
29 июня 2006, 00:33:10
Я в какой-то статье прочитал про другую, более простую и масштабируемую группировку. Пользуюсь ей всегда и трудностей с поиском не наблюдал...

Рецепт такой:
Сначала пишем стили для тегов, потом классов, потом идентификаторов. Кроме того, сортируем стили по алфавиту. Также очень полезно сортировать по алфавиту и описания стилей...

Например:
A {font-family:Arial; text-decoration:none;}
BODY {margin:0px;}

.copyright {}
.logo {}

#content {padding:10px;}
#header {position: absolute; top:0px; width:100%;}
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог