Каскадні таблиці стилів роблять веб-сайти набагато більш зручними, тому що вони дозволяють браузерам кешувати стилі, застосовані до даного сайту, які розміщенні у файлі .css. Завдяки цьому, відразу ж відпадає необхідність у зчитуванні стилів кожен раз після завантаженням нової сторінки.

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

По-перше, знайдіть всі розгруповані записи в коді та об'єднаєте їх в один рядок. Нижче будуть наведені приклади:

Замість:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-lefmargin-left: 20px;

Варто робити так:

margin: 10px 20px 10px 20px;

Замість:

<p class="decorated">Абзац із оформленим текстом</p>
<p class="decorated">Другий абзац</p>
<p class="decorated">Третій абзац</p>
<p class="decorated">Четвертий абзац</p>

Варто робити так:

<div class="decorated">
    <p>Абзац із оформленим текстом</p>
    <p>Другий абзац</p>
    <p>Третій абзац</p>
    <p>Четвертий абзац</p>
</div>

По-друге, Ви також можете скористатися відмінним інструментом оптимізації css-файлів CleanCSS або програмами, на кшталт TopStyle. Даний інструмент об'єднає однакові селектори, видалить непотрібні властивості та пробіли з коду.

Деякі АЛЕ...

Оскільки провідне місце серед браузерів займає Internet Explorer, то можуть не спрацьовувати деякі згруповані записи.

Так, наприклад:

margin: 10px 20px 10px 20px;

може по різному сприйматися Internet Explorer, або взагалі не сприйматися.

Тому під час оптимізації CSS потрібно підходити з розумом, та тестувати сайт, як мінімум у IE6 та IE7, Opera і FireFox.

Оригінал статті: Speed Up Your Site – Optimize your CSS