CSS в HiPO

Если вы не программист/айтишник, то можете смело пропускать эту запись, так как она чисто техническая.

Всем привет! С вами Жаржан, фронтэнд разработчик HiPO. В этой записи хотел рассказать вам про CSS в HiPO.

• Вся фронтэнд команда состоит из меня :)
• Используем Gulp, Sass и несколько плагинов PostCSS;
• Стили весят где-то 20кб(сжато через gzip);
• Никаких внешних скриптов не используется(кроме аналитики и прочих метрик).

[caption id="attachment_1126" align="aligncenter" ] Первый прототип сайта[/caption]Как и в любом проекте/стартапе на начальном этапе очень важно максимально быстро реализовать рабочий прототип. Из-за этого выбор пал на Bootstrap 3. Зная, что я весь фронтэнд перепишу, никак не думал над структурой и писал как попало. Все дополнительные стили добавлял в файл dev.css. Ну и чтобы была хоть какая то индивидуальность использовал тему Flatly.

[caption id="attachment_1129" align="aligncenter" ] Первая рабочая версия профиля пользователя.[/caption]К осени у нас наконец-то появился дизайнер и мы начали рисовать сайт. Решили итеративно обновлять сайт. Страница за страницей. Тогда и начала появляться нынешняя структура фронтэнда.

[caption id="attachment_1130" align="aligncenter" ] Смесь нового дизайна с Bootstrap.[/caption]

Выбор препроцессора пал на Sass. В начале предполагал, что буду использовать связку Bourbon/Neat на полную, но разработка внесла свои корректировки. Bourbon используется в минимуме случаев, а вместо Neat своя очень простая разметка. В ближайшем будущем планирую переписать все на PostCSS, так как все что я использую - это миксины, переменные и вложения.

Для наименования использует методология BEM. Исходники лежат в папке scss.

• В blocks лежат общие блоки на сайте. Шапка, подвал и прочие общие элементы;
• В common лежит normalize.css, легаси код(остатки bootstrap), ну и файл стилей для мобильной версии;
• В mixins ясно что лежат миксины, так же и с variables. Возможно они скоро переместятся в common;
• В pages лежат стили нужные для конкретных страниц. Страница компании, вакансии, профиль пользователя и прочие;
• В vendor лежат стили jquery плагинов и Bourbon.

Для сборки используется Gulp. При разработке стили компилируются и конкатенируются, а при заливке на продакшн все это проходит через Autoprefixer и CSSO для добавки нужных вендорных префиксов и минимизации. Стили делятся на два, index.css и style.css. На главной грузится первая, а вторая на остальных страницах. Сделано это в угоду производительности, чтобы главная грузилась и рендерилась максимально быстро.

Используем стандартный CAssetManager Yii. При деплое чистится папка assets и запускается команда touch protected/assets, после Yii сам раздает пользователям новые стили и скрипты. Из-за этого отпадают все эти свистопляски с style.css?version=blah. А при разработке стили отдаются без менеджера ассетов, с выключенным кэшом браузера.

На данный момент документации нет. Но так как все по BEM, бэкендщики спокойно понимают мой код. Есть ui-kit. Надеюсь, в будущем все приведу порядок и выкачу CSS фреймворк на основе нашего дизайна.

Почти половина пользователей заходит к нам через смартфоны. Из-за этого было решено сделать хоть какую-то мобильную версию. Так как дизайна не было, пришлось мне все придумывать. Media query очень банален, для всего что ниже 800px в ширину показываем мобильную версию. Код в _mobile.scss писался пару дней, вышло около 400 строк. Думаю покамест пойдет такая версия. Ждите в будущем полноценную версию для смартфонов, а возможно и приложение.

На сайте много чего еще надо отрефакторить, полностью избавится от Bootstrap. Переписать почти весь javascript. Настроить lint кода. И конечно же оптимизировать и повышать производительность сайта. Если появились кое-какие вопросы, то пишите в комментариях, или мне на почту frontend@hipo.kz. Так же пользуясь моментом порекламирую фронтэнд чат казахстанских разработчиков.