@Alexander-K

Какие вы используете инструменты для ускорения верстки макетов?

Какие вы используете инструменты, макросы, гаджеты и т.п. для ускорения верстки макетов?
Как можно ускорить свою работу по верстке макетов?
  • Вопрос задан
  • 652 просмотра
Пригласить эксперта
Ответы на вопрос 4
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Есть несколько сторон вопроса:

  1. Часто повторяющиеся рутинные действия, вроде копирования файлов, выделения critical css или обработки картинок. Для этого есть gulp + плагины под конкретные задачи.
  2. Разделение кода по модулям, добавление синтаксических возможностей, убирание мусора из кода. Вопрос удобства и ускорения ориентирования по нему. Обычно это pug, less, postcss, в частности autoprefixer, ну и babel, куда без него.
  3. Это все нужно собрать. Тут webpack или снова gulp + плагины. Можно webpack запускать через gulp, как одну из задач. Ну и browsersync, чтобы руками не перезагружать страницу.
  4. Ускорение написания кода. Тут emmet + умение работать с текстовым форматом как таковым. Порой vim с множественными курсорами кажется чем-то космическим.
  5. Страховки от ошибок - w3c validator, stylelint, doiuse, eslint, sonarjs. Сильно недооцененная тема, но экономит много времени на отладке.


Конкретные инструменты - это всегда вопрос личных предпочтений, но общий посыл должен быть понятен - автоматизируем все, что можно, предохраняемся по максимуму, и потом учимся работать с текстом. А дальше упираемся в то, что руки работают быстрее головы. И чем сложнее дизайн, чем сильнее задачи выходят за рамки повседневности, тем меньше значение скорости, там эти все инструменты скорее дают просто комфорт. Не нужно думать о том, о чем думать не обязательно.
Ответ написан
Комментировать
Sanes
@Sanes
Emmet с плагином автодополнения к CSS фреймворку.
Ответ написан
Комментировать
emmet, livereload, autoprefixer, watch для стилей и html.
Эти инструменты на моё мнение должны быть под капотом у каждого верстальщика
Ответ написан
Комментировать
@artyglitch
Gulp. Можно найти в интернете, любой темплейт на нем для верстки. Обычно он включает в себя pug, scss, сборку спрайтов, livereload, watch, минификацию кода и ещё различные штуки, как упаковка в архив, отправка на сервер и прочее. Чтобы легче было искать, заходи на гитлаб или гитхаб и там ищи. Найдёшь точно. Либо есть старый инструмент yeoman.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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