Аккуратные таблицы каскадных стилей «Easy Neatly»

Утилита преобразования CSS для WEB-мастеров

Программа предназначена для облегчения труда WEB-мастеров, ускорения их работы и улучшения качества создаваемого CSS кода. Это так называемый "Бьютифаер" CSS Beautifier. Базовые шаблоны трансформации позволяют сжать CSS файл для выкладывания на сайт и отформатировать и аккуратно развернуть CSS файл, для редактирования.

Список возможностей трансформатора CSS «Easy Neatly»

Программа EasyNeatly
консольное приложение.
Программа интегрируется
в контекстное меню Windows™ Explorer.
Следует стандартам СSS Level 1 и CSS Level 2.
Проверьте валидность вашего CSS.
Перед трансформацией CSS
создает backup исходного файла.
Настраиваемая трансформация кода
Настраивается каждый отступ и размер букв.
Сортирует свойства селекторов
в алфавитном порядке.
Функция Квантование Цвета
Оптимально преобразует #RRGGBB в #RGB.
Семантический анализ
и группировка кода в секции.

Что делает с моим CSS ваша «Easy Neatly»?

Сначала Делает Backup что делает EasyNeatly

Исходный файл например style.css копируется в ту же директорию с новым именем style.backup(1).css, если таковой уже имеется, то с именем style.backup(2).css, потом style.backup(3).css, ну и так далее. В общем сохраняется вся история трансформаций.

Потом файл разбирается на семантические группы что делает EasyNeatly

CSS код анализируется и раскладывается по полочкам, правила (@rules) отдельно, селекторы отдельно, свойства селекторов и правил каждое хранится по отдельности и привязывается к своему хозяину - правилу или селектору.

Далее программа сверяется с входными параметрами что делает EasyNeatly

EasyNeatly смотрит какую трансформацию задали в командной строке, или выбрали через меню Windows Explorer. Зачитывает файл с настройками, где указано куда поставить пробел куда табуляцию, а куда перенос строки, куда поставить комментарий, а откуда его убрать. Что писать заглавными буквами, а что малыми, или вообще оставить в исходном состоянии.

Сборка нового CSS что делает EasyNeatly

Сверившись с настройками, EasyNeatly достает из своих ящичков правила (@rules), селекторы, параметры и начинает выкладывать из них новый красивый упорядоченный CSS, приведенный к единому стандарту оформления кода. Все палочки выглядят "попендикулярно", все селекторы сводятся к единому виду.

Нюансы - Семантические Группы что делает EasyNeatly

Семантические Группы позволяют разбивать CSS код комментариями на секции. (простые теги, ссылки, таблицы, дополнения, цвета, хаки) по определенным признакам. Хаки *, хоть и не считаются валидным CSS кодом, нормально разбираются и выделяются в отдельную секцию HACKS. Все селекторы для простых тегов без определения имени класса или ID выделяются в секцию MAIN (body, p, h1…), все ссылки с классами выделяются в секцию LINKS, вcе элементы таблиц выделяются в секцию GRIDS, все селекторы содержащие только одно из свойств - color или background-color выделяются в секцию COLORS, все селекторы содержащие только одно свойство но не цвет относятся в группу COMMON. Все оставшиеся селекторы причисляются к группе LAYOUT.

Свойства селекторов сортируются в алфавитном порядке, форматируется высота букв. Все имена свойств, преобразуются в нижний регистр.

Ньюансы - Обработка Цвета что делает EasyNeatly

Цвета в виде #RRGBB трансформируются в верхний регистр,
стандартные имена цветов Red, Green и т.п. преобразуются в нижний регистр с первой заглавной буквой.

Квантование цвета позволяет оптимально при помощи линейной аппроксимации сократить длину цвета с (7)семи символов до (4)четырех. Для Примера:

#A2BBC7 #ABC #11FF4F #1F5
#FFFEC3 #FFB #113FEF #14E
#EABC34 #EB3 #FF107E #F17
Шаблон Easy что делает EasyNeatly

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

Шаблон Neatly что делает EasyNeatly

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

Примеры кода до и после преобразований. что делает EasyNeatly (Щелкните чтобы увеличить изображения.)
Код плохо отформатированный и не упорядоченный Код отформатированный правилом --easy Код отформатированный правилом --neatly
неформатированный код После трансформации --easy После трансформации --neatly