email
forum

Оптимизация CSS стилей

На нашем пьедестале средств для расслабления и успокоения верстка занимает почетное второе место. На первом месте, конечно же сборка конструктора Lego. Создание сайта начинается с создания HTML разметки и CSS таблицы стилей. Сегодня мы расскажем про минимальную оптимизации CSS кода, которая значительно упростит вам жизнь, улучшит показатели Google Page Speed и отзывчивость сайта.

В идеальном мире CSS код всегда понятен, оптимизирован и минимизирован.

1. Использование Яндекс БЭМ

Для работы с CSS, мы используем методологию Яндекс БЭМ. Она очень удобна на больших сайтах с длительным сроком поддержки и доработки. БЭМ расшифровывается, как:

1
2
3
4
5
6
7
8
9
    <!--Блок-->
    <div class="space">
        <!--Элемент-->
        <div class="space__flight">
            <!--Модификаторы normal, acid-->
            <div class="space__flight_normal">Создание сайта в Москве</div>
            <div class="space__flight_acid">Доработка и поддержка сайта в Москве и СПб</div>
        </div>
    </div>

Более подробно ознакомиться с методологией можно на сайтах 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');
В фреймворке Symfony таблицы стилей тоже подключаются динамически с помощью asset-bundle
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.

грамотная оптимизация таблиц стилей и css кода

Заключение

Оптимизация CSS кода вне всякого сомнения важный вопрос для поддержки и доработки интернет магазина, сайта. Грамотно проработанная таблица стилей в будущем сэкономит вам часы и самое главное нервы. Если вам нужна доработка интернет магазина Woo Commerce или создание сайта в Москве и СПб, вы можете связаться с нами с помощью раздела «Контакты».
Запись опубликована: 18.11.2019