Список разделов



Поиск
введите слово для поиска
расширенный поиск




Календарь
<Октябрь 2017>
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
ГлавнаяВходРегистрацияПоследние статьиПоискКонтакты
   

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




Похожие статьи


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

2 : Организация CSS
Современные браузеры поддерживают работу множества технологий, в частности технологию оформления веб-страниц CSS (Cascading Style Sheets – каскадные таблицы стилей), необходимые для качественного оформления HTML и XHTML-документов. Организация CSS-фа...

3 : Заполняем отчетность по данным Главной книги
Номер счетаСтроки и разделы форм бухгалтерской отчетностиСтроки в Бухгалтерском балансе (форма № 1)Отчет об изменении капитала (форма № 3), Отчет о движении денежных средств (форма № 4)Приложение к бухгалтерскому балансу (форма № 5)01120Фор...

4 : Единая декларация по НДС: руководство по применению
"Нормативные акты для бухгалтера" / Эксперт «НА» Е.Н. Тарасова Многим бухгалтерам наверняка уже пришлось отчитаться по НДС на новом бланке. Форма, утвержденная приказом Минфина России от 07.11.2006 № 136н*, объединила «общую» и «нулевую...

5 : Минфин России утвердил новую форму расчета по ЕСН
"Документы и комментарии" / За I квартал 2007 года отчитаться по ЕСН нужно по новой форме. Срок подачи - не позднее 20 апреля. Принципиальных изменений в порядке расчета налога нет. Главное, что заполнить отчетность будет немного прощ...

Рейтинг: 2.9/5 (267 голосов)

Последние статьи


1: Автоматическая сверка счетов-фактур – новые возможности «1С:Бухгалтерии 8» ред. 3.0
2: Возможности CRM в 1С «Управление торговлей»
3: Настройка отчетов 1С
4: Как отразить доп. расходы в 1С?
5: Взаимозачет в 1С



Последние новости


Делец в Удмуртии на госденьги открыл нарколабораторию - УФСБ
МОСКВА, 2 ноя - РИА Новости. Следствие заподозрило жителя Удмуртии в организации нарколаборатории на полученные от государства деньги, сообщает в пятн...

Сотрудница томского вуза продавала героин около общежития

ТОМСК, 2 ноя – РИА Новости, Сергей Леваненков. Полиция задержала 58-летнюю томичку при попытке продать героин, возбуждено уголовное дело, сообщи...

Молодежную премию наноиндустрии получил автор технологии для наркоза

© РИА Новости. Сергей ПятаковМОСКВА, 1 ноя - РИА Новости. Лауреатом Российской молодежной премии в области наноиндустрии 2012 года стал заместитель ге...

Жители еще одного мексиканского города взялись за борьбу с наркомафией

МЕХИКО, 2 ноя - РИА Новости, Дмитрий Знаменский. Жители города Олинала в мексиканском штате Герреро взяли в руки оружие, чтобы противостоять попыткам ...

Бразильские студенты получали наркотики по специально вырытому туннелю

© РИА Новости. Артур ГабдрахмановМЕХИКО, 2 ноя - РИА Новости, Дмитрий Знаменский. Оригинальный способ доставки наркотиков в университет крупнейшего бр...


Послать ссылку на этот обзор другу по ICQ или E-Mail:


Разместить у себя на ресурсе или в ЖЖ:


На любом форуме в своем сообщении: