Как грамотно сверстать много похожих страниц?

Доброго времени суток. Предстоит работа сверстать множество достаточно похожих страниц (30 - 50 штук). Как грамотнее это сделать, какие сборщики, или, может быть, лоадеры из webpack можете посоветовать? Чтобы писать переиспольщуемый код, подобно компонентному подходу, чтобы не повторять себя? Верстка будет сажаться в будущем на тривиальный CMS-сервис, какой - не знаю.
  • Вопрос задан
  • 366 просмотров
Решения вопроса 2
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
includeHTML - позволяет "на-лету" вставлять HTML-блоки в разметку ("сшивать" через тег или используя javascript) и проверять вёрстку (отображение) локально: помимо http/https, поддерживается протокол file:/// .
При необходимости, теги можно легко заменить на include-функции для PHP.
Также можно создать полностью рабочее меню с разной разметкой страниц (layouts), которое будет полноценно функционировать при клике (даже без размещения на хостинге!).
Ответ написан
Просто оставлю.

learn.javascript.ru/screencast/gulp
learn.javascript.ru/screencast/webpack

Webpack лучше пойдет для полноценного приложения.
А вам, вероятно, лучше gulp, или grunt (но я его не люблю)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
dimovich85
@dimovich85 Куратор тега CSS
https://u-academy.net/
Рекомендую заранее определить какие блоки будут повторятся, а какие уникальные. Определить общую структуру.
Я делаю заготовки с атомарными классами, чтобы часть очень частых стилей вынести из css в классы html, например, класс типа .ta-c {text-align: center;}, .cur-p{cursor: pointer;} и уже в хтмл вставляю классы, еще создаю атомарные d-n (display: none), d-b... Такие вещи порой часто встречаются, и как по мне, проще просто класс добавить, чем писать в css, хоть и препроцессоры упрощают все это дело, но мне удобнее так. Если надо будет вдруг везде убрать это свойство, то можно просто переопределить класс.
Посмотрите, какие цвета, размеры шрифтов, паддинги, маржены используются, и везде в препроцессоре пишите не значения, а переменные, которые объявляйте в отдельном файле, не забудьте импортировать его только.
Обязательно используйте БЭМ. На мелких сайтах он не дает ощутимую выгоду, зато на таких больших без него просто себе дороже.
Для хтмл попробуйте препроцессоры/шаблонизаторы, иначе поправить один пункт в шапке отнимет у Вас часа четыре времени (все 50 страниц перекопировать...). Еще здесь на днях один человек поделился вот такой штукой: ссылка. Позволяет инклюдить шаблоны хтмл.
А в остальном, самому интересно, кто что посоветует. Подпишусь и почитаю.
Ответ написан
Ваш ответ на вопрос

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

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