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

Question

[Константин Отпущенников]

Доброго времени суток. Предстоит работа сверстать множество достаточно похожих страниц (30 - 50 штук). Как грамотнее это сделать, какие сборщики, или, может быть, лоадеры из webpack можете посоветовать? Чтобы писать переиспольщуемый код, подобно компонентному подходу, чтобы не повторять себя? Верстка будет сажаться в будущем на тривиальный CMS-сервис, какой - не знаю.

Comments

[Сергей delphinpro]

gulp + любой шаблонизатор
я использую gulp-twig

Answer 1

[xmoonlight]

includeHTML - позволяет "на-лету" вставлять HTML-блоки в разметку ("сшивать" через тег или используя javascript) и проверять вёрстку (отображение) локально: помимо http/https, поддерживается протокол file:/// .
При необходимости, теги можно легко заменить на include-функции для PHP.
Также можно создать полностью рабочее меню с разной разметкой страниц (layouts), которое будет полноценно функционировать при клике (даже без размещения на хостинге!).

Comments

[nomta]

Я правильно понимаю, эта штука никак не компилируется и при использовании будет увеличивать количество запросов к серверу? Т.е. это не шаблонизатор и весь код как есть идет в продакшн?

[xmoonlight]

nomta, это чистая "склейка" кусков HTML в работающий шаблон.

Есть 4 варианта использования:
1. Вы хотите динамически загружать отдельные части страницы с сервера по каким-либо событиям (обычно для панели администрирования и т.п.).
2. SPA/phonegap/electron - весь клиент находится у пользователя, обмен с сервером идёт в формате JSON. Части HTML динамически подгружаются с локального хранилища.
3. Вы делаете вёрстку нового шаблона и хотите его сразу сверстать по-частям и проверять отображение при вёрстке.
4. Вы готовую (существующую) вёрстку хотите превратить в шаблон для CMS (возможно, предварительно разделив на те области, которые Вам необходимы) и затем "склеивать" их на стороне сервера (например, PHP-функцией include/include_once) в единую страницу.

[nomta]

Благодарю!

Answer 2

[Сергей Мурзин]

Просто оставлю.

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

Webpack лучше пойдет для полноценного приложения.
А вам, вероятно, лучше gulp, или grunt (но я его не люблю)

Comments

[Константин Отпущенников]

Я, конечно, знаком с данными инструментами.
Я хотел бы услышать здесь какие-то лучше практики или, может наиболее подходящие для этого npm-модули.

[Сергей Мурзин]

Константин Отпущенников.
К скринкастам добавлю только шаблонизатор pug (он же jade). Можете другие шаблонизатор поискать и выбрать на свой вкус. Остальное есть в скринкасте.

[Сергей Мурзин]

Константин Отпущенников, когда то я искал так же решения, в итоге получилось как в анекдоте. Много чего советовали и все сводилось к личному предпочтению советчика.
Я остановился на следующем:

if (просто собрать статические страницы) {
    использую pug
} else if (сделать приложение) {
    angular || webpack
} else { Google() }

Answer 3

[Dima Polos]

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

Comments

[Bhudh]

поправить один пункт в шапке отнимет у Вас часа четыре времени (все 50 страниц перекопировать...)

ОМГ, открыть все файлы проекта в одной сессии Notepad++ и сделать замену во всех файлах. Секунд 10, из которых половину времени Вы будете тянуть папку на окно редактора. Чем Вы собрались заниматься ещё 4 часа?

[Сергей Мурзин]

Bhudh, прое***, пропустить пару файлов из-за пробельчика, получить нагоняй от заказчика, найти пропуски, понять что случайно поменял что-то не в шапке, найти все случайности.
Заказчик может попросить небольшое отличие в шапке на каждой странице из-за которой всё предусмотреть в регулярке не представляется возможным.

[Bhudh]

Первое предложение: это ответ на мой вопрос? Интересные у Вас рабочие перспективы.

[Dima Polos]

Bhudh, я лично очень не доверяю автозамене, особенно когда у меня более 40 файлов, где могут быть похожие слова или классы, мало ли где автозамена найдет похожее вхождение и заменит, что заменять не надо. Вопрос номер два, а если мне не заменить, а вставить новое надо? Третий вопрос, Вы считаете правильным не бить большой проект на модули с помощью препроцессоров или шаблонизвторов, а все-таки вручную все менять? Я писал тот текст объясняя зачем надо бить на модули, и числа (4 часа) брал образно, с потолка.

[Bhudh]

Автозамена думать не умеет, если нашла похожее: значит, в шаблоне так прописал какой-то ССЗБ.

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

[Dima Polos]

Bhudh, да, согласен, можно и php, но тут дело вкуса или задача какая-то специфическая.