В чем смысл html-препроцессоров?

Question

Максим Иванов @splincodewd

Developer

HTML

В чем смысл html-препроцессоров?

Ну, вот я понимаю для чего нужен emmet в sublime, он быстро тебе через таб дополняет html
А вот все эти HAML, BEML, Jade, что там еще есть, и их же не будет человек постоянно скопировал и вставил в онлайн конвертер (это как я раньше постоянно тупил и копировал в less конвертер, сейчас же есть всякие консольные программки с watch событиями). Просто, кто использует в практике html препроцессоры у себя, поделитесь опытом?

Вопрос задан более трёх лет назад
5376 просмотров

5 комментариев

Подписаться 1 Оценить 5 комментариев

Сергей delphinpro @delphinpro Куратор тега HTML

Все их используют. Все, кто серьезно занимается разработкой.
Примеры, ну я не знаю. примитивное - общие шапка и подвал на всех страницах, которые заказчик "вдруг" решил поменять. А страниц - пара десятков.
Или страница каталога товаров с 60-ю одинаковыми элементами, которые тоже вдруг нужно чуток изменить.
Без шаблонизатора вы обречены на нудную копипасту, и не факт, что вы будете очень внимательным копипастером.

Написано более трёх лет назад
Максим Иванов @splincodewd Автор вопроса

так это же не относится к html препроцессору, если у нас 60 одинаковых элементов их можно циклом сгенерировать на js или на php если уж нужно и используем в качестве серверного языка

Написано более трёх лет назад
Serj-One @Serj-One

Максим Иванов: Речь идёт о фронтенде. Генерировать js'ом элементы, которые в билде должны быть статичны - абсурд. О php на этом этапе речи вообще не идёт, бэкенд - следующий этап.

Написано более трёх лет назад
timfcsm @timfcsm

Serj-One: тут у большинства скорее вопрос, как и у меня кстати, что делать дальше, когда бэкенд уже есть? допустим, сверстал я с этим джейдом всё, прикрутили на бэкенде шаблонизатор php-шный.. и тут надо что-то поменять. Тогда всё, забить на джейд и править уже шаблон? или есть какой-то адеквтаный вариант мерджить результат работы джейда с готовым шаблоном?

Написано более трёх лет назад
Odinokun @Odinokun

timfcsm: так ты в исходниках делаешь правки в jade и отдаешь прогеру. А уже прогер вносит соответствующие коррективы нв сайте.

Написано более трёх лет назад

Решения вопроса 5

Комментировать

7 комментариев

15 комментариев

Максим Иванов @splincodewd Автор вопроса

each TITLE in["Main page", "About us", "Contacts"] а расскажите, как это он распарсит на несколько страниц html? или это все он в одном файле выведет?

Написано более трёх лет назад
Алексей Ярков @yarkov
Максим Иванов: блин, ну это синтетический пример )))
Я к тому, что можно использовать циклы, переменные при компиляции. Например список ul>li из 100 элементов будет выглядеть так:
ul -var liArr = [] -for(var i=0; i<101;i++){ - liArr.push(i) -} each li in liArr li= li
Написано более трёх лет назад
Максим Иванов @splincodewd Автор вопроса

но это же можно и на js делать, почему именно препроцессоры использовать то?

Написано более трёх лет назад
Serj-One @Serj-One

Максим Иванов: Что можно делать на js? Генерировать разметку, которая в билде должна быть статичной? Это абсурд.

Написано более трёх лет назад
Максим @LenovoId

Serj-One: а на emmet надо просто написать header+main+footer + ctrl+enter и всё , и ни каких препроцессоров для глупого html не надо

Написано более трёх лет назад
Максим @LenovoId

Serj-One: и так же html:5 + ctrl+enter и всё и не надо думать о jade и прочей лишней шелухе

Написано более трёх лет назад
Serj-One @Serj-One

Максим Жаров: Причём здесь вообще emmet? Как можно сравнивать совершенно разные инструменты? Препроцессоры - это в первую очередь шаблонизация. Чем поможет emmet, если нужно изменить уже свёрстанную шапку для 50 страниц? Ничем. Я изменю 1 шаблон, а ты будешь копипастить новую шапку на все 50 страниц. И это только самый очевидный пример.

Написано более трёх лет назад
Алексей Ярков @yarkov

Максим Жаров: процитирую Олег : Если вам не понятен смысл, то скорее всего на данном этапе html-препроцессор вам не нужен. Как только потребуется - вы сами это поймете и начнете поиск подходящего инструмента.

Написано более трёх лет назад
Barmunk @Barmunk

Serj-One: а зачем вы делаете 50 html файлов? Всмысле когда это нужно? Для каких проектов? Кто у вас это просит?

Написано более трёх лет назад
Serj-One @Serj-One

Barmunk: Большинство моих проектов - довольно объёмные интернет-магазины. Среднее количество 12-15, но и 20-25 типов страниц - норма. Плюс обычно добавляется 2-3 варианта ключевых элементов для A/B тестирования. В итоге получаем 40-70 вариантов страниц на проект, и это далеко не предел. Не так давно выполнял проект для крупного завода, - центральный сайт + сайты 8-ми его подразделений. Общий стиль, но каждый имеет уникальные отличия. В совокупности проекта вышло более 250 чем-то отличающихся страниц, где любое структурное изменение дизайна затрагивало каждую.
Думаю, очевидно, что в таком случае копипаста любого изменения в каждый файл - не вариант, и шаблонизация необходима.

Написано более трёх лет назад
Barmunk @Barmunk

Serj-One: Само собой копипаста зло, но не проще это сразу на php делать с примитивным include? Ведь если я правильно понимаю твои 250 страниц потом отдадут бэкендщику, который будет во все это втыкать.

Написано более трёх лет назад
Максим @LenovoId

Serj-One: не буду , я выложу на либо на локальный хост либо на удалённый , и с php подключу 1000000000....... раз

Написано более трёх лет назад
Serj-One @Serj-One

Barmunk: Максим Жаров: Нет, не проще. Рассмотрение php инклудов в контексте обсуждения html-препроцессоров настолько абсурдно, что я даже не буду объяснять причин. Как здесь уже не раз сказали: "Если вам не понятен смысл, то скорее всего на данном этапе html-препроцессор вам не нужен."

Написано более трёх лет назад
Максим @LenovoId

Serj-One: по мне так проще include чем установка и компиляция хоть и абсурдно

Написано более трёх лет назад
Максим @LenovoId

Serj-One: и к тому же , для php шапка должна быть одна , а не 1000 штук , вы это понимаете сами лучше меня , я потому не вижу смысла в jade , я им начал пользоваться и даже сам не знаю почему , для интереса , и что бы сгенернить что то надо ещё и написать это липу и потом отгенерировать и потом только будет результат , а по факты ключевых страниц то ну максимум 20 может быть - а не 1000

Написано более трёх лет назад

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

PHP

+1 ещё

Средний
Интересует простой скрипт стены комментариев с возможностью добавить фото и мгновенным выводом на страницу?
- 1 подписчик
- 6 часов назад
- 35 просмотров
0

ответов
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 14 часов назад
- 46 просмотров
2

ответа
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- вчера
- 79 просмотров
2

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- вчера
- 699 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- 22 апр.
- 211 просмотров
4

ответа
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 2 подписчика
- 22 апр.
- 183 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- 22 апр.
- 606 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать, что бы кнопка при ховере увеличивала ширину?
- 1 подписчик
- 21 апр.
- 92 просмотра
1

ответ
HTML

+1 ещё

Простой
При загрузке картинки этот блок не имеет размера, как исправить?
- 1 подписчик
- 19 апр.
- 89 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 19 апр.
- 219 просмотров
1

ответ
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL

25 апр. 2024, в 05:57

3000 руб./за проект

Правки в webApp готового и написанного телеграмм бота next, tailwind

25 апр. 2024, в 05:29

25000 руб./за проект

Фронтер - DevOps. Развернуть фронт на хостинге. Прокинуть в телегу-бот

25 апр. 2024, в 04:38

10000 руб./за проект

Все их используют. Все, кто серьезно занимается разработкой.
Примеры, ну я не знаю. примитивное - общие шапка и подвал на всех страницах, которые заказчик "вдруг" решил поменять. А страниц - пара десятков.
Или страница каталога товаров с 60-ю одинаковыми элементами, которые тоже вдруг нужно чуток изменить.
Без шаблонизатора вы обречены на нудную копипасту, и не факт, что вы будете очень внимательным копипастером.
так это же не относится к html препроцессору, если у нас 60 одинаковых элементов их можно циклом сгенерировать на js или на php если уж нужно и используем в качестве серверного языка
Максим Иванов: Речь идёт о фронтенде. Генерировать js'ом элементы, которые в билде должны быть статичны - абсурд. О php на этом этапе речи вообще не идёт, бэкенд - следующий этап.
Serj-One: тут у большинства скорее вопрос, как и у меня кстати, что делать дальше, когда бэкенд уже есть? допустим, сверстал я с этим джейдом всё, прикрутили на бэкенде шаблонизатор php-шный.. и тут надо что-то поменять. Тогда всё, забить на джейд и править уже шаблон? или есть какой-то адеквтаный вариант мерджить результат работы джейда с готовым шаблоном?
timfcsm: так ты в исходниках делаешь правки в jade и отдаешь прогеру. А уже прогер вносит соответствующие коррективы нв сайте.

Answer 1 · 2016-07-23 18:04:22

Serj-One @Serj-One

i'm sexy and i know it

Переменные
Миксины
Шаблонизация

Разве этого мало?

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2016-07-23 18:11:19

В чем смысл html-препроцессоров?

+ 10 к скорости, удобству, абстракции

Если вам не понятен смысл, то скорее всего на данном этапе html-препроцессор вам не нужен. Как только потребуется - вы сами это поймете и начнете поиск подходящего инструмента. Данный принцип вполне универсален и подходит не только в случае html-препроцессора, а вообще.

Answer 3 · 2016-07-23 18:16:31

На чистом html много страниц выглядят так:
main_page.html

<!DOCTYPE html>
<html>
<head>
    <title>Main page</title>
</head>
<body></body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
    <title>About us</title>
</head>
<body></body>
</html>

contacts.html

<!DOCTYPE html>
<html>
<head>
    <title>Contacts</title>
</head>
<body></body>
</html>

С помощью jade делаем так:

each TITLE in["Main page", "About us", "Contacts"]
    html
        head
            title= TITLE
        body

Результат тот же. Ну и конечно ответ Serj-One вполне исчерпывающий.

Answer 4 · 2016-07-23 18:38:32

Препроцессор это шаблонизатор, шаблонизация нужна либо для того, чтобы разметку отделить от логики и связать выборочно, либо для того, чтобы наоборот логика удобно генерировала разметку.

Answer 5 · 2016-07-23 19:29:22

В Pug (бывший Jade) очень удобно менять структуру файла - нужно всего лишь изменить отступ, не заботясь о закрывающих тегах. Когда верстается много объемных страниц - это удобно.
zooks.ru/web/773

В чем смысл html-препроцессоров?

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

Минуточку внимания

Войдите на сайт