@Korsia
Верстальщик

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

Всем привет. Верстаю, использую кучу примочек, но верстка страницы всё равно занимает много времени (три-четыре дня в усиленном темпе на одну страницу средней тяжести). Интересует мнение верстальщиков - что еще можно добавить в инструментарий для ускорения?

Использую:
БЭМ, SASS (сокращения, переменные), Emmet, заготовленный шаблон для старта верстки (с готовой структурой), наработала снипеты (но обычно макеты разные, не всегда помогает), пиксель-перфект вместе с онлайн-хостом-релоадом, перешла на VSCode (отпала надобность в Gulp), вместо ФШ давно Avocode, наработала быструю схему работы (как могла). Думаю еще подключить webstorm для того, чтобы переносить данные из разработчика сразу в код. И всё равно всё остается очень трудоемким. Делаю разметку руками на флексах, пока адаптацию пропишешь для всех экранов - вечность пройдет. Бутстрап - только хуже делает, без него быстрее (да и костыль).

Прошу совета у бывалых. Может есть еще какие-то фишки, о которых я не знаю, которые могут повлиять на скорость верстки? Думаю о кусках кода по типу миксинов. Буду рада любым советам.
  • Вопрос задан
  • 6293 просмотра
Решения вопроса 1
@manokhin
По поводу адаптива
Гугли в сторону smartgrid Дмитрий Лаврик. Увеличишь скорось на x2.(это как раз с миксинами связанно).
Препроц pug, haml, jade, выбирай у котороги синтексис проще сам использую pug для него желательно gulp
Посмотри в сторону time menedgment.
Техника помидора
Сделай правило если сидишь над блоком больше n- минут переходи к другому(имеется ввиду если делаешь какие-то исправления и погоняешь под пиксельперфект), пусь будут недочеты, подправишь в самом конце.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 13
@jamtuson
Все фигня. Ускорить верстку можно на порядок, если не смотришь на экран после каждого изменения.

Учитесь верстать определяя на глаз цвета, отступы, размер шрифтов и большинство вещей.
Когда верстаете, то у вас в голове должна быть картинка того, что вы пишите в css и чем больше профессионализм, тем меньше расхождения между реальностью и картинкой в голове.
Остальные вещи не так ускоряют верстку, как такой навык
Ответ написан
@McBernar
Думаю, проблема здесь не в инструментах, а в самой скорости работы — скорость печати, умение быстро принимать решения, умение правильно раскладывать верстку на блоки, возможно, где-то пишете лишнего, когда можно просто взять либу, возможно, вы работаете на фрилансе с дизайнерами-идиотами, у которых по 40 видов стиля для заголовков.

Уверен, придет с опытом.

С инструментами у вас все хорошо. И не слушайте тут никого, кто «вертел бэм и галп».
Ответ написан
joeberetta
@joeberetta
Читай: https://epdf.pub/google-for-dummies.html

Прошу совета у бывалых.

Вы думаете они использовали ради обычной верстки столько вещей? У них был макет, редактор/ide и гугл.
Да и советую вам использовать "технику":
получили итоговый дизайн, возьмите и наглядно определите для себя прототипы (количество блоков, вложенности и прочее) потом от общего переходите к частному. Если ради скорости(упуская качество кода) то используйте готовые css/js либы.
Но лично я делаю как выше описал и в последнее время по минимуму использую либы.
Сначала фасткодинг, а потом уже чистка кода, правка багов
Ответ написан
sharnirio
@sharnirio
Front-end developer
Из необычного, пожалуй могу посоветовать, написать дополнительный скрипт на bash или node для быстрого создания блоков - по типу открыл проект в консоли, прописал что то по типу "new-block name-new-block" и автоматически создается html файл этого блока с базовой разметкой и классами (с именем этого блока) + этот файл подключается в нужный основной html файл (использую gulp-rigger для таких целей) + классы также автоматом добавляются в конец основного файла стилей, ну и проверку на существование блока не забудьте что б не перезаписывать существующие + можете под себе и свою структуру модернизировать скрипт как хотите: по типу отдельная папка для каждого блока и тд.
Ответ написан
Комментировать
apospeliri
@apospeliri
Из того что я прочитал в твоих комментариях, то я думаю что ты примерно делаешь что и я в свое время.
Рекомендую связку BEM + Atomic css.
Например у тебя есть несколько блоков и них есть заголовки.
вместо:
.block1__main-title
.block2__main-title
пишешь
block1
h2 class="text text--20 text--uppercase text--gray-lite text--space-05 mb-20
block1

block2
h2 class="text text--14 text--gray-lite text--decorate-red text--space-1 mb-15"
block2

И теперь если к тебе прибегает дизайнер и говорит, ой надо срочно поменять в blocke1 размер шрифта с 20 на 24, ну не проблема , быстро в html меняешь один класс и погнали.
Я когда первый раз услышал мне идея дико не понравилась у меня же есть BEM, НО в чем плюсы.
первое берешь из bootstrap flex утилиты(d-flex, justify, align-content...), и половина вложенных блоков по BEM пропадает.
И самая вкусная фишка все это дело можно использовать с брейкпоинтами, например
pl-20 и pl-md-35. Это так экономит нервы, когда прибегает дизайнер, ой тут короче на вот это страницу в этом блоке тут внизу надо немного текст поменять и да, еще padding слева и вот тут еще давай кнопулечку справа добавим, и да это только на этой странице, на других давай все оставим все как есть.

P.S. Вообще лучше на живом примере посмотреть твою верстку, и дать какой то совет.
Ответ написан
Welens
@Welens
Фронтенд
Pug ( https://gist.github.com/neretin-trike/53aff5afb761... )
Gulp для оптимизации графики, минификации и транспиляции кода, а так-же быстрой сборки билдов
Ответ написан
daemonhk
@daemonhk
ПсиХоПат
Года полтора открыл для себя LESS, стало чуть быстрее (у вас SASS, еще круче). Не видя макетов, трудно оценить трудозатраты, но лично я сначала делаю десктопную версию, потом адаптивную. First mobile вертел сами знаете где (бэмы, галпы, и прочее где-то там же вращаются). Надеюсь, вы не делаете блок, а потом судорожно под него адаптив пишите, как некоторые товарищи? Как вариант, можно сначала набросать структуру, а потом оформлять, но это если у вас в голове структура выстраивается хотя бы на 90%.
Ответ написан
Xvento
@Xvento
WordPress Разработчик, Themeforest автор
Используйте сетку bootstrap и Jade.

Возможно вы верстаете не профессиональные макеты, м из-за этого такой головняк.
Ответ написан
@javaScriptIsPooP
Начинающий программист на Python, Веб-дизайнер
Если вы под версткой имеете в виду процесс создания, то так:

Установить browser-sync чтобы быстрее проверять код, использовать специализированные для верстки редакторы с возможностью использовать плагины например emmet, открыть stackoverflow и удачи)))
Ответ написан
Комментировать
tema_sun
@tema_sun
Фигня какая-то. В верстке (как и в любом кодинге) основное время занимает не написание кода, а продумывание того как все сделать поддерживаемым и хорошо работающим. Сам код написать это 3% времени.
Ответ написан
@Serzio
Думаю о кусках кода по типу миксинов

правильно думаете. все верно, используйте дальше все эти инструменты. чем дольше будете использовать, тем лучше будет получаться.
+ используйте pug, если раньше без шаблонизаторов обходились.
Ответ написан
Комментировать
Тут обо всё уже написали, хотел бы добавить - Используй 2 монитора, если есть такая возможность. На одном мониторе Avocode (вместо фотошопа) для снятия размеров, цветов, копирования текста. На другом мониторе удобно расположенные редактор кода, терминал и браузер.
Ответ написан
Комментировать
Почему никто не написал про прекрасный tailwindcss (https://tailwindcss.com/)?
Экономит время как минимум на 4 вещах:
1) Не нужно постоянно придумывать названия для классов. Для простых не повторяющихся компонентов мы можем просто использовать классы-утилиты tailwind. (пример использования показан на главной странице https://tailwindcss.com/)
2) Позволяет делать адаптацию практически всех свойств CSS минимальными временными затратами (https://tailwindcss.com/#responsive-to-the-core)
3) В этом фреймворке нет как таковых "компонентов", есть только "утилиты" из которых вы собираете свои компоненты. А это значит что фреймворк не навязывает никакие свои стили, которые приходится сбрасывать (как это делают популярные фреймворки по типу бутстрапа) (https://tailwindcss.com/#component-friendly)
4) Позволяет настроить практически все для своих нужд (начиная с брейкпоинтов, заканчивая размерами отступов, шрифтов и т.д) (https://tailwindcss.com/#designed-to-be-customized)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы