Інструменти форматування, організації та впорядкування коду CSS

1

Від автора: Якщо ви вже супер-досвідчений веб-дизайнер, то, можливо, не зіткнетеся з цією проблемою. Ваші файли CSS виявляться зв’язно і лаконічно структурованими, кожен селектор буде дбайливо розміщений, кожне властивість ідеально відформатований… загалом, ваш CSS буде виглядати як ретельно створений твір мистецтва. Якщо це опис вам підходить, то, будь ласка, проходьте повз, цей пост не для вас.

Але якщо ви один з 99,9% веб-дизайнерів, які постійно працюють з CSS, то читайте.

Самі знаєте, як це буває – починаєте новий веб-проект з «голим» файл CSS і по мірі побудови сайту ваш CSS швидко зростає. І продовжить рости. Він стане неорганізованим, а часом заплутаним і навіть нечитабельним. Структура остаточно загубиться. Буде зроблена тьма помилок. Однак не хвилюйтеся, таке трапляється з усіма.
На цьому етапі ви можете зробити одне з двох: зупинятися на різних рівнях і переструктурувати CSS, або ж почекати закінчення роботи над сайтом і виправити всі разом. Так чи інакше, в залежності від розміру сайту це займе багато часу.

Ах, якби тільки для форматування, організації і сортування CSS був набір інструментів нам в допомогу. На щастя, він існує. Врахуйте, ці інструменти не мають «захисту від дурня». Вони нічого не знають про те унікальному стилі, який ви застосовуєте при написанні CSS, але допоможуть вам і зекономлять багато часу. Часу, який можна витратити на приведення в безлад ще одного файлу CSS!

CSS Comb – інструмент сортування властивостей CSS в певному порядку

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

csscss – аналізатор надмірності CSS

Інструменти форматування, організації та впорядкування коду CSS

csscss – той дорогоцінний камінь, який зробить аналіз будь-якого файлу CSS і скаже вам, які набори правил оголошені двічі. Щоб дізнатися, як застосовується cssscss, клацніть тут.

Helium CSS – інструмент JS для сканування сайту і показу невикористаного CSS

Helium – інструмент, що знаходить невикористаний CSS на безлічі сторінок сайту. Helium бере список url’ов різних розділів сайту, потім завантажує і піддає аналізу кожну сторінку, вибудовуючи список всіх таблиць стилів. Потім відвідує кожну сторінку зі списку url’ов і перевіряє, чи використовуються на сторінках селектори з таблиць стилів. Далі він генерує докладний звіт по кожній таблиці стилів і селекторах, які не застосовуються на даних сторінках.

CSSO –оптимізація структурні CSS файлів

Будучи, крім іншого, програмою мінімізації CSS, CSSO також здатний виконувати структурну оптимізацію файлів CSS, в результаті чого виходить набагато менший файл порівняно з іншими мінімізаторами. Він об’єднає блоки з ідентичними селекторами і властивостями, видалить скасовані властивості і подвійні селектори, частково об’єднає блоки, прибере порожні набори правил і, крім іншого, мінімізує властивості полів і відступів.

CSS Beautifier – автоматично зробить чиаемым ваш CSS

Інструменти форматування, організації та впорядкування коду CSS

CSS Beautifier – зручний інструмент, здатний взяти будь заплутаний файл CSS і зробити його легким для читання. Ось що він зробить для вас:

CSS Beautifier візьме наступний CSS…

menu{color:red} navigation{background-color:#333}

…і зробить:

menu {
color: red
}
navigation {
background-color: #333
}

CSS Lint — допомагає відшукати помилки вашого коду CSS

Інструменти форматування, організації та впорядкування коду CSS

CSS Lint – це інструмент, що допомагає визначити проблеми всередині коду CSS. Він перевіряє базовий синтаксис, а також застосовує до коду набір правил, отыскивающий проблемні шаблони або ознаки неефективності. Всі правила змінні, тому ви можете з легкістю написати свої власні або пропустити непотрібні.

Minify and GZip стискає JavaScript і CSS

Інструменти форматування, організації та впорядкування коду CSS

Devilo.us – стисніть і настройте свій CSS

Інструменти форматування, організації та впорядкування коду CSS

Заснований на CSSTidy, Devilo.us є передовим знаряддям стиснення та оптимізації CSS, також модифікованим для управління CSS3.

Альтернативні оптимізатори, засоби форматування та валідації:

ProCSSor – передовий відладчик CSS

Clean CSS – могутнє знаряддя оптимізації та форматування CSS

Онлайн-засіб стиснення JavaScript/CSS, застосовує YUI Compressor

PrimerCSS – видаляє надлишки CSS, витягуючи всі класи і id і поміщаючи їх в стартову таблицю стилів

Compressor – інструмент стиснення CSS

W3C-сервіс валідації CSS

CSS валідатор від CSS Portal