Инструменты организации и приведения в порядок кода CSS

Январь, 07th 2014Рубрика: Web-мастеринг 8542
Подписаться на комментарии по RSS

код CSS

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

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

ProCSSor - настраиваемый процессор CSS

http://procssor.com

ProCSSor - настраиваемый процессор CSS

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

ProCSSor позволяет придать вашему CSS легко читаемый, понятный и настраиваемый стиль в соответствии с вашими требованиями. ProCSSor может сжимать CSS и создавая легкую версию сайта. Есть версия программы для Mac в Apple Store, но особой нужды в ней не вижу, вот если бы она могла анализировать и выявлять неиспользуемые CSS стили на сайте... но увы. Так что онлайн-версии вполне достаточно.

CSS Compressor & Minifier

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

CSS Compressor & Minifier

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

CSS Lint - помогает обнаружить ошибки CSS кода

http://csslint.net

CSS Lint

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 на сайте я расскажу в отдельной статье. Тема очень интересная, но довольно сложная для новичков.

P.S.: чуть не забыл самый главный CSS-валидатор, что называется MUST HAVE для любого web-разработчика - http://jigsaw.w3.org/css-validator/

Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Комментариев: 1

  1. 2016-02-11 в 01:52:32 | Дима Попов

    Всем Привет, очень хорошая статья. Архитектура(модель) в CSS очень важна. Я сам использую архитектуру Atomic CSS которая в принципе выдерживает все хорошие качества и тон при написании CSS кода.

    Хотел посоветовать инструменты которые сам использую.

    1. OrnaJS - js библиотека которая расширяет возможности inline style верстки, позволяет делать события и наследование, чего так не хватает в стандартном атрибуте style.

    Круто для landing page, там где вам вовсе не нужен отдельный CSS file.

    http://ornaorg.github.io

    2. Orna4Node - крутая программа которая на основе написанных вами имен атомарный классов сама создает CSS file. С ней у вас не будет не нужных классов она все обрабатывает и чистит за вас.

    http://ornaorg.github.io/Orna4Node.html

    Хорошие ресурсы по архитектуре Atomic CSS, Yahoo одобряет:

    http://ornaorg.github.io/AtomicCSS.html

    http://acss.io

Без регистрации
ваш комментарий будет опубликован после проверки
Регистрация на сайте

На указанный адрес будет отправлено письмо с кодом активации. Вы можете настроить собственный профиль и стать активным участником или автором.