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