Как ускорить верстку сайтов

В этой статье я перечислю самые главные способы по ускорению верстки макетов без потери в качестве, что немаловажно. Ведь данный вопрос интересует всех без исключения верстальщиков. Всем хочется заработать больше денег за единицу времени. Наметим все ключевые этапы, которые приходится выполнять в процессе верстки сайта по макету. Посмотрим, что можно автоматизировать и какие инструменты существенно помогут ускорить верстку.

Анализ макета

Первое, что нужно сделать - это проанализировать макет на предмет повторяющихся его частей. Например, если это лендинг пейдж, то вы скорее всего обнаружите похожие друг на друга секции с одинаковыми заголовками. У многостраничных сайтов на всех страницах обязательно присутствует шапка и футер. Делайте наброски кода из похожих элементов на отдельной странице. После визуального осмотра макета, определите базовые переменные. Обычно в переменные заносят основные цвета, шрифты, радиусы скругления кнопок или блоков. Пройдитесь по всем секциям / страницам проекта и стилизуйте все теги от h1 до h6. Заранее определите для вашего проекта повторяющиеся участки в макете.

Подключение Bootstrap сетки

Верстка по Bootstrap сетке очень существенно ускоряет верстку. Этот CSS-фреймворк берет на себя позиционирование элементов на странице и быстро решает вопрос с адаптивностью сайта. Как правило профессиональные макеты уже рисуются веб-дизайнерами по 12-ти колоночной сетке. Что существенно облегчает жизнь верстальщиков.

Использование CSS препроцессоров

Нереально много времени уходит на прописывание CSS стилей, как говорится "от корки до корки". Однако понимание приходит примерно после верстки 10-ти макетов. Любые CSS препроцессоры (я предпочитаю Sass) являются супер эффективным инструментом по автоматизации верстки.

Экспорт изображений из макета

Если перед вами PSD макет, открытый в Photoshop, то имейте ввиду, что понятие "нарезка изображений" уже не актуально. Вместо инструмента "раскройка", следует экспортировать изображения. У других специализированных программ по работе с макетами (Figma, Adobe XD), вопрос экспорта в нужном формате, отлично налажен.

Плагин Emmet

Всегда используйте плагин Emmet при написании кода в вашем любимом редакторе. Могу без всякого преувеличения сказать, что благодаря плагину, время затрачиваемое на набор кода уменьшилось в 3-5 раз.

Использование таск-менеджера (Gulp)

Таск-менеджер автоматизирует рутинные задачи:

• оптимизирует изображения
• минимизирует CSS / JS файлы
• проставляет вендорные префиксы
• управляет файлами и папками
• подключает файлы библиотек, плагинов

Применение jQuery

Я придерживаюсь мнения, что для решения типичных рутинных задач в процессе верстки (табы, карусели, аккордеоны, модальные окна, различные анимации), вполне подходят готовые библиотеки и плагины на jQuery. Для маленьких и средних проектов не стоит писать свои скрипты на нативном JS. Это долго и неэффективно.

CSS генераторы кода

В особых случаях, при написании редких или слишком "замороченных" CSS правил, получается быстрее воспользоваться онлайн-генераторами. Я с большим удовольствием использую некоторые из них. Здесь небольшой список моих помощников:

• Google Webfonts Helper - https://google-webfonts-helper.herokuapp.com/fonts
• Генератор треугольников на CSS - http://apps.eky.hk/css-triangle-generator
• Фигуры необычной формы - https://9elements.github.io/fancy-border-radius
• Генератор префиксов - https://autoprefixer.github.io/ru
• Генератор теней - https://www.cssmatic.com/box-shadow
• Генератор градиентов - https://www.colorzilla.com/gradient-editor/

Умение быстро и правильно верстать сайты - это профессия, овладев которой можно неплохо заработать. А начинать нужно с изучения самых основ верстки. Мой видео-курс проведет вас за руку по всем сложным местам, абсолютно с нуля до приобретения навыков верстки макетов любой сложности.