CSS в HiPO

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

Разные факты

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



Bootstrap


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

Первая рабочая версия профиля пользователя
К осени у нас наконец-то появился дизайнер и мы начали рисовать сайт. Решили итеративно обновлять сайт. Страница за страницей. Тогда и начала появляться нынешняя структура фронтэнда.

Смесь нового дизайна с Bootstrap


Пре(пост?)процессор

Выбор препроцессора пал на 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. Так же пользуясь моментом порекламирую фронтэнд чат казахстанских разработчиков. Ну и обязательно Зарегиструйтесь на HiPO.

7 комментариев

talgautb
:(
jarjan
Почему грустный смайл? :(
talgautb
уже было )
jarjan
Будут еще про внутренности хайпо, в следующий раз параллельно закину всюду)
Patsifist
Не совсем понятно что обсуждать. Как на счет описать трудности, которые возникли в ходе разработки? И как вы решали эти проблемы? Было бы неплохо рассказать про проект в начале, что это и почему.
Мне не особо интересно как вы свои папки называете, и что там хранится.
jarjan
Я за открытость разработчиков в КЗ. Вот и решил начать с себя, показать над чем именно работаю, как все у меня устроено. Ну и было бы интересно узнать как у других обстоят дела.
Пост был написан на подобии других записей, про CSS в Trello, Github, Buffer, Codepen, Groupon и тд.
А на счет проекта можно узнать на самом сайте HiPO.
talgautb
правильно сделал ;)
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.