В процесі написання CSS варто дотримуватися деяких принципів, які дозволяють скоротити код CSS, зробити його більш зручним, наочним і читабельним. Читабельність в даному випадку означає, що розробник через якийсь час може легко зрозуміти і модифікувати стиль або що в коді розбереться навіть стороння людина.
Розміщуйте каскадні таблиці стилів в окремому файлі
Розміщення стилів в окремому файлі дозволяє прискорити завантаження веб-сторінок за рахунок зменшення їх коду, а також кешування файлу з описом стилю.
Видаляйте невживані селектори
Велика кількість селекторів створює плутанину в питанні про те, хто з них за що відповідає, та й просто збільшує обсяг документа. Щоб цього не сталося, видаляйте селектори, які не використовуються на сайті. На жаль, визначити точно, який селектор використовується, а який ні, досить складно, тому додавайте коментар в код. Це допоможе хоча б не заплутатися у великому обсязі тексту.
Застосовуйте групування
Правильність і зручність групування полягає в описі однакових властивостей в одному місці. Тим самим, значення властивості пишеться тільки один раз, а не повторюється багато разів.
Використовуйте універсальні властивості
Замість того щоб вказувати значення відступу на кожній стороні елемента через властивості margin-left, margin-right, margin-top і margin-bottom, це можна одночасно задати через універсальну властивість margin . Перерахування значень через пробіл дозволяє встановити індивідуальні відступи для кожної сторони. Крім margin до універсальних властивостей відносяться background, border, font, padding . Застосування цих властивостей скорочує обсяг коду і підвищує його читабельність.
Форматування коду
Існує безліч різних підходів як же писати CSS-код. Хтось впорядковує селектори по блокам, інший відповідно до структури документа, третій за алфавітом, в загальному, скільки людей, стільки й думок. Ви можете скористатися онлайновим інструментом, який форматує CSS-код відразу чотирма різними способами. А там вже самі вирішите, який із способів вам симпатичніше.
Посилання на сайт http://www.cssportal.com/format-css/
Принцип роботи дуже простий, вводите в текстове поле свій код, натискаєте на кнопку «Format Code» і отримуєте чотири різних види первинного коду. Для прикладу візьмемо наступний невеликий фрагмент.
body {font: 0.9em Arial, Verdana, Helvetica, sans-serif; color:#000; background: #fff; margin: 0;}. top {margin-bottom: 10px; padding-left: 3%; border-bottom: 1px solid #acacac;} В результаті його форматування вийдуть такі варіанти.
Форматований CSS (Formatted CSS)
body {font: 0.9em Arial, Verdana, Helvetica, sans-serif; color:#000; background: #fff; margin: 0;}. top {margin-bottom: 10px; padding-left: 3%; border-bottom: 1px solid #acacac;} Порядок властивостей не змінюється, рядки з властивостями зсуваються вправо на чотири пробілу, селектори розділяються між собою символом нового рядка.
Властивості в алфавітному порядку (Properties in Alphabetical Order)
body {background: #fff; color:#000; font: 0.9em Arial, Verdana, Helvetica, sans-serif; margin: 0;}. top {border-bottom: 1px solid #acacac; margin-bottom: 10px; padding-left: 3%;} Рядки з властивостями зсуваються вправо на чотири пробілу, селектори розділяються між собою символом нового рядка, стильові властивості впорядковуються за алфавітом.
драбинки (Longest Property to Shortest)
body {font: 0.9em Arial, Verdana, Helvetica, sans-serif; background: #fff; color:#000; margin: 0;}. top {border-bottom: 1px solid #acacac; margin-bottom: 10px; padding-left: 3%;} Рядки з властивостями зсуваються вправо на чотири пробілу, селектори розділяються між собою символом нового рядка, рядки з властивостями упорядковуються по довжині. Спочатку йдуть найдовші рядка, в кінці найкоротші.
Компактно (Compact)
body {font: 0.9em Arial, Verdana, Helvetica, sans-serif; color:#000; background: #fff; margin: 0;}. top {margin-bottom: 10px; padding-left: 3%; border-bottom: 1px solid #acacac; } селектори і властивості записуються в один рядок, порожні рядки видаляються.
Наведений інструмент, звичайно, не претендує на повноту, в ньому не можна задати величину відступу між селекторами, кількість прогалин перед властивістю. Також не скорочуються зайві пробіли перед значеннями властивостей. Проте, головне, що процес форматування коду простий і зручний.
Мінімізація коду
Під час редагування CSS-файлу виникає суперечлива задача. З одного боку код повинен бути зручним для сприйняття і редагування, швидкого відшукання потрібного селектора, для чого активно застосовуються відбиття, коментарі, прогалини і символи табуляції. З іншого боку, обсяг коду повинен бути компактним і не містити в собі нічого зайвого. Компактність дозволяє дещо прискорити завантаження сайту і підвищити його продуктивність.
Ця суперечність вирішується наявністю двох версій CSS-файлу: один файл для редагування, а другий для завантаження на сервер. Сам же процес скорочення коду називається мінімізацією і цілком автоматизований за допомогою мережевих сервісів, які і розглянемо далі.
CSSMin
http://tools.w3clubs.com/cssmin/
Простий, навіть можна сказати, примітивний сервіс, побудований на JavaScript і бібліотеці YUI Compressor. Вводите в поле «Source» код CSS, натискаєте кнопку «Crunch» і отримуєте готовий результат в сусідньому полі. Також дається оцінка вхідного і вихідного обсягу і співвідношення у відсотках між ними (рис. 22.1).
CSS compressor
Цей сервіс зручний тим, що коментує всі свої дії, так що ви будете в курсі змін вашого стилю. Працює він у такий спосіб. В поле CSS Input вставляєте код CSS, вибираєте бажані настройки і натискаєте кнопку «Compress» (рис. 22.2).
Налаштування наступні.
- Compression Mode - режим стиснення. Різниться чотирма видами.
- Highest - все правила записуються в один рядок.
- High - кожне правило записується на своєму рядку.
- Standard - кожне властивість пишеться на окремому рядку,
- Low - кожне властивість пишеться на окремому рядку і відбивається табуляцією.
- Sort Properties - сортування стильових властивостей в алфавітному порядку.
- Compress colors - кольору виду #ffffff замінюються скороченою формою #fff.
- Compress font-weight - оптимізується насиченість шрифту. Таке значення font-weight як normal замінюється на 400, а bold на 700.
- Lowercase selectors - все селектори записуються в нижньому регістрі.
- Remove unnecessary backslashes - непотрібні слеш (\) видаляються.
- Remove unnecessary semi-colons - видалити необов'язкову крапку з комою в останньому властивості.
Після стиснення виводяться два поля: список зроблених змін у властивостях і стислий CSS (рис. 22.3).
CSS Code Formatter and Optimizer
http://www.generateit. net/css-optimize
Сервіс побудований на тому ж движку, що і попередній, тому має ряд схожих налаштувань. З приємних плюсів можна відзначити підсвічування синтаксису коду, збереження в файл, а також введення мережевої адреси CSS-файлу.
На рис. 22.4 показано вікно налаштувань.
- Preserve CSS - зберігає всі коментарі, хакі і ін. При включенні цієї настройки деякі опції стають недоступними.
- Sort Selectors (caution) - сортувати селектори в алфавітному порядку.
- Sort Properties - сортувати властивості за алфавітом.
- Regroup selectors - дозволяє перегрупувати селектори, наприклад, розділити або об'єднати їх.
- Optimize shorthands - оптимізує універсальні властивості начебто margin .
- Compress colors - кольору виду #ffffff замінюються скороченою формою #fff.
- Compress font-weight - оптимізується насиченість шрифту. Таке значення font-weight як normal замінюється на 400, а bold на 700.
- Lowercase selectors - все селектори записуються в нижньому регістрі.
- Case for properties - стильові властивості пишуться в нижньому або верхньому регістрі.
- Remove unnecessary backslashes - видалити непотрібні слеш (\).
- Remove last; - видалити необов'язкову крапку з комою в останньому властивості.
- Discard invalid properties - видалити властивості, яких немає в зазначеній специфікації.
- Add timestamp - включити в код поточну дату і час.
- Output as file - зберегти результат у вигляді файлу.
Бібліотека minify
Якщо доводиться часто вносити зміни в CSS-файл, то процес мінімізації стає незручним. Самі посудіть, спочатку треба відредагувати файл, потім його мінімізувати і отриманий код зберегти файл, який потрібно залити на сервер. Занадто багато дій доводиться здійснювати заради одного зміни. Логічніше було б покласти завдання мінімізації на сайт. Завантажили файл на сервер, і ось він уже в компактному вигляді віддається відвідувачам. Одне з таких універсальних рішень називається minify, це бібліотека на PHP5. Вона мінімізує, об'єднує і кешируєт CSS-файли, а також JavaScript.
Посилання на проект minify http://code.google.com/p/minify/
Бібліотека minify існує як окремо, так і у вигляді плагіна для WordPress.
Процес використання бібліотеки наступний. Завантажуєте архів, всередині нього лежить каталог min, який необхідно переписати на сервер. Стиснення CSS-файлу відбувається досить просто, замість звичайного шляху до стильового файлу тепер вказуємо:
http://example.ru/min/?f=themes/default/style.css
В параметрі f вказується шлях до CSS-файлу щодо кореня сайту. Два і більш файлу пишуться через кому:
http://example.ru/min/?f=themes/default/style.css,themes/default/cms.css
Також процес отримання адреси можна автоматизувати, перейшовши за адресою http://example.ru/min, відкриється сторінка, де пропонується вказати шлях до файлів, які ви бажаєте мінімізувати (рис. 22.5).
Кнопки зі стрілками вгору і вниз потрібні для зміни порядку файлів, а кнопка «x» для видалення файлу зі списку. Перевірка правильності шляху здійснюється автоматично, в разі помилки з'явиться кнопка з написом «404!», Як показано на малюнку вище. Для додавання ще одного файлу в список служить кнопка «Add file». Після того, як всі файли вказані, шляхи до них задані коректно, що підтверджується наявністю галочки навпроти кожного файлу, можна натиснути кнопку «Update». Нижче на сторінці з'явиться посилання на новий комбінований файл (текст з написом URI) і тег <link> (текст з написом HTML), який потрібно вставити собі на сторінку замість старого (рис. 22.6).
Згідно з тестами над WordPress використання бібліотеки дозволяє скоротити кількість HTTP-запитів і зменшити обсяг CSS і JavaScript-файлів до 70%.
Крім наведених методів мінімізації CSS-файлів є також рішення, що дозволяють архівувати файли утилітою gzip прямо на сервері і віддавати браузеру упаковану версію. Сучасні браузери прекрасно розуміють gzip і розпаковують його на місці. Весь процес відбувається автоматично і призводить до істотного скорочення обсягу переданих по мережі файлів. Питання настройки gzip виходять за рамки самовчителя, тому я не буду на них зупинятися. Всім зацікавленим рекомендую статті за цим посиланням.
- Модуль mod_deflate
- Стиснення відповідей Веб-сервера Apache засобами модуля mod_deflate
- Налаштування mod_gzip - стиснення трафіку в Apache