Оптимизация CSS стилей
На нашем пьедестале средств для расслабления и успокоения верстка занимает почетное второе место. На первом месте, конечно же сборка конструктора Lego. Создание сайта начинается с создания HTML разметки и CSS таблицы стилей. Сегодня мы расскажем про минимальную оптимизации CSS кода, которая значительно упростит вам жизнь, улучшит показатели Google Page Speed и отзывчивость сайта.
В идеальном мире CSS код всегда понятен, оптимизирован и минимизирован.
1. Использование Яндекс БЭМ
Для работы с CSS, мы используем методологию Яндекс БЭМ. Она очень удобна на больших сайтах с длительным сроком поддержки и доработки. БЭМ расшифровывается, как:
- Блок
- Элемент
- Модификатор
1 2 3 4 5 6 7 8 9 |
Более подробно ознакомиться с методологией можно на сайтах Yandex и техническом портале habr.
2. Чистый и понятный код CSS
Необходимо соблюдать общепринятую стилистику кода, которая позволяет сделать его доступным для понимания и организованным в единое целое
1 2 3 4 5 | .header { width: 800px; height: 300px; margin-top: 20px; } |
Принцип «Чистый код и понятный код» — священен и не прикосновен, как корова у кришнаитов.
3. Сокращенные свойства CSS
Позволяют указывать несколько свойств для класса, используя одно. С их помощью можно писать краткие и удобные таблицы:
1 2 3 4 5 6 7 8 9 10 | .header { margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px; } /*Оптимизированный вариант*/ .header { margin: 10px 20px 30px 40px; } |
4. Использование SVG и FontAwesome
«Спрайты» используются для уменьшения времени загрузки страницы. Если веб страница содержит много мелких изображений: кнопки, иконки социальных сетей, значки, то загрузка большого объема мелких файлов будет занимать соответсвующее время. Снизить нагрузку на сервер и тем самым уменьшить время загрузки нужно использованием SVG/FontAwesome, что значительно сократит количество HTTP запросов, которые браузер делает к серверу. Подключение и ипользование SVG в CSS
1 2 3 4 5 6 7 8 | .logo { display: block; position: relative; width: 100px; height: 82px; background: url(outlooker.svg); background-size: 220px 120px; } |
Подключение и организация таблиц СSS
Организация хранения и доступа к таблицам CSS является важной задачей, почему-то игнорируемой большинством начинающих и трудящихся с бирж. В мелком проекте обычно 800 строк, включающих в себя классы, наследуемые классы и т.д.
Начнем с того, код должен располагаться в отдельной директории для CSS стилей и вложенным в общий каталог template:
1 2 3 4 | template/ - js/ - css/phone.css - img/ |
Таблицы стилей должны иметь минимальное возможное дублирование. Стили для создания мобильного сайта, планшета и десктопа должны находиться в разных файлах: phone.css, pad.css, desktop.css.
Если сайт — набор статических страниц, то стили подключаются в head страницы. Но сайты в виде набора страниц остались в далеком прошлом, а подключение через head по прежнему в моде. В случае создания и доработки сайта на WordPress это грубая ошибка. В WordPress таблицы стилей подключаются через function.php
1 2 3 4 5 6 7 | function phone_enqueue_styles() { wp_enqueue_style('phone-small-outlooker-style'); wp_register_style('phone-small-style', get_template_directory_uri() . '/template/css/phone-display.css'); wp_enqueue_style('phone-small-style'); } add_action('wp_enqueue_scripts', 'phone_enqueue_styles'); |
1 | <link href="{{ asset('template/css/phone.css') }}" rel="stylesheet"/> |
Своевременное удаление ненужных CSS стилей
При длительной технической поддержке интернет магазина или сайта необходимо всегда удалять неиспользуемые стили. Если этого не делать, в один прекрасный момент получится, что у вас будет больше 1000 строк наследуемой и непонятной лапши, которая написана больше полугода назад. Век маленького интернет магазина не долог и вполне может случиться так, что на основе уже имеющегося, Вас могут попросить сделать «новый».
Комментарии
Комментарии не такая хорошая практика, как описано на обущающих сайтах. При осознанном написании таблицей стилей, комментарии не очень то и нужны, за исключением описания технических нюансов:
1 2 3 | .outlooker__make_sites { font-size: 40% /* 1 em = 13px */ } |
Минификация CSS
В интернете можно найти множество инструментов для сжатия и минификации кода. Мы используем инструмент доступный в средах разработки через плагины и дополнения — YUI Compressor.
