Шаблон для danneo cms — рефакторинг таблиц стилей

Сегодня занимался оптимизацией css файла дефолтного шаблона. Что было проделано:

1. Изменена структура файла.

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

2. Нижний регистр.

Возможно это покажется незначительным, но все же переписал код в нижнем регистре.

3. Упорядочивание свойств.

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

4. Сокращение кодов цвета.

Css позволяет записывать код цвета #rrggbb в сокращенном варианте #rgb. Это было использовано мною, позволив еще немного уменьшить размер файла стилей.

5. Сокращенный вариант записи.

Кроме цветов, были сокращены и другие значения свойств. Например, padding: 2px 2px; можно записать как padding: 2px; а padding: 0px; можно записать как padding: 0; Опять же, это дало небольшое сокращение размера файла.

Некоторые неточности в исходном файле:

.formtext { padding-left:10px; padding: 5px;

Здесь указывает отступ слева в 10пикселей, который затем переопределяется следующим свойством, которое задает отступ в 5пикселей со всех сторон.

border-top: 1px solid #C6C6C6;
border-right: 1px solid #C6C6C6;
border-bottom: 3px solid #C6C6C6;
border-left: 1px solid #C6C6C6;

Здесь цвет и тип рамки одинаков для всех 4 сторон, однако задается 4 раза. Толщина в 1пиксель одинакова для трех сторон. Данную запись можно сократить до записи в две строки.

background: #2D82B6 url(../images/topugol.gif) no-repeat top left;
background-color: #2D82B6;

Здесь второе свойство лишнее, так как не несет смысла, ибо дублирует часть первого свойства.

border-left-width: 120px;
border-left-style: solid;
border-left-color: #f1f1f1;

Здесь можно все значения прописать, используя лишь один параметр border-left. Экономим 2 строчки кода.

Промежуточные результаты:

temp/default/css/style.css
исходный css файл: 24 893 б
css файл после оптимизации: 16 904 б

Оба файла идентичны, не считая исправления небольших неточностей, описанных выше.

temp/default/css/simple.style.css
исходный css файл: 5 253 б
css файл после оптимизации: 3 382 б

Оба файла идентичны, не считая исправления небольших неточностей, описанных выше.