Вам доводилося писати та працювати з великими 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; /*boRDEr*/
}
Найпростіше рішення: Прапори
Вчора мені спала на думку ідея. Якщо я поставлю невеликий прапорець поруч із заголовком розділу – наприклад символ «=», який не використовується в синтаксисі імен класів (class) та ідентифікаторів (id) – я можу моментально за допомогою найпростішого текстового пошуку перейти на потрібний мені розділ. Набравши у віконці «Find» текст «= rde», я негайно потрапляю туди, куди мені треба:
/* =RDE ----------------------------------------------- */
Мінімум натисків клавіш. Ніякої плутанини з іншими схожими рядками. Символ «=» навіть не треба поміщати відразу перед заголовком розділу. У поточному проекті у мене кілька розділів «MISC». Так от, я розміщую прапор «=» перед самим унікальним словом у заголовку:
/* MISC: =Lists ----------------------------------------------- */
Завдяки цьому я швидко переходжу до розділу, де згруповані правила для списків. Для цього в пошуку треба набрати тільки «=list».
Зрозуміло ця хитрість працює тільки в тому випадку, якщо ви строго дотримуєтеся правила позначати всі свої великі CSS-файли подібним чином.
Наступна порада буде про те, як саме я розбиваю CSS-файл на розділи, і як я вирішую, які правила в який розділ помістити, якщо те або інше правило підходить і для того і для іншого розділу.
Ця стаття англійською мовою | англ.
***
Це переклад статті. Оригінал тут