Аббревиатуры CSS могут эффективно уменьшить размер файлов CSS.

Ключевым показателем удобства использования веб-сайта является скорость, или, точнее, то, насколько быстро страница появляется в окне браузера посетителя. Существует множество факторов, влияющих на скорость, включая скорость вашего веб-сервера, подключение к Интернету вашего посетителя и размер файла, который браузер должен загрузить. Хотя вы не можете контролировать скорость вашего сервера и соединения, вы можете контролировать размер файлов, составляющих веб-страницы вашего веб-сайта.
Чтобы сделать веб-сайты быстрее, веб-разработчики регулярно сжимают и оптимизируют каждый файл изображения на своем веб-сайте, часто жертвуя качеством изображения, чтобы уменьшить размер файла на несколько процентных пунктов. Поскольку таблицы стилей CSS представляют собой простые текстовые файлы и относительно малы по сравнению с изображениями, веб-разработчики редко рассматривают возможность уменьшения размера своих файлов таблиц стилей CSS. Однако, используя сокращения CSS и другие простые приемы, вы можете значительно уменьшить размер таблицы стилей. В ходе неформального специального теста моих собственных таблиц стилей я уменьшил размер файла примерно на 25–50%.

Использование сокращенной природы CSS

Сокращенные свойства CSS — это специальные имена свойств, которые используются для замены нескольких наборов связанных свойств. Например, свойство «padding» является сокращением от «padding-top», «padding-right», «padding-bottom» и «padding-left».

Использование сокращенных свойств позволяет сжать несколько пар свойство/атрибут в одну строку кода в таблице стилей CSS. Например, рассмотрим следующий код:


Замена его некоторыми свойствами аббревиатуры может свести код к следующему, фактический эффект от этих двух вариантов абсолютно одинаков:


Обратите внимание, что сокращенное свойство также имеет несколько свойств, каждое из которых соответствует обычному свойству, которое объединяется в сокращенное свойство. Свойства разделяются пробелами.
Если свойства имеют схожие значения, например, при линейных измерениях свойств полей, важен порядок свойств, следующих за сокращенным свойством. Порядок атрибутов начинается сверху (верхняя граница пуста) и продолжается по часовой стрелке вокруг поля.
Если все свойства свойства-аббревиатуры одинаковы, вы можете просто перечислить одно свойство и скопировать его четыре раза вперед. Следовательно, следующие два свойства равны:


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


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

Фон: вложение фона, цвет фона, фоновое изображение, положение фона, повтор фона.
Граница: цвет границы, стиль границы, ширина границы.
border-bottom (нижняя граница): цвет нижней границы, стиль нижней границы, ширина нижней границы.
border-left (левая граница): цвет левой границы, стиль левой границы, ширина левой границы.
border-right (правая граница): цвет правой границы, стиль правой границы, ширина правой границы.
border-top (верхняя граница): цвет верхней границы, стиль верхней границы, ширина верхней границы.
сигнал (звуковой сигнал): до сигнала, после сигнала
шрифт: шрифт, размер шрифта, стиль шрифта, вес шрифта, вариант шрифта, высота строки, регулировка размера шрифта, растяжение шрифта.
list-style: изображение стиля списка, позиция стиля списка, тип стиля списка
поле (пусто): верхнее поле, правое поле, нижнее поле, левое поле.
контур: цвет контура, стиль контура, ширина контура.
отступы: верхний зазор, правый зазор, нижний зазор, левый зазор
пауза: пауза после, пауза перед

Уменьшите пустое пространство

Другой способ уменьшить размер таблицы стилей CSS — удалить из документа большую часть ненужных пробелов. Другими словами, поместите каждый разрыв правила в одну строку кода, т. е. удалите символы новой строки и отступы, которые изначально были вставлены в код, чтобы разделить каждое свойство/атрибут на отдельные строки.
Например, следующие примеры кода идентичны по содержанию, но второй гораздо более усовершенствован:


удалить комментарий

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


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