Організація CSS-файлів

CSS Organization Tip 1: Flags

Вам доводилося писати та працювати з великими CSS-файлів? Мучилися з нескінченним скролінгом вгору-вниз у пошуках потрібної частини коду? CSS-файли, з якими я працюю, часто дуже великі. Постійно доводиться прокручувати кілька екранів вниз-вгору, щоб змінити те чи інше правило, або додати нове. Працюючи над поточним проектом, я вирішив скористатися маленькою прийомом, завдяки якій я знаходжу те, що мені потрібно, практично миттєво.

Групуємо CSS-правила

Кілька місяців тому в попередній статті “CSS Organization” я злегка торкнувся цієї теми. Як приклад, якщо ви коли-небудь дивилися мої CSS-файли, Ви напевно помітили, що я завжди ділю файли на ключові розділи. У кожному проекті, над яким я працюю, я ділю весь CSS-код на наступні частини:

Коли я почав вивчати CSS в 2002 році перед тим, як приступити до редизайну сайту Wired News, я розробив свою власну систему використання коментарів і дефісів, щоб були чітко видні межі кожного розділу:

/* RDE
----------------------------------------------- */

Чудово. Тепер ви чітко бачите, які правила відносяться до "RDE". Та варто вам тільки спробувати перейти на цей розділ за допомогою команди "Find", як ви відразу ж виявите, що текстовий редактор буде натикатися на всі рядки з наступним текстом:

/* =RDE
----------------------------------------------- */

Мінімум натисків клавіш. Ніякої плутанини з іншими схожими рядками. Символ "=" навіть не треба поміщати відразу перед заголовком розділу. У поточному проекті у мене кілька розділів "MISC". Так от я розміщую прапор "=" перед самим унікальним словом у заголовку:



Схожі статті:


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

Метки: , , , , , ,
Рубрики: CSS

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*