СSS (каскадні таблиці стилів) - це мова, яку використовують всі розробники в тій чи іншій мірі для того, щоб втілювати в життя свої проекти, робити їх красивими і зручними для користувача, який бачить плоди їхньої праці на екрані свого монітора.
Але що ховається за лаштунками? Так чи гарний і приємний для очей код, який ми пишемо, чи всі в ньому зрозуміло і чи можливо в ньому з легкістю розібратися людині, який раптом захоче внести в нього якісь зміни? На жаль, багато хто навіть не задаються подібними питаннями.
А тепер перейдемо до справи.
7 результативних рад з написання зручного для читання і редагування CSS-коду.
Рада 1. Виберіть, як буде виглядати ваш код і завжди дотримуйтеся цього варіанту ..
Ті, хто пише CSS, по виду написання коду в більшості своїй поділяються на дві групи:
- Перша група - це ті, хто пишуть весь код селектора в одну лінію.
Такий код більш оптимізований, важить менше, а також займає менше рядків, завдяки чому він дуже зручний в плані навігації по файлу стилів (не доводиться прокручувати величезне полотно, щоб знайти потрібний елемент коду). Але для того, щоб швидко знаходити потрібні властивості в такому варіанті, потрібно спочатку навчитися орієнтуватися в ньому.
Такий код менш оптимізований, файл, який містить код такого виду, більше важить у порівнянні з першим варіантом, але зате він більш наочний, тут знайти потрібне властивість не складе труднощів. І в той же час він не такий зручний в плані навігації по всьому файлу стилів (доводиться довго відмотувати, щоб знайти потрібну строчку).
Обидві ці групи мають рацію по-своєму. Просто пам'ятайте про те, що вам потрібно вибрати той спосіб, який подобається і буде зручний саме вам. Це найголовніше.
Порада 2. Постійність в назвах елементів.
Виробіть в собі звичку назвати одні й ті ж елементи в різних файлах стилів однаковими іменами. Це допоможе вам не заплутатися в коді і створить певний порядок у вашій голові.
Зараз поясню, що саме я маю на увазі.
Наприклад, кожен раз, коли я працюю з файлами стилів для різних проектів, для блоків з певними функціями, я даю назви відповідно їх призначенню (якщо це лівий сайдбар, то я його називаю sidebar-left. Якщо це назва для блоку з логотипом - logo і т.д.)
І зберігаю ту ж саму "термінологію" для своїх подальших робіт, щоб кожного разу не винаходити велосипед.
Порада 3. Організуйте свій код за принципом "від верху до низу".
Дуже зручно, коли код організований "від верху до низу", тобто від шапки до підвалу. Найзручніший варіант особисто для мене:
- Загальні класи (body, a, p, h1, ul, li і т.д.)
- Основні блоки сайту (структура)
- Шапка сайту
- Меню
- контент
- Сайдбар і віджети
- підвал
Таким чином, і візуально, і логічно вам буде зручніше орієнтуватися в своєму файлі стилів, ніж при хаотичному розташуванні елементів.
Рада 4. Об'єднуйте елементи за однаковими властивостями.
Часто деякі елементи в файлі стилів мають цілий ряд однакових властивостей. Замість того, щоб кілька разів прописувати один і той же код, чому б не об'єднати їх разом і не прописати для них загальні властивості?
Наприклад, для елементів, які мають один і той же колір тексту і шрифт:
А пізніше ви зможете додати вже конкретні властивості для кожного з них, виписавши їх окремо.
Рада 6. Застосовуйте знання алфавіту.
Розташовуйте властивості для кожного елемента за алфавітом.
Можливо, спочатку це буде займати у вас якийсь час, але згодом ви звикнете до цього, будете вже знати, що за чим іде, і вже без проблем знайдете потрібне властивість, якщо вам буде потрібно його відредагувати.
Рада 7. Будьте обережні.
Ще одна порада - будьте обережні, намагайтеся, щоб написаний вами код завжди виглядав рівно і красиво, щоб в ньому не було зайвих і незрозумілих відступів, або навпаки, "наїздів" одного елемента на інший. Самим буде приємно і не соромно іншим показати.
Ну ось, я поділилася деякими ідеями з вами, які допомагають особисто мені писати красивий, зручний для подальшого читання і редагування код.
Наостанок хочу сказати, що якщо ви не хочете, вам зовсім не обов'язково застосовувати на ділі все те, про що я говорю.
Просто це цінні поради, які допомогли особисто мені привести в порядок мої файли стилів і організувати моє мислення в цьому плані.
У вас може бути свій власний стандарт написання коду, і коли ви його створите, то неодмінно, ви станете більш компетентним сss-майстром, з легкістю пишуть і читає код.
Тільки не забувайте, будь ласка, і інших веб-майстрів, хто, можливо, буде мати справу з тим, що ви написали, і щоб вам не довелося червоніти за скоєне, подбайте про те, щоб ваш CSS-код був зручним для читання і редагування.