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

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

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

ProCSSor – настроюється процесор CSS

http://procssor.com

“Прекрасний CSS відладчик для прекрасних web-сайтів” (мій вільний переклад слогана procssor). Дійсно дуже гідний інструмент.

ProCSSor дозволяє додати вашому CSS легко читається, зрозумілий і настроюється стиль відповідно до ваших вимог. ProCSSor може стискати CSS і створюючи легку версію сайту. Є версія програми для Mac в Apple Store, але особливої ​​потреби в ній не бачу, ось якби вона могла аналізувати і виявляти невикористовувані CSS стилі на сайті … але на жаль. Так що онлайн-версії цілком достатньо.

CSS Compressor Minifier

http://www.minifycss.com/css-compressor/

На мій погляд, інструмент дещо поступається в налаштуваннях попереднього процесору і не знає про CSS3. Є попередні налаштування Степні стиснення підсумкового CSS. В іншому функціонал повторює можливості ProCSSor.

CSS Lint – допомагає виявити помилки CSS коду

http://csslint.net

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

Helium CSS – сканування сайту на наявність невикористаного CSS

Helium – цікавий інструмент, написаний на javascript, що дозволяє знаходити невикористовувані CSS-стилі на сайті. В першу чергу цікавий при оптимізації сайтів, які використовують різні універсальні фреймворки, наприклад широко відомий Bootstrap.

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

grunt-uncss – просунутий плагін для видалення зайвих CSS стилів на сайті

https://github.com/addyosmani/grunt-uncss

Про плагін для Grunt – uncss, який аналізує верстку і стилі і дозволяє не тільки позбутися від зайвих селекторів в CSS, але і об’єднувати і стискати javascript на сайті я розповім в окремій статті. Тема дуже цікава, але досить складна для новачків.

Якщо вважаєте статтю корисною, не лінуйтеся ставити лайки і ділитися з друзями.

Ссылка на основную публикацию