@jasper-blondin

Как выглядит современный процесс верстки?

Добрый день!

Версткой впервые начал заниматься около 10 лет назад. Затем перешел в back-end, но продолжаю изредка заниматься front-end, поскольку искренне люблю этот процесс и легче работать с собственным кодом, чем с чужим.
Однако появилось понимание, что сильно отстал от реальности. Моя верстка аккуратная и рабочая. Но все делаю "первобытным" способом ))

Суть вопроса в том, чтобы получить советы от активных и актуальных верстальщиков по процессу верстки: какие стандарты используете, какие инструменты применяете, как выглядит рабочая область и как проходит рабочий процесс?

Для сравнения, сам я до сих пор верстаю следующим "дедушкиным" способом: создаю папочку с файлами index.html, style.css, script.js, каждый открываю в редакторе (простеньком) и пишу код. Макет смотрю в Photoshop. Недавно освоил XD. Также использую Emmet. Все, больше ничего.

Можно ответить на вопрос жесткой критикой моего подхода с предложениями альтернативы (во всех аспектах). Это будет здорово.
Хочу, чтобы мой вопрос и множество ответов помогли другим верстальщикам (например, новичкам) с первых шагов правильно войти в современную отрасль.
  • Вопрос задан
  • 6620 просмотров
Пригласить эксперта
Ответы на вопрос 8
@coderxx
keep calm and learn js
Не уверен что начинающим верстальщикам нужно заморачивать себе голову всем этим ужосом:) Но может кому-то и пригодится:
- создаю новый проект на базе немного допиленного Optimized4HTML (можно копировать папку руками, можно сохранить в PhpStorm как темплейт, второе разумеется удобнее). Проект имеет следующую структуру:
5c13ab56a03e8108817224.png
- открываю его в PHPStorm, через командную строку устанавливаю пакеты и запускаю вотчер со следующей конфигурацией:
5c13ad0d5c912921297608.png
(таким образом отслеживаются изменения в файлах index.html, *.scss, common.js, а так же релодится браузер; в процессе верстки просто перескакиваем на виртуальный рабочий стол с открытым сайтом и сразу видим изменения, а если есть второй монитор то вообще песня). Кстати, перечень пакетов ннада?
5c13ae2b57082880473288.png
- из плюшек emmet и sass обязательно, в качестве таскранера - gulp.
- макеты у меня в .sketch, так же кто не пробовал советую попробовать Figma, получите практически скетч в браузере. Adobe Photoshop не люблю. Adobe XD не пробовал, но осуждаю. Здесь наверное больше дело вкуса и реалий, в которых вы работаете (например, в каком формате получаете макеты, какая ОС на рабочем компе).
Вроде все просто. Что непонятно - спрашивайте, отвечу.

UPD. Optimized4HTML недавно перешел на Gulp 4, советую попробовать. Учтите, что Gulp 4 не имеет обратной совместимости с галпфайлами предыдущей версии, так как немного изменился синтаксис.
Ответ написан
HamSter007
@HamSter007
HTML/CSS верстальщик
Меня, вероятно, закидают тапками, но я так же как и Вы и как Юпитер Макс верстаю старым дедовским методом)

Но есть и и другие современные методы.

+ С помощью сборщиков: gulp (уже устарел) , webpack.
Быстро собирают все файлы, минимизируют css\js файлы, оптимизируют картинки, установка необходимых бибилиотек и прочее.

+ С помощью препроцессоров: css - sass\scss\less, html - pug.

+ С помощью js фреймворков: vue, react, ...

Но все это подходит для каких-нибудь глобальных проектов, потому как одна только настройка такого сборщика займет много времени (чтобы там не говорили что раз настроил и пользуешься - это не так, каждый проект все равно приходится "донастраивать", обновлять и т.д).

Препроцессоры, как по мне, тоже не совсем удобные инструменты. Автопрефиксы есть в emmete любого редактора кода, т.е. уже не нужно писать\вставлять дополнительные sass\less ф-ии и прочие возможности препроцессора (миксины, экстенды, переменные, ... ) проще и быстрее написать ручками простым css)

Это все лично мое мнение.
Ответ написан
@vardoLP
Ват ю сэй эбаут май мама?!
да полно пакетных сборщиков, но я к примеру до сих пор работаю так же как и вы. Никаких проблем это не создает. Главное, чтобы все работало. )
Ответ написан
@Flying
  • Верстаю в PHPStorm (просто потому что ещё и работаю с backend кодом на PHP).
  • Для написания HTML использую Twig (т.к. нравится синтаксис и можно потом без переделки использовать шаблоны на backend'е). Использование шаблонизатора для вёрстки сильно помогает если надо сверстать более 1-2 страниц
  • Для написания стилей использую SCSS + свою библиотечку + несколько PostCSS плагинов.
  • Макеты - в Photoshop, InVision или Zeplin, смотря в чём отдают.
  • Для обычных картинок - Photoshop + оптимизаторы (optipng, pngout, guetzli, xat).
  • Для SVG иконок - Inkscape + руки + svgo, а затем организовываю всё это через icomoon.io, оттуда можно получить либо иконочный шрифт либо запакованный набор SVG элементов.
  • Для сборки проекта использую Gulp с набором различных плагинов, список могу дать отдельно если интересно.
  • Саму структуру проекта обычно просто копирую руками из проекта в проект. Можно конечно сделать какой-нибудь плагин для yeoman или что-то подобное, но меня не ломает скопировать пяток файлов, да и задачи бывают разные - просто вёрстка или вёрстка сразу в контексте сайта.
Ответ написан
@tyzberd
я использую
zeplin, WebStorm.
git через VCS WebStorm, очень удобно.

из плагинов
browser-sync,
gulp-nunjucks-render,
gulp.spritesmith
gulp-sass,
gulp-sourcemaps,
gulp-css-urlencode-inline-svgs
gulp-autoprefixer

иконки почти все спрайтами в отдельном файле
<svg viewBox="0 0 100 100" class="icon shape-codepen">
  <use xlink:href="/images/svg-defs.svg#shape-codepen"></use>
</svg>

https://css-tricks.com/svg-sprites-use-better-icon...

еще недавно использовал Inkscape, что бы отредактировать svg с добавленными классами, illustrator почему то вырезает классы
Ответ написан
IT_Highlander
@IT_Highlander
Познающий
Пробовал множество разных вариантов верстки, от самого "ручного" до webpack или gulp. В итоге понял, что если сайт не SPA, а просто лендинг или корпоративный многостраничник, то идеальным по скорости подготовки и удобству лично для меня является алгоритм:
1. Папка обычной структуры index.html + /img + /css + /js + /fonts + /sass .
2. Сразу инициализирую репозиторий (использую битбакет, а не гитхаб).
3. Открываю папку в VSCode, копирую настройки из любого другого проекта для плагинов.
3.1. Если только начинаем использовать VSCode, то нужно сразу поставить плагин для автокомпиляции Sass в CSS в онлайн режиме (Live Sass Compiler), этот плагин на лету конвертит код + сразу автопрефиксера функционал имеет + css map + минификация. Один раз настраиваем его для всех проектов.
3.2. Ставим Live Server, один раз настраиваем его для всех проектов.
3.3. Подключаем репозиторий во вкладке для репозиториев в VSCode
4. Всё, начинаем работать.
Я пропускаю шаг по настройке VSCode всякими мелочами типа линтеров, подсвечивалок кода, и прочего, тут кому что удобнее.

Такая связка позволяет использовать один инструмент (VSCode) для комфортной и быстрой верстки, если все в норме настроено, то я пишу\правлю код и тут же сразу всё вижу в браузере, не нужно ни обновлять ничего не подтягивать, ни ставить плагины в браузеры. Sass использую давно, ИМХО, ускоряет написание стилей в разы, и это при том, что не использую обычно даже миксины, максимум иногда готовые куски кода, а так обычно только дерево делаю через &, чтобы не писать по BEMу длиннющие цепочки руками и переменные через $.

Если идем дальше и уже верстку натягиваем куда-то, то добавляется еще и OpenServer, и все файлы переносятся в локальную папку виртуального сайта, перебиваются пути и все происходит точно также.
Изображения оптимизирую руками, не знаю почему, привычнее и быстрее, обычным tinypng или встроенными PageSpeedIns инструментами.

WebPack и Gulp много раз пробовал, и через OptimizeHTML, о котором выше писали, но не зашли на простых и средних проектах, слишком много всего нужно настраивать и подключать постоянно, что-то отваливается или криво работает, постоянно отвлекаешься на то, чтобы разобраться почему и что происходит. Ну и огромные папки получается, с нодовскими либами, бейбелами и прочими вещами, которые реально усложняют жизнь.

Для SPA, когда нужен React или Vue тут да, webpack, а на простой верстке - лишнее.
Как-то так, спрашивайте, критикуйте)
Ответ написан
@astrodeep
Webpack сборки, можно Webpack + Gulp. Миксины SCSS, BEM методология. Макеты из Adobe XD или Zeplin. Результаты обязательно лить в гит,гитлаб. А то недавно ssd накрылся и фсе если б не было в гите))
Ответ написан
Ваш ответ на вопрос

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

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