Исходный текст | через: 9 советов по уменьшению и оптимизации файлов CSS
Автор|Автор: Стефан Верворт
Перевод|Перевод: Люк
Поскольку файлы CSS загружаются в начале веб-страницы, каждый посетитель загружает эти файлы. Мы оптимизируем файлы PHP и изображения, но часто игнорируем файлы CSS. Сегодня нам следует подумать об этой проблеме и что-то с ней сделать.
Оптимизировать CSS можно с помощью оптимизаторов CSS, но я думаю, что эффективность и мощность будут улучшены, если вы напишете свой код, используя методы, упомянутые ниже.
Оптимизация файлов CSS также может сэкономить трафик и увеличить скорость загрузки страницы.
1. Комментарии Комментарии особенно полезны при написании CSS, чтобы коллеги, работающие вместе, понимали смысл кода. Существует много способов аннотирования, вы можете использовать следующие методы:
/*-------------------*/
/*-----Комментарий-------*/
/*-------------------*/
Вы также можете использовать следующий метод:
/*Комментарий*/
Это экономит 20 символов, а при наличии 15 комментариев — 300 символов.
2. Сокращенные цветовые коды Цветовые коды определяются шестнадцатеричными кодами, которые содержат 6 символов, но в некоторых случаях вместо них можно использовать 3 символа. Посмотрите на следующий пример:
div{ color: #ffffff; } /* Шорткод: color:#fff */
div{ color: #ff88ff } /* Шорткод: color:#f8f */
div{ color: #f8f7f2 } /* Короткий код невозможен */;
3. Объединить элементы. Например, если есть куча таких элементов, как h2, h3 и h4, и все они имеют одинаковые атрибуты и различаются только некоторые атрибуты, то можно написать так:
h2, h3, h4. {
дополнение: 0;
маржа: 0;
цвет: #333;
межбуквенный интервал: 0,05em;
межсловный интервал: 0,1em;
}
h2 {размер шрифта: 1.2em }
h3 {размер шрифта: 1.1em }
h4 {размер шрифта: 1em }
Это объединяет элементы с одинаковыми атрибутами, объявляя разные атрибуты размера шрифта. Можно сэкономить много места.
4. Если значение равно 0, Out Px/Em/% опускается.
0 не требует Px, Em и знака процента. Когда ваше значение равно 0 (которое, я предполагаю, вы будете использовать), отсутствие единицы измерения позволяет сэкономить вдвое больше символов.
div { дополнение: 0 пикселей 5 пикселей 5 пикселей 10 пикселей };
/* Аббревиатура: дополнение: 0 5px 5px 10px */;
5. Объединение атрибутов. Некоторые атрибуты, такие как отступы, поля и границы, можно записать отдельно. Например: отступ сверху, отступ справа, отступ снизу и отступ слева.
Если возможно, объедините их, чтобы их было легче писать и чтобы сэкономить место.
div {
отступ слева: 0 ;
отступ-верх: 50 пикселей;
отступ-дно: 23 пикселя;
отступ вправо: 4 пикселя }
/* Аббревиатура: дополнение:50px 4px 23px 0;
Если верхнее и нижнее значения одинаковы, а левое и правое значения одинаковы, вы можете написать:
div{
отступ-верх: 5 пикселей;
отступ-дно: 5 пикселей;
отступ слева: 0 ;
отступ вправо: 0 пикселей }
/* Аббревиатура: дополнение:5px 0 */
6. Выбирайте классы/идентификаторы с умом
Выбранные классы и имена идентификаторов должны быть максимально короткими, понятными и значимыми.
Избегайте выбора таких имен, как «HeaderMiddleLeftCategories», вместо этого используйте «h-cats». Это экономит много персонажей.
7. Очистите файлы CSS, чтобы сэкономить место. При создании веб-сайта с использованием CSS написанный код может работать, а может и не работать, и он занимает много места. Файлы CSS следует проверять на наличие ошибок и недопустимого кода для экономии места.
8. Удалите точку с запятой из последнего атрибута в селекторе. Это трюк, который я обнаружил с помощью компрессора CSS. Посмотрите этот пример:
тело{
фон: #ccc;
цвет: #333 }
/* Короткий код: color:#333 */Смотрите, я удалил последнюю точку с запятой. Эффект может быть неочевидным, но в сумме 50 селекторов — это 50 символов.
9. Удалите ненужные пробелы и возвраты каретки. Возможно, вы захотите удалить все пробелы и возвраты каретки, поскольку они занимают один символ. Но проблема в том, что это разрушает структуру CSS и снижает читабельность.
Обычно я не делаю этого при оптимизации CSS-файлов, потому что структура для меня важнее. Вот компромисс: используйте на сайте файлы, не содержащие символов возврата каретки и пробелов. Сохранение файлов, содержащих возвраты каретки и пробелы, локально делает редактирование очень удобным.
Заключение Если вы хотите полностью оптимизировать CSS-файлы, я рекомендую использовать CSS-компрессор, чтобы вы могли самостоятельно освоить вышеуказанные навыки и улучшить скорость и качество написания CSS-кода.
Если у вас есть другие советы, пожалуйста, оставьте сообщение.