Вам доводилося писати і працювати з великими CSS-файлами? Мучилися з нескінченним скролінгом вгору-вниз в пошуках потрібної частини коду? CSS-файли, з якими я працюю, часто дуже великі. Постійно доводиться прокручувати кілька екранів вниз-вгору, щоб змінити ту чи іншу правило, або додати нове. Працюючи над поточним проектом, я вирішив скористатися маленькою хитрістю, завдяки якій я знаходжу те, що мені потрібно, практично миттєво.
Групуємо CSS-правила
Пару місяців назад в попередній статті "CSS Organization" я злегка торкнувся цієї теми. Як приклад, якщо ви коли-небудь дивилися мої CSS-файли, ви напевно помітили, що я завжди ділю файли на ключові розділи. У кожному проекті, над яким я працюю, я ділю весь CSS-код на наступні частини:
- Header (заголовок)
- Structure (структура)
- Nav (навігація)
- Search (пошук)
- Headings (заголовки)
- Lists (списки)
- Forms (форми)
- Links (посилання)
- Misc (інше)
Завдяки цьому трюку мені - або клієнту, який приймає від мене роботу - дуже легко відшукати певне правило, або розібратися, до якої частини дизайну ту чи іншу правило відноситься. Що ще більш важливо, цей метод організації дозволяє економити купу часу, коли доводиться правити код CSS, особливо, коли доводиться поправляти старі проекти, коли вже й не пам'ятаєш, що як і для чого ти там написав.
Як їх швидко відшукати?
Так як же швидко знайти правила при роботі над файлом? Деякі програми дозволяють розставляти маркери в документі, на які можна швидко перейти натисканням певної комбінації клавіш. Це прекрасно, якщо тільки ви користуєтеся такою програмою. Але у вас все одно виникнуть труднощі з кожним новим CSS-файлом, де програмні маркери ще не розставлені.
А буває ще й так, що команда "Find" взагалі вважає абсолютно не те, що вам потрібно: скажімо у вас є розділ, який ви позначили скороченням "RDE":
Найпростіше рішення: Прапори
Вчора мене осінила ідея. Якщо я поставлю невеликий прапорець поруч із заголовком розділу - наприклад символ "=", який не використовується в синтаксисі імен класів (class) і ідентифікатори (id) - я можу моментально за допомогою найпростішого текстового пошуку перейти на потрібний мені розділ. Набравши у віконці "Find" текст "= rde", я негайно потрапляю туди, куди мені треба:
Мінімум натискань клавіш. Ніякої плутанини з іншими схожими рядками. Символ "=" навіть не треба поміщати відразу перед заголовком розділу. У поточному проекті у мене кілька розділів "MISC". Так ось я розміщую прапор "=" перед самим унікальним словом в заголовку:
Завдяки цьому я швидко переходжу до розділу, де згруповані правила для списків. Для цього в пошуку треба набрати тільки "= list".
Зрозуміло ця хитрість працює тільки в тому випадку, якщо ви строго дотримуєтеся правила позначати всі свої великі CSS-файли так само.
Наступна порада буде про те, як саме я розбиваю CSS-файл на розділи, і як я вирішую, які правила в який розділ помістити, якщо те чи інше правило підходить і для того і для іншого розділу.