[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / CSS /

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

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


Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / CSS /

Font-size от xx-small до xx-large
05-01-2010   

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее

Кол. просмотров: общее - 3335 сегодня - 1

История про CSS (часть II)
05-01-2010   

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

Кол. просмотров: общее - 3334 сегодня - 1

Трюк с курсором
05-01-2010   

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее

Кол. просмотров: общее - 3176 сегодня - 0

Необычное применение CSS: реализация эффекта rollover c помощью CSS
05-01-2010   

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее

Кол. просмотров: общее - 3203 сегодня - 1

Сокращенные команды в CSS
05-01-2010   

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

Кол. просмотров: общее - 3949 сегодня - 1



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects