Есть ли альтернативный подход для верстки?

Question

[Адам Сулумов]

Здравствуйте!
Работаю в студии Front-end разработчиком, но большую часть работы занимает верстка адаптивных макетов, что хотелось бы как-то исправить. Видите ли, суть в том, что верстку я знаю чуть ли не от и до, начиная построения макетов с флоатов (не застал табличную верстку, а может быть оно и к лучшему), заканчивая гридами. Верстаю действительно очень давно. Использую сборщики, препроцессоры, шаблонизаторы, фреймворки и прочее, но это все больно надоело, ибо чаще всего макеты приходят нестандартные, сложные, и приходится писать тонны scss кода.

Вопрос таков:
Существует ли какой-то способ максимально автоматизированной верстки макетов, при условии наиболее чистового кода, семантики и возможности SEO оптимизации?

Я идеале я представляю некий софт – генератор, в котором я, используя визуальный интерфейс, смогу быстро клепать разные элементы сайта, и вставлять их в заготовленный мною каркас написанный вручную? Нормальный софт, а не какой-нибудь дримвивер, или конструктор, который будет абсолютно позиционировать элементы на странице. Я не говорю о полном отказе от работы с кодом, я имею ввиду какой-нибудь инструмент, который будет стилизовать за меня элементы.

Есть какие-любо предложения? Неужели в 2019 году люди продолжают верстать вручную?

Comments

[Rustam Bainazarov]

Для этого есть свой личный фреймворк, бойлерплейт, наработки, файлы, миксины и т. п.

Таких инструментов, как описали, нет, они все без исключения примитивны и оторваны от реальности.

[Адам Сулумов]

Спасибо за ответ. Личные фреймворк – все же не решение проблемы автоматизации.

[Rustam Bainazarov]

Адам Сулумов, полноценного решения нет и в ближайшее время не будет. Так ещё и с такими требованиями (семантичная вёрстка, адаптивность, полноценной редактируемостью, SEO и чтобы не на position: absolute и т. п.), к сожалению.

Так что — вручную, конечно же. Иначе бы CSS-фреймворки не плодились, а мы всё бы делали в таком ПО.

Answer 1

[Андрей Медведев]

Посмотрите webflow, мне кажется это самое близкое что есть на данный момент. Генерирует полностью осмысленный хтмл, вы все контролирует, структуру, названия классов.
Я когда попробовал был просто в восторге, но потом все равно вернулся к написанию кода) это быстрее и удобнее

Comments

[Адам Сулумов]

Спасибо за ответ. Это лучшее из того, что мне кто-либо мог предложить.

Answer 2

[Евгений Вольф]

Есть какие-любо предложения? Неужели в 2019 году люди продолжают верстать вручную?

Я конечно могу ошибаться, но насколько мне известно - на данный момент всё ещё продолжают. Относительно недавно (месяца 2-3 назад, приблизительно) сталкивался с подобным вопросом и... могу сказать, что "абсолютное позиционирование элементов на странице" - это не ключевая проблема. В том смысле, что какой-то софт эту проблему решать уже научился (какой именно - сейчас точно не вспомню, под "тест" попало всё, что уадалось найти в интернете, включая различные онлайн-сервисы). Основная проблема, как я уже говорил сместилась в с "абсолютного позиционирования" в сторону г-о кода, все образцы в той или иной мере обильно гадили в конечный код.

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

Думается мне, когда что-то сможет генерировать код очень близкий к чистовому, достойного качества - профессия верстальщика начнёт становится частью истории, как когда-то профессия, ну скажем, кучера.

P.S.

не застал табличную верстку, а может быть оно и к лучшему

Я застал времена, когда CSS ещё не придумали :)

Comments

[Адам Сулумов]

Спасибо за конструктивный ответ. Очень жаль что так получается(

[Dima Polos]

Кучер перерос в таксиста, как я понял)

[Евгений Вольф]

Dima Polos, ну да, а ткачи-станочники в программистов :)

P.S. А если серьёзно, я просто привёл первый пришедший мне в голову пример, я думаю автор вопроса отлично понял мою аллегорию :)

[Адам Сулумов]

Евгений Вольф, безусловно.

Answer 3

[Dima Polos]

С учетом семантики Вы такой автоматизации не получите. С учетом оптимизации тоже. Такого инструмента нет. Другое дело просто автоматически создать верстку, на дивах и спанах, чтоб на картинку похоже было - такое есть.

Comments

[Адам Сулумов]

Спасибо за ответ. Полностью согласен.

[Dima Polos]

Адам Сулумов, согласитесь, чтобы разметить блок семантически правильно мало просто посмотреть на картинку и прикинуть сетку, надо понять суть этого блока в контексте документа, а еще и структурно его разметить дополнительными обертками или какие-либо скрытые узлы добавить с прицелом на адаптивность и a11y. Как можно автоматически из всех изображений выделить контент и декоративные картинки, а еще как на автомате можно представить перспективу наполнения блока и подключения верстки на CMS? По поводу последнего, я имею ввиду, что какие-то блоки будут наполняться из админки, и следовательно должны выдерживать переполнение, также разные cms могут добавлять свою верстку. Часто бывает, что какие-то картинки для фона могут приходить с бэкенда, следовательно, как это учесть в верстке, ведь через css уже не очень удобно такой фон добавлять, и так далее. Так что верстальщик будет жить, а автоматика тут явно будет давать сбой, как минимум пока что)

[Адам Сулумов]

Dima Polos, действительно верный ответ. Я думал об этом тоже. Надеялся, что софт может сделать хоть как-то более менее, чтобы можно было уже немного отредактировать DOM для дальнейшей работы с ним.

Answer 4

[siarheisiarhei]

Когда чего то хочешь.... Сначала подумай ..... А, зачем...? ....и спрашивать - уже самому противно будет.....

Answer 5

[Михаил]

Я думаю, что когда-нибудь, лет этак через 100, будут совсем другие языки программирования, вот тогда и будет такой инструмент. Тогда не будет уже никакого html, css не знаю насчёт JavaScript, если и будет, то очень измененный, будут всякие фреймворки, и т.д.
Придумают такую программу, в которой надо будет только нажать кнопку, ну и еще пару может каких настроек, и всё будет готово. Причём даже нажимать не придётся, а просто подумал, и всё сразу само появилось. Силой мысли. Из головы сразу на экран.
А то, что мы сейчас с вами делаем , это — выбивание огня камнем , т.к. еще не изобрели зажигалку и спички . Мы ещё находимся в каменном веке программирования и веб разработки .
Поэтому в ближайшие -дцать лет будем с вами писать тот же див класс ....