Минимизация CSS: советы и инструменты

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

У многих людей кодовая истерия. Это не так уж и плохо.

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

Сжимать или не сжимать

Прежде чем мы обсудим, как сжимать CSS, важно отметить, что часто существует баланс между сжатием и читаемостью кода. Многие программисты гордятся четкой организацией своего CSS и не хотят, чтобы их код запускался через компрессор для удаления комментариев и разрывов строк. Как дизайнер, вы должны анализировать цели кода, который вы пишете. Если вы создаете небольшой веб-сайт, для которого требуется всего несколько строк CSS, дополнительное сжатие может не потребоваться. Аналогично, если вы пишете код, которым необходимо поделиться с открытой командой, вставка дополнительных комментариев и разрывов строк может сэкономить вашим коллегам много времени и заслужить их искреннюю благодарность. Однако, если вы разрабатываете большой веб-сайт, требующий большого количества CSS, вам обязательно стоит обратить внимание на размер файла и сделать его как можно меньшим.

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

Имея это в виду, давайте начнем с рассмотрения некоторых методов сохранения минимального размера файлов CSS.

Пустое определение стиля

Начнем с очевидного. Если у вас есть пустой стиль, откажитесь от него. Не оправдывайтесь тем, что они могут вам понадобиться позже, и вы знаете, что они грязные. Не добавляйте их, если у вас нет веской причины.

аббревиатура

Аббревиатура CSS — это способ объединить несколько строк CSS в одну строку. Выработав привычку использовать все известные вам приемы сокращения, можно значительно сократить количество строк кода, которые вы в конечном итоге пишете. Вот пример:

Длинная версия:

 #контейнер {
    отступ сверху : 5 пикселей
    отступ справа : 10 пикселей
    отступ снизу : 30 пикселей
    отступ слева : 18 пикселей
}

Сокращенная версия:

 #контейнер {
    отступы : 5 пикселей 10 пикселей 30 пикселей 18 пикселей ;
}

Чтобы узнать больше об аббревиатурах CSS, вы можете посетить следующие статьи:

CSS-спрайты

Первоначальная идея CSS-спрайтов заключалась в том, чтобы уменьшить количество HTTP-запросов и ускорить загрузку страницы. Способ, которым Sprite достигает этой цели, заключается в объединении нескольких изображений в один файл изображения, обычно изображение в формате сетки. Каждое отдельное изображение отображается путем переключения фонового положения большего изображения спрайта. Что касается CSS-кода, использование технологии спрайтов может значительно улучшить возможность повторного использования и сопровождения кода, что значительно уменьшит объем CSS-кода.

Чтобы узнать больше о CSS-спрайтах, ознакомьтесь с руководством Криса Койера по CSS-Tricks:

Конечно, Front-End Observation также содержит несколько ценных статей и советов о CSS-спрайтах .

Уменьшить количество комментариев

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

Разумный тип шрифта (семейство шрифтов)

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

До:

 #container { семейство шрифтов : Palatino , Georgia , Times , serif } ;

после:

 #container { семейство шрифтов : Палатино , с засечками }

Что касается шрифтов, я настоятельно рекомендую прочитать « Три разговора о веб-шрифтах по умолчанию », написанные Ю Бо. Несколько статей, упомянутых в статье, также заслуживают прочтения и размышления.

Использовать шестнадцатеричный цвет

Чтобы уменьшить количество байтов, все значения цветов RGB преобразуются в соответствующие им шестнадцатеричные значения. Начнем с того, что это, может быть, и не так уж много значит, но любой байт того стоит!

До:

 #container { цвет : RGB ( 131 , 100 , 219 ) } ;

после:

 #container { цвет : # 8364DB }

Удалить разрывы строк

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

До:

 #контейнер {
    поле : 5 пикселей ;
    отступы : 5 пикселей 10 пикселей 30 пикселей 18 пикселей ;
}

после:

 #container { поля : 5 пикселей ; отступ : 5 пикселей 10 пикселей 30 пикселей 18 пикселей }