Каталог статей
Поиск по базе статей  
Статья на тему Интернет » Веб-дизайн » Организация CSS-файлов: Совет 1 - Флаги

 

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

загрузка...

 

 

Наверх


Постоянная ссылка на статью "Организация CSS-файлов: Совет 1 - Флаги":


Рассказать другу

Оценка: 4.0 (голосов: 16)

Ваша оценка:

Ваш комментарий

Имя:
Сообщение:
Защитный код: включите графику
 
 



Поиск по базе статей:





Темы статей






Новые статьи

Противовирусные препараты: за и против Добро пожаловать в Армению. Знакомство с Арменией Крыша из сэндвич панелей для индивидуального строительства Возможно ли отменить договор купли-продажи квартиры, если он был уже подписан Как выбрать блеск для губ Чего боятся мужчины Как побороть страх перед неизвестностью Газон на участке своими руками Как правильно стирать шторы Как просто бросить курить

Вместе с этой статьей обычно читают:

Организация работы бухгалтерии – советы практика

Журнал Налоговый учет для бухгалтера / Е. П. Столбов ведущий аудитор компании ООО «Эстра-Аудит» Проблемы бухгалтерии В последние годы при проведении аудиторских проверок различных организаций, в которых мне довелось участвовать, не встречалось ни одной организации, в которой бы ведение бухгалтерского и налогового учета и представляемая отчетность в полной мере соответствовали бы предъявляемым руководящими документами требованиям.

» Бухгалтерия и аудит - 5776 - читать


Советы по организации освещения кухни

В самом начале разговора об освещении кухни следует заявить категоричное "НЕТ" расположению первого попавшегося светильника в геометрическом центре потолка. Независимо от планировочной концепции кухни в общей структуре квартиры, следует очень тщательно продумывать количество и облик осветительных приборов, а также единственно верное место для каждого из них. В настоящее время среди массовых светильников достаточно трудно отыскать золотую середину: либо они чересчур декорати ...

» Обмен опытом и советы - 2141 - читать


Советы по организации освещения кухни

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

» Дизайн и интерьер - 2233 - читать


Cветильники для кухни. Советы по организации освещения на кухне

В самом начале разговора об освещении кухни следует заявить категоричное "НЕТ" расположению первого попавшегося светильника в геометрическом центре потолка. Независимо от планировочной концепции кухни в общей структуре квартиры, следует очень тщательно продумывать количество и облик осветительных приборов, а также единственно верное место для каждого из них. В настоящее время среди массовых светильников достаточно трудно отыскать золотую середину: либо они чересчур декорати ...

» Разное - 4747 - читать


Освещение интерьера. Советы по организации освещения в квартире

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

» Разное - 5108 - читать



Статья на тему Интернет » Веб-дизайн » Организация CSS-файлов: Совет 1 - Флаги

Все статьи | Разделы | Поиск | Добавить статью | Контакты

© Art.Thelib.Ru, 2006-2024, при копировании материалов, прямая индексируемая ссылка на сайт обязательна.

Энциклопедия Art.Thelib.Ru