Планування, організація та підтримка таблиць стилів CSS

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

Застосування стилів до документа

Стилі можна додавати безпосередньо в заголовок документа, розмістивши їх між дескрипторами "style". Однак це не найкращий спосіб застосування стилів до документа. Якщо знадобиться створити ще одну сторінку з цими ж стилями, на ній доведеться дублювати таблиці CSS. Якщо ж після цього буде потрібно змінити будь-який з стилів, доведеться робити це в двох місцях, а не в одному. На щастя, специфікація CSS дозволяє зберігати всі стилі в одному або декількох зовнішніх таблицях CSS. Існує два способи підключення зовнішніх таблиць стилів до Web-сторінки:

- імпорт;

- зв'язування.

<link href="/css/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
@import url( "/css/advanced.css" );
-->
</style>

Застарілі браузери не підтримують імпорт. Отже, імпорт можна використовувати для приховування витончених таблиць стилів від застарілих браузерів, які вони не зможуть зрозуміти. У попередньому прикладі з документом пов'язана проста таблиця CSS, що містить базові типографські стилі, зрозуміти які може майже будь-який браузер. Крім того, в прикладі імпортована складна таблиця CSS, що містить новітні стилі. За допомогою цього методу можна навіть створювати різний дизайн для застарілих і сучасних браузерів.

Імпортувати таблицю стилів можна не тільки в документ (X)HTML, але і в іншу таблицю стилів. Це дозволяє зв'язати прості стилі з базовою таблицею CSS, розміщеною на сторінці (X)HTML, а потім імпортувати складніші стилі в таблицю CSS.
@import( url/css/layout.css );
@import( url/css/typography.css );
@import( url/css/color.css );

Це допомагає спростити документи (X)HTML і дозволяє управляти всіма таблицями стилів в одному місці. Правила імпорту повинні бути першими в таблиці стилів, інакше вони не будуть працювати правильно. Передбачається, що імпортовані таблиці стилів розташовані перед пов'язаними, тому важливо пам'ятати, що правила, розташовані у зв'язаних таблицях, завжди будуть перевизначати імпортовані правила, а не навпаки.

Теоретично допускається імпорт однієї таблиці в іншу таблицю, яка, в свою чергу, імпортується в третю таблицю, однак таке вкладене імпортування погано підтримується деякими браузерами. Тому визначати більше двох рівнів вкладеності імпорту не рекомендується.

Мало хто в наш час використовують застарілі браузери, тому вам не потрібно особливо турбуватися про них. Ви можете відмовитися від простих пов'язаних таблиць стилів і замість цього імпортувати таблиці.

Іноді, коли сторінка завантажується, вона тимчасово виводиться без стилів (поки стилі не будуть завантажені остаточно). Це явище часто називають FOUC (Flash of Unstyled Content - мелькання нестилізованого вмісту). За допомогою елемента посилання або сценарію, розміщеного в елементі "<head>", цей ефект можна запобігти.

Коментування коду

При написанні власних таблиць стилів потрібно подбати про їх структуруваність, можливі проблеми та документуванні принципи їх роботи. Повернувшись до таблиці через деякий час, ви майже нічого не будете пам'ятати про неї. Крім того, з вашими таблицями, швидше за все, будете працювати не тільки ви, інші розробники будуть використовувати їх або навіть редагувати їх код. Отже, коментарі в коді можуть бути дуже корисними.

Додати коментарі в таблицю CSS нескладно. Коментар починається і закінчується символами "/*" і "*/" відповідно.

Коментарі можуть бути однорядкові або багаторядкові. Їх можна додати в будь-яке місце коду.

/* Стилі елементів body */
body{
font-size: 14px; /* Розмір шрифту */
}

Додавання структурних коментарів

При створенні нової таблиці ми в першу чергу додаємо у верхню частину таблиці блок коментарів, що описують призначення таблиці і повідомляють про дату створення, номер версії, автора і про те, як з ним зв'язатися.
/* -----------------------------
Базова таблиця стилів
версія таблиці : 1.1
автор : Вася Пупкін
----------------------------- */

Це дає іншим розробникам загальне уявлення про таблицю, дозволяє їм швидко побачити, чи є таблиця поточною, і надає можливість зв'язатися з автором, якщо що-небудь працює не так, як очікується.

Розбиваємо таблицю стилів на кілька частин. Починаємо з загальних правил, таких, як типографія, заголовки та гіперпосилання. Потім створюємо правила для основних розділів сторінки на основі того, як вони з'являються на екрані. Зазвичай це розділи, в яких розміщені торгова марка, головний вміст, другорядний вміст, головна і допоміжна панелі навігації, нижній колонтитул. І нарешті, ми створюємо стилі для спільних елементів, які постійно з'являються в різних місцях сайту. Зазвичай це рамки, форми, графічні кнопки. Аналогічно вступним коментарям, ми використовуємо великі стилізовані заголовки, що дозволяють легко побачити коментарі розділів.
/* Типографія
------------------------------- */

Звичайно, не все пишеться в визначені блоки природним чином. Від вас буде потрібно деяка розсудливість. Не забувайте, що, чим дрібніше ви розділите і структуруєте код, тим легше вам та іншим людям буде зрозуміти його і тим швидше ви знайдете в коді потрібні правила.

У міру збільшення довжини файлу CSS знайти в ньому потрібний стиль стає все складніше. Один із способів полегшити пошук полягає в додаванні прапорців до заголовків коментарів. Прапорець - це символ, що передує тексту заголовка. Рекомендується використовувати символ, що рідко зустрічається в файлах CSS. Запустивши процедуру пошуку і задавши прапорець як префікс перед кількома першими літерами заголовка, можна швидко знайти потрібну частину файлу.

Багато файлів CSS мають схожу структуру. Скориставшись цим, ви можете створити шаблон CSS, що містить розділи і коментарі, а потім використовувати його в різних проектах. Ще більше часу можна заощадити, додавши в шаблон кілька загальних правил, що застосовуються на багатьох сайтах. Це вже буде більше схоже не на шаблон, а на прототип файлу CSS. При використанні прототипу вам не доведеться наново "винаходити колесо" щоразу на початку роботи над новим проектом.

Нотатки для себе

Іноді для вирішення виниклої проблеми потрібно застосувати деякий спеціальний прийом. У таких випадках рекомендується задокументувати проблему і прийом в коді. Рекомендується також привести URL сайту, в якому описана проблема.

Щоб коментарі були більш зрозумілими, рекомендується використовувати спеціальні ключові слова, що позначають проблему:

- TODO (зробити) - нагадування про те, що потрібно будь-що змінити, виправити або переглянути;

- BUG (помилка) - коментар повідомляє про проблему в коді або браузері;

- KLUDGE (виверт) - коментар повідомляє про використання не зовсім законного прийому.

Ці ключові слова будуть вельми корисні на наступних етапах розробки.

Видалення коментарів і оптимізація таблиць стилів

Коментарі можуть істотно збільшити розмір файлу CSS. Отже, іноді їх потрібно видаляти. У багатьох редакторах HTML/CSS і текстових редакторах є діалогові вікна пошуку і заміни, що полегшують видалення коментарів з коду.

Керівництво по стилям

Над більшістю Web-сайтів працює більше однієї людини. На великих сайтах кілька команд розробників можуть займатися різними аспектами сайту. Програмісти, менеджери вмісту, дизайнери повинні мати інформацію про функціонування елементів коду та дизайну. Отже, керівництво по використовуваних на сайті стилям буде для них вельми корисним.

Керівництво по стилям - це документ, Web-сторінка або навіть невеликий сайт, що пояснює, як пов'язані код і візуальний дизайн сайту. Хороше керівництво по стилях має починатися з огляду структури сайта, файлової структури і угод про іменування. Воно повинно містити докладну інформацію про використані стандарти кодування, необхідні розробникам, дизайнерам і менеджерам вмісту для підтримки якості веб- ресурсу. Керівництво має інформувати про використовувані версіях (X)HTML і CSS, обраних рівнях доступності, підтримуваних браузерах і принципах кодування. Воно повинно інформувати про структуру сторінок, елементах стилю, таких, як розміри компонентів сторінок, про проміжки між колонками, про використовувану кольорову палітру і асоційованих з нею шістнадцяткових значеннях. Керівництво має також надавати розробникам докладний опис і приклади використовуваних стилів CSS. Наприклад, якщо для позначення елементів, призначених для отримання інформації від відвідувачів, використовується клас, керівництво має пояснювати, до яких елементам і як застосовується цей клас, а також як повинні виглядати елементи класу.

Керівництво по стилям - чудовий спосіб представлення проекту розробникам, відповідальним за створення або підтримку сайту. Встановивши кілька простих правил, ви полегшите управління розробкою сайту і зменшите фрагментацію стилів.

Організація таблиць стилів, що полегшує їх підтримку

Для простого Web-сайту досить одного файлу CSS. На великих і складних сайтах стилі зазвичай розподіляють по різних файлах для полегшення їх підтримки. Спосіб розподілу стилів вибирається розробником. Звичайно створюється один файл CSS для базової структури сторінки, а інший - для типографії, візуальних прикрас і т.д. При використанні такого способу, коли структура створена, повертатися до неї і змінювати щось у таблицях стилів структури доводиться досить рідко. Це захищає таблиці стилів структури від випадкових змін і руйнування.

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

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

Авторизуватися

Вперше на KovelPost? Приєднуйтесь

Корисне

Розклад руху автобусів міста Ковель

Статистика: