Какой актуальный стек верстки 2024?

Question

[NeedJs1111]

Какой актуальный стек верстки? я хочу научится хорошо верстать сейчас я использую sass также был опыт работы с tailwind и bootstrap что еще мне стоит попробывать/изучать/знать

Comments

[Froggyweb]

JS, SVG, WebApi

[Виталий Першин]

Grid, Flexbox и прочие нативные технологии. Знание нативного js. Вот это то, что поможет освоить любой фреймфорк. Все остальное это требования конкретного проекта или компании.

[Ankhena]

State of CSS
Посмотрите и вопросы и результаты.

[godsplane]

попробЫвать стоит идти дальше по стеку фронтенда а не углубляться в верстку, так как это бесполезное занятие.

[Deita]

godsplane, 100% кому эта дичь может нравиться

[Александр Васильев]

посмотри сюда
https://csszengarden.com/pages/alldesigns/
все это на одной и той же минимальной разметке.
Так что правильно написали тут неоднократно - учи CSS. А стеки - это стандартизация и удобство, личное и в команде.

[Deita]

Александр Васильев, мне одному разве кажется что технология CSS ущербная какаято сама по себе с самого начала и до конца, или ктото тоже может разделяет моё мнение в этом мире. Она похожа на какойто PHP где все набежали и накрутили кучу всякого три точки и уже пытаются сделать это ущербное творение даже языком программирования на полном серьёзе
inline-block, float, flexbox, grid что там ещё уже есть, встроенный калькулятор уже сделали для тян? Убожище!

[Александр Васильев]

Deita, а как надо?

[Deita]

Александр Васильев, Пора в *.md и Canvas уже давно, давно всем это было понятно. HTML/CSS это дичь и путь в никуда.

[Александр Васильев]

Deita, нам с ним жить, легаси-жеж

Answer 1

[Виктор Кожухарь]

Если вы хотите научиться именно хорошо верстать, то углубляйте знания в чистом CSS.
Изучите все самые современные техники и нововведения CSS, изучайте новые фичи CSS, которые только появились, и у них нет ещё полной поддержки в браузерах. Находите какие-то сложные примеры с CSS-tricks, пытайтесь сначала сами их повторить, а потом сравнивайте с оригинальным решением.

Так вы будете на острие ножа, и сможете делать то, что обычная публика не умеет, сделаете хорошее портфолио и вас чаще будут брать на интересные и дорогие задачи. А Tailwind, Bootstrap и т.д.... каждая обезьяна может научиться использовать...

Comments

[Вадим]

Если вы хотите научиться именно хорошо верстать, то углубляйте знания в чистом CSS.

HTML с семантикой и доступностью грустят от таких слов...

[Виктор Кожухарь]

Вадим, Ну забыл) Советую дописать это в своём ответе

Answer 2

[Михаил Р.]

1. WebPack/Vite.
2. CSS Modules (производительность и серверный рендеринг).
3. Шаблонизатор по типу Handlebars или EJS (множество страниц, использование компонентов, проброс параметров итп).
4. Bootstrap/Tailwind если надо быстро (но я обычно этот навоз не использую, руками быстрее и css и js написать).
5. Flex/Grid.

Comments

[VolgaVolga]

Tailwind

этот навоз не использую

Чем не угодил? Прекрасная и удобная вещь, в отличие от Bootstrap.

[Михаил Р.]

VolgaVolga, он не решает 100% задач, в отличие от классического css, но вот засирает html своими десятками классов знатно

[Виталий Першин]

VolgaVolga, Аксиома Эскобара

[VolgaVolga]

Михаил Р.,

он не решает 100% задач... засирает html своими десятками классов

100% задач ничто не решает. Зато прилично ускоряет работу и очень сильно уменьшает количество CSS кода.

[Виталий Першин]

Михаил Р., А Tailwind вообще волшебная штука. Допустим есть у нас какой-то стиль, который повторяется в разных местах шаблона. Если раньше в нативном css это был бы один класс, который в одном месте поправил и изменения применились везде, то благодаря Tailwind и его спагетти из классов, нужно лезть в каждый файл, где эти спагетти прописаны и менять классы. "Умные люди" придумали для таких классов, делать отдельные шаблоны классов и подключать эти шаблоны в нужных местах, чтобы потом менять все так же в одном месте, но уже на уровне шаблонизатора, а не на уровне стилей... Мега-мозг в этот момент делает большой взрыв...

[Михаил Р.]

VolgaVolga,

100% задач ничто не решает

Ну почему же. Один маленький класс в html (он же создан для html, вроде бы) и вот, вполне решается практические любая задача из css (он же создан для css, вроде бы).

и очень сильно уменьшает количество CSS кода

Переводя его в портянку классов html, большую портянку html ;)

Поигрался, руками css быстрее писать, чище и меньше, ну и задача решается как раз не те ~100%.

А ну да, там еще надо бы плагинов понаписать на js, т.к. не все css классы реализованы, а потом еще плагинов и еще, и все равно не хватает классов, да что ж такое... ;)

[Михаил Р.]

Виталий Першин,

Мега-мозг в этот момент делает большой взрыв...

Ну так я тоже на это повелся, вроде бы замечательная технология, прошел год, я вернулся на css modules и ванильный css/scss. Оказалось, что старперском css получается писать быстрее и чище, как же так...

[VolgaVolga]

Михаил Р.,

портянку классов html

Не без этого. Однако мне помогает преодолеть идиосинкразию к верстке.
Дело вкуса, как говорится.

[szQocks]

VolgaVolga, зачем вообще какие-то tailwind классы и т.д, если можно просто юзать компоненты на sass ?
с таким подходом как минимум даже лишнего класса не будет в html

tailwind очередное пропиаринное говно как и vite

[szQocks]

я даже не понимаю нах юзают бутстрап в новых проектах, ладно сетка раньше была - хорошим решением, но щас то на кой фиг он сдался, понимаю если ток поддерживать старые проекты которые написаны на бутстрапе

[VolgaVolga]

szQocks,

зачем вообще какие-то tailwind классы

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

очередное пропиаринное говно

78 000 звезд на GitHub не согласны.

[Михаил Р.]

VolgaVolga, кстати, предположим я обычный верстальщик, как мне в tailwind быстро добавить своих классов с нестандартной логикой? Неужели нужно написать плагина на js? А если я не умею в js, да и лишних часов на вникание "как это работает" у меня нет, то как быть?
szQocks

с таким подходом как минимум даже лишнего класса не будет в html

Мой рекорд, 32 класса у 1 html элемента (media запросы нужны были для разных css свойств).

tailwind очередное пропиаринное говно как и vite

Щас на vite налетят, хотя я с Вами согласен.

я даже не понимаю нах юзают бутстрап в новых проектах

На старте - быстро, а когда надо кастомизации добавить, особенно в js - выясняется, то руками с нуля написать быстрее.

[Михаил Р.]

VolgaVolga,

Я, мягко говоря, не искушен в верстке и для меня это был глоток свежего воздуха.

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

78 000 звезд на GitHub не согласны.

В казино выигрывает 51%, "разве могут половина народу ошибаться"? ;)

[VolgaVolga]

Михаил Р.,

нужно написать плагина на js?

Не нужно никаких плагинов - добавляйте свой класс на здоровье.

В казино выигрывает 51%

Если бы.

[Михаил Р.]

VolgaVolga,

Не нужно никаких плагинов - добавляйте свой класс на здоровье.

Ну я имел ввиду класс посложнее, вот один из примера (из древних закромов):

[VolgaVolga]

Михаил Р., круто. Но использование Tailwind не исключает некоторых мест на "старперском css".

[szQocks]

Михаил Р.,

На старте - быстро, а когда надо кастомизации добавить, особенно в js - выясняется, то руками с нуля написать быстрее.

да может на старте и быстро или для мелких проектов, но когда дело доходит до переопределения стилей, там начинает дерьмо всплывать с этим приоритетами стилей, это дерьмо всплывает как с использование bootstrap/tilewind/css-in-js и подобных вещах

css-modules + webpack + sass ( + sass компоненты ) + бэм , а для сеток сейчас те же гриды справляются на ура и шаблонизатор если нужно = топчик

[szQocks]

VolgaVolga,

css-modules + webpack + sass ( + sass компоненты ) + бэм , а для сеток сейчас те же гриды справляются на ура и шаблонизатор если нужно = топчик

[Михаил Р.]

VolgaVolga,

Но использование Tailwind не исключает некоторых мест на "старперском css".

Вот когда "не исключает" накапливается слишком много, и в итоге эти много "не исключает" все равно не могут решить все задачи - выручает тот самый классический css. Ну а если нет разницы, то зачем...

[VolgaVolga]

Михаил Р., кажется, обсуждение пошло по кругу. Для меня разница в том, что только 10% задач по верстке требуют "классического CSS", а 90% бустятся более приятным и быстрым способом.

[Deita]

VolgaVolga,

78 000 звезд на GitHub не согласны.

Согласен, 20 000 уже считается много и стоит внимания, значит какоето полезное изобретение как правило. А если 70 000 то это вообще нечто крутое

[Виталий Першин]

[Влад]

Виталий Першин, Отличные модели одного и того же велосипеда! Те же яйца, вид сбоку )))
Я выступаю за чистоган!

[VolgaVolga]

Я выступаю за чистоган!

Влад, это пока медиа запросы и псевдоклассы не понадобились. ;)

[Влад]

VolgaVolga, да какие проблемы? быстренько накалякаю ;)

Answer 3

[Вова Дружаев]

Называется frontend roadmap 2024
https://www.geeksforgeeks.org/frontend-developer-r...