Как повысить скорость верстки?
Занимаюсь версткой сайтов больше года. Но никак не могу достичь желаемой скорости. Один экран лэндинга могу 3 часа делать. Препроцессоры, шаблонизаторы использую, но это не помогает. Хотелось бы услышать ваши реальные истории, как вы развивались в этом направлении. И как удалось повысить скорость верстки.
Доброго времени суток.
Для начала, хочу уточнить, что бывают такие насыщенные лендинги, что и 3 часа делать один экран - норма :) То есть понятие скорости достаточно субъективно.
И все же, что помогло конкретно мне ускорить процесс:
- Я слез с sublime и перешел на visual studio code и поставил плагин emmet. VSC - потому что когда не тормозит редактор, не тормозит и верстка. Emmet - потому что создание шаблонной страницы в 2 строчки
!
.wrapper>(h$[title=item$]{Header $}+p*3>lorem5^(ul#list$>.cool-list*3))*3
это прекрасно. Не стоит конечно заучивать все возможные комбинации, но .>^$+*# - значительно упрощают жизнь.
Хорошая шпаргалка по эммету есть тут: https://dwstroy.ru/stail/raznoe/emmet-shpargalka/
- Перестал преследовать постраничную css-разбивку типа '.page1 .btn' '.page2 .btn', т.е. в scss код выглядел так:
common.scss :
.btn {
cтили для любой кнопки
}
page1.scss :
.page1 {
шрифты и прочие общие для страницы свойства
&.btn {
свойства кнопки для этой страницы, иногда переопределяющие изначальные стили
так что приходилось либо строго следить за подключением файлов, либо использовать !important, что вообще атата
}}
Cтал любой проект, даже лендинги, разбивать на модули. В итоге на scss у меня код выглядит иногда так:
common.scss :
.btn {
cтили для любой кнопки
&.m--page1 {
что добавить\переопределить для страницы1 // переопределять плохо, по-хорошему здесь только добавление
}}
page1.scss :
.page {
шрифты и прочие общие для страницы свойства
}
.m--page1 {} // фейковый класс для реализации модульности
Преимущество видно не сразу, особенно учитывая, что в html теперь вместо
<div class="page1">
<div class="btn">
</div></div>
приходится писать
<div class="page1">
<div class="btn m--page1">
</div></div>
Но со временем привыкаешь просто ко всем модульным элементам (кнопкам, инпутам, селектам и т.д.) дописывать модульный класс и все становится на свои места. Суть этих модулей в переиспользовании кода как внутри одного проекта, так и между проектами, достаточно лишь изменить\удалить классы m--**.
Выбрал для себя идеологию названий классов и строго придерживаюсь ее на всех своих проектах. БЭМ в его первоначальном виде мне не подошел, т.к. просто лапша из кода получалась, но во многом основываюсь на нем.
Из автоматизаторов использую только gulp для написания scss вместо прямого css. Этот пункт к тому, что, возможно, Вы используете наоборот слишком много инструментов в работе и в итоге их настройка под каждый проект не окупает трудозатраты на эту самую настройку.
Перестал браться за проект, если заказчик просит резину и pixel perfect в одном. Поначалу пробовал объяснять, что это несовместимые понятия, потом забил и жизнь стала намного проще. Потихоньку замечаю тенденцию вымирания pixel perfect-проектов на рынке (да зравствует flex и, возможно, grid).
Больше всего времени у меня уходило на починку "внезапно полетевшей" верстки, так что...хабр, stackoverflow, toster, csstricks, пара своих тестовых проектов с самыми странными видами, но полностью покрывающие редко используемые свойства - наше все. Пункт скорее для тех, кому, как и мне, верстка нужна как неизбежное зло в работе front-end'ера, но может и Вам он будет полезен.
P.S. Все пункты по сути субъективны и помогли конкретно мне. Плюс возможно они противоречат Вашему восприятию мира, предпочтениям и т.д., так что сами попробуете и решите, что работает, а что нет.