Комментарии 87
Что бывает когда все написано на flexbox и не формирует в статичном потоке четкие контейнеры и обертки с фиксированной высотой? Все разваливается и едет — в самых неожиданных или вполне ожидаемых местах.
Хорошая шутка.
Без флекса ничего не едет, точно. Вот как прописали всему фиксированную высоту — так с тех пор и не едет. Зум в браузере поменяется? Шрифты клиент заменит? Не. Не едет.
Ну а что у человека текст из блоков выпадет или пропадет — это неважно. Главное ведь что не едет ничего.
Над этим можно было бы даже посмеяться, но когда в реальности тебе говорят, что CSS с сотнями calc() (а то и без них, просто ни одно число нельзя в отдельности поменять, ибо разметка летит) это прекрасно, а флекс это фу-фу — тут на самом деле оплакивать надо, способности некоторых отдельных верстальщиков.
Это даже не говоря про то, что зафиксировать размеры флекс-блока — нисколько не сложнее, чем сделать то же в отношении простого статичного блока. Но куда уж до таких тонкостей, когда главное "простые классические приемы" ввернуть.
ЗЫ: Я бы и по остальному тексту приложил, но когда тебе предлагают в 2021 году в пример Flow — это сильно смахивает на толстый троллинг. Да и SC, надо сказать, сильно небесспорная инкарнация CSS-in-JS, чтоб выискивать минусы именно в нем. Но общая мысль текста "ну прост вы тупые и не можете делать сразу всё правильно через простые буковки (БЭМ), ишь чё удумали со своим переносом стилей в код" — она тоже… великолепна. Как говорится, пацаны-то и не знают — нет чтоб просто делать всё правильно, а неправильно не делать. Сидят усложняют чё-то.
А Вы обратили внимание на выпад:
но при этом ты хочешь чувствовать себя разносторонним профессионалом на фронтенде — возможно, пора меняться, пробовать что-то новое
ЧСВ зашкаливает. Д’Артаньянщина. Давненько я такого не видел.
Не Д’Артаньянщина, а Гамбарянщина)... Да мне не жалко и "какой есть", от себя не убежишь.))) И за "Давненько я такого не видел." - искренне - спасибки! Ради такого каммента стоило убить выходной. Согласен - скучно все и не цепляет. Я вот на Хабре - ни разу каммента не написал, только четыре уже статьи. ))
Ого, ожидаемо - понеслась выставка тщеславия "знатоков CSS"! ))) Если честно, ваш коммент сложно воспринять в 3 часа ночи - ибо поток сознания некоторый... Но, во-первых - у меня никогда и ничего не "едет", хоть с SC, хоть с Модулями, хоть с чем - потому и пишу... Во-вторых, кажется вы передергиваете - про "2021" - точно - в самом начале же написано что статья переработка реального старого - несколько лет прошло - код-ревью... А можно вашу статью прочитать какую-нибудь чтобы у меня тоже забомбило, или проектик какой самостоятельный поглядеть необычный?
А можно вашу статью прочитать какую-нибудь чтобы у меня тоже забомбило
Вам для этого комментария вроде хватило)
Если честно, ваш коммент сложно воспринять в 3 часа ночи - ибо поток сознания некоторый
Вообще, было бы хорошо конструктивной ответить
Простите за мою неконструктивность, но перечитывая ваш каммент - никак не могу сконцентрироваться, вдохновиться и решить что именно и насколько подробно отвечать - и если отвечать, то надо писать длиннющую простыню на пару часов - еще одну статью по сути - со мной всегда так... Да и минусуют меня за неконструктивность и ЧСВ... Вот, смотрите, я когда черновик статьи стал собирать - там "похожие" показывает - вот с этой угорел вообще https://habr.com/ru/company/vk/blog/319956/ - правда старенькая, но пишут что SC - это вообще венец эволюции CSS!!!???? Что дальше?... Вот даже в технологиях - мнения, опыт - разные, а верстка так вообще достаточно гуманитарна, за что ее и люблю всю дорогу, например...
С каких пор flex layout запрещен к применению в "крупных лейаутах"? При этом упоминая в одном предложении IE6-7-8-9 и grid-layout. Мне кажется автор просто не умеет готовить flexы, и теперь всех уговаривает ими не пользоваться, потому что у него все едет.
Особенно учитывая то, что относительно недавно гридов толком не было, и приходилось делать сайдбары либо на flex, либо на float)
Ну ок, наверное не умею... )) Курсов не кончал никаких, чисто гуглил только бегло по верхам)). Ехало не у меня, а в чужом проекте на который был написан ревью когда-то, послуживший основой... А насчет сайдбаров вот помню какое-то время назад переписывал за коллегой с гридов - на старый-добрый паддинг с relative/absolute - так удобнее всего мне кажется.
Вы бы, тогда, хотя бы поясняли свою позицию. Чем удобнее, в сравнении с гридами?
На самом деле - надоело уже метать биссер перед ... хабровчанами... Вот эти минусы все - я ванговал, конечно, но все равно растраивает - "тупая толпа" и тд... Но раз уж вы берете на слабо - потратил 10 минут и написал показательные примеры - не для того чтобы вас убедить - просто ради развлечения. Итак - пишем на HTML/CSS/pureJS - простейшие пример сайдбара:
1) Для начала - на гридах - думаю без объянений все ясно? Клиенты и дизайнеры очень часто хотят "чтобы была какая-нибудь анимация", правильно? Нажмите на кнопочку: https://jsfiddle.net/1jmfeb6d/44/ - дошло, нет?
2) Дальше - пишем 2 примера - по классике - железно-надежным дедовским способом который до сих пор лучше всех:
relative/absolute: https://jsfiddle.net/90xwfc8z/24/
и flexbox: https://jsfiddle.net/26dtur4j/17/
И тут и там все хорошо и анимация - пашет и даже на флексе - кода CSS - чуть меньше. Но это только кажется. Давайте попробуем чуть приблизить примеры к реальности и добавить контент и в меню и в "тело":
c relative/absolute - нам просто надо сделать relative/fixed - это будет удобно и часто так бывать как раз и "в адаптации" - на гаджетах: https://jsfiddle.net/9omr76tb/51/ - все хорошо!
и flexbox: https://jsfiddle.net/qykdnw31/25/ - дошло?
Достали, реально!!! Лучше бы азы учили и практиковались чем камменты строчить - теша свое ЧСВ.... (((((((((
Ну как и предполагалось, вы имеете весьма скупые познания о flexbox. Чтобы анимация сработала достаточно добавить transition по min-width. Лучше бы не позорились, выставляя из себя д'артаньяна..
Хахаха, да ну кэп?.. Речь не о анимациии - проблема с анимацией была продемострирована как проблема с гридом, очевидно же. Добавить min-width в transition - я просто забыл - спать пора, а вы как "суперзнаток сеток и флекса"))) (умора) уже немного прокололись, так как должны были сказать что это грубо, "непофлексовски" и следует использовать flex-shrink: 0; для .page__sidebar вместо min-width в 2ух селекторах!!! Я же сказал - 2) - делаем "понастоящему" и добавляем контент! Пофиксите разную высоту у сайдбара и контента при скроле? Если не ответите - буду заслуженно считать вас ... сами знаете кем?
https://jsfiddle.net/fp96rq3L/
Код ещё больше сократился.
Надеюсь публичные признания, что вы были не правы будут? Хотя вряд ли.
Нет, кэп, вы пока что достойны только унижения, имхо - извините, но это ради вашего же блага! Вы еше не дозрели, видимо, не много до необходимого инсайта, да и некоторые непроходимо на него бывают вообще не способны. И я вас еще только подвожу к нему - ибо то как пафосно вы юлите при этом - ну просто очень забавно... Вы серьезно считаете что align-items: stretch; невозможно нагуглить сразу за один запрос "сделать блоки одинаковой высоты на flex"? Тайное знание какое-то, доступное избранным? Cиндром Даннинга-Крюгера? Давайте просто проанализируем UI/UX? Контент, требования немного изменились - в левом меню, например внезапно появились оверглубокие вложенные списки - контента может становится ну очень много. Дизайнеры хотят чтобы пользователь мог контролировать и "всю страницу" и "меню" - отдельно - когда овердлинные списки раскрываются - они не должны влиять на контент. Вот у вас же осталось правило:
.page__sidebar { ... overflow-y: scroll; }
Зачем? Оно же не работает и не будет работать с решением на align-items: stretch; и flex-basis??? В моем органичном примере с фиксед - все с самого начала так и есть - "хороший юзабилити" - может слышали о такой вещи - мы вообще - реальные специалисты - именно этим и занимаемся - "работаем для удобства пользователя", прежде всего, а не абстрактные примеры пишем на модных технологиях...
Так вот - тот кто уже окончательно сел в лужу - пару раз оскорбив при этом человека с более глубоким и разносторонним опытом опытом который только пытался помочь зашореннуюму сознанию с завышенным ЧСВ - вопрос? Как можно в вашем последнем идеальном флексе "вернуть скроол в меню" и тем самым улучшить пользовательский опыт - сейчас в нем очевидно есть проблемы - например - пункт меню в конце списка - контента мало - либо то либо другое блокируется - нужно скроллить?
https://jsfiddle.net/8ocysztu/23/
Жду.
Вы сами запутались и других путаете. С чего вы решили вдруг сделать sidebar фиксированным отдельно живущим от контента?
overflow-y: scroll; - забыл убрать
Если уж вы хотите делать фиксированный сайдбар, то тут естественно flexы не подходят, да и гриды особо тоже, тут напрашивается position: fixed.
В целом с вами всё понятно, продолжать дискуссию с д'артаньяном, не вижу смысла.
Ну и на всякий случай вот вам решение на флексах:
Вы в третий раз оскорбляете меня и тем самым показываете с кем и что именно понятно. Вы даже не читаете толков коментариев в дисскуссии и тут уже просто отмазываетесь - "специалисты" "с низкой ответсвенностью" - так себя и ведут: 1) речь изначально шла о лучшей технологии для разметки лейаута с сайдбаром 2) на гаджетах он и так чаще всего - фиксед - то что вы это не понимаете - значит нет реального опыта, 100%...
Обычно на странице бывает еще и футер. Добавляем в мое решение - просто добавляем контейнер и стили для него - и пусть он будет даже с "модным" position: sticky; (тоже выучили "такое сложное"? - но у меня вот в Эдж - "моргает") https://jsfiddle.net/48jesqLn/18/
А вы что будете делать? Еще обертки добавлять и модные правила?https://jsfiddle.net/u8jdhv90/50/
Может уже просто признать что вы ... ? С низкой ответственностью?
Эк бомбануло, так, что уже можно и взаимоисключающими параграфами начать крыть.
А вы что будете делать? Еще обертки добавлять и модные правила?https://jsfiddle.net/u8jdhv90/50/
Статья выше:
Совет 2. Не «экономте <div>-ы»! Формируйте контейнеры-обертки, блоки, ну, или — вводите общие компоненты.
Когда аргументам не хватает убедительности — можно возмутиться, что флекс у нас не умеет одновременно в строку и в столбик укладывать, да?
Передергивание чистой воды - в статье речь о стиле когда "вообще скелета и БЭМа-разумного нет"... А тут как раз пример из самого первого пассажа - "для разметки крупного лейаута - выбрали флекс - всплыли требования - крутим дополнительные контейнеры, все усложняем - где-то чтото начинает плыть и тд" - все как раз вот четко "по тексту"... Так ведь еще и потом в адаптации - автор начнет это все "отменять" - оставляя "чудокорячный флекс" только на десктопе, а для гаджетов отписывая "как у меня везде" - не излишне, эффективно? Для того чтобы делать сразу правильно и просто - нужно "знать где подстелить" или набивать шишки, да... Но в комментариях они не набиваются смотрю - бесполезно, тролли лучше знают и тд...
Да да да - о том и речь - в контексте фреймворка оно еще и точно будет в разных файлах, компонентах, свойства начнуть терятся и тд - вот эта вся мрачная история о которой в статье и рассказывал... По сути - мы вместо простейшей надежной и легко модифицируемой в самом критическом случае конструкции: fixed у одного элемента - и паддинга у другого - и обычного статичного потока с которым легко дальше работать - устраиваем цирк: - везде флекс изза которого мы начинаем "крутить обертки, добавлять свойства" и тд... Гореверстальщики.
@JustDontпоэтому продолжим развлекаться, а то видимо непонятно - обычно у нас еще и бывает фиксированный хедер у "всего сайта", правильно? Давайте добавим - в моем случае мы опять - "просто добавляем элемент - фиксед и паддинг основному контейнеру-странице":
https://jsfiddle.net/1rp65Lgo/
А у вас с флексом "с самого верха", вангую - еще оберткИ и сложность? )) hhttps://jsfiddle.net/on7qtsze/2/
Жду.
Заметьте, у меня структура сейчас - линейна - и модификации - практически не добавляют никакой сложности в структуру/стили, почти не затрагивают остальные элементы - все очень просто и понятно:
<main class="page">
<header class="page__header" />
<aside class="page__sidebar" />
<section class="page__content" />
<footer class="page__footer" />
</main>
"Противоречие" - у вас в головах. У меня - опыт... Жду примера?
@JustDont и у вас, кстати в последнем примере - бяка-косяк "с обшим скролом страницы - в правом нижнем углу - с точки зрения UI - фиговенко - дизайнеры придерутся:
Плюс, конечно - еще расскажите насколько просто будет "мигом" перепилить все вот так: https://jsfiddle.net/oh3q7bue/35/
Ушли плакать, чтоле, @PaulZi???
Зачем кормить тролля? :)
Если нравится можете и на таблицах верстать, кто вам мешает.
Имхо, не только "Верстальщик", любой фронт должен уметь верстать на всем вообще - в том числе и на таблицах - в любой момент может понадобыться письмо - иначе он не фронт, а как вы - "флексер"-мракодел...)))... А опытный фронт - еще и обязан понимать - что именно и на чем уместно верстать - чтобы "потом не возращалось", не было проблем с внезапными хотелками и тд и тп...
В некоторых простых случаях для сайдбара для modern bro - допустимо применить флекс, конечно. Но простая статика - до сих пор - проще, надежнее и гибче. "Хакатон в песочнице" - вы с коллегой-флексером не вывезли. Если забавляться с этим дальше - совсем захлебнетесь - это уже очевидно - у меня 4 элемента в блоке, а у вас - понеслась по кочкам... А вспомните - начиналось то вообще "с грида", который оказывается "просто не анимируется"... ))) Поэтому тролли - это вы.
Смысл моих "поучений" выше в том, что опытные специалисты - которые каждый день имеют реальную боль - прежде вот от вот сомнительных экспериментов таких вот безответсвенных заносчивых комментаторов - делают просто и надежно с одной стороны, а с другой - так, что это можно легко модифицировать - без танцев с кряками, добавлением сложности и тд. А такие как вы - нахватавшись "модного" по верхам - лепят всякое - "лишь бы лепить". Как я заметил часто "ради своего экспириенса" - в ущерб проекту, результату, нервав и времени коллег... Ведь потом работодатели - зовут меня чтобы я вот это все вычищал и тд... Профессионал - не стремиться "выпендриться", а делает 1) надежно 2) гибко.
Это не про вас.
То что 2 блока внутри одного можно разместить по горизонтали с помощью:
1) классически - флоатами
2) с падингом "изъяв один из потока" - relative/absolute или fixed - как вам все равно придется сделать потом чаще всего для гаджетов
3) через inline-block - нюанс - без пробела между блоками в разметке - так наверное не умеете вообще - а я так много лет сетки писал "не только для modern", например https://github.com/ushliypakostnik/svelte-scss-router-i18n/blob/60f94e589f3f8b07771c693a58d67d691bbf11d4/src/styles/core/_grid.scss#L1-L66
4) флексом для modern
5) гридом для modern
Известно "почти всем" - сегодня - особенно 4 и 5, к сожалению. Проблемы начинаются потом, когда контент/требования начинают менятся, вы пишете гаджеты где ваш флекс уже не уместен и тд и тп... Человек с опытом - сделает сразу тупо просто и гибко при этом... А "безответсвенный" - будет дальше танцевать с бубнами для того чтобы выгородить свою несостоятельность...
Так что именно для анимаций флексбокс — объективно не самый лучший выбор.
Другое дело, что пример всё-таки специфический, а в статье утверждения звучат намного более глобальные…
Речь не только об анимируемости гридов и флексбокса... И чем это пример "специфический" то? Это самый как раз простой "старт", "рамочный прототип" сайдбара и даже "немного, чуть в развитии" - накидали блок и 2 элемента - решаем какой способ позиционирования использовать, что надежно и легко анимировать, как будет вести себя при разном контенте... Я же вот просто уже много лет - каждый день подобное пишу ручками и переписываю за вот такими "комментаторами" - от зуммеров-реактеров до престарелых фуллов так и не научившихся верстать - ((((... Ну и спор был, забомбило у массовки по поводу как раз гридов - которые вот действительно "просто не анимируются" тупо в данном случае как надо... Потом - сообразив что поплыли - "знатоки флекса" "уцепились за флексбокс" - но и тут в реальности проблем дофига - а мы только начали пилить минимальный пример... Такой сайдбар надежный (что есть собственно - "крупный лейаут") - делается "как деды делали" - вот так как я показал. Тем более что панель-меню еще - вообще и так должна быть [чаще всего] именно фиксед на гаджетах - "ездить" и "над контентом"... Но больше я писать сюда не буду походу долго - надоело пачкаться - оно того не стоит, мне за это не платят и противно вообще - как будто "во флекс наступил"...((((
Но вообще "история с сайдбаром" - да - очень показательная - в контексте общего смысла статьи - азов не знают - зато - флекс везде вообще, хуки на реакте, мрак на таилвинде и прочая ересь. А как "панель сбоку надежно привесить" - не понимают. Начинаешь объяснять - понты... Тьфу вообще...
У меня к вам развивающие рассуждения, не по теме.
Вы пишете довольно грамотные вещи, но очень многословно и с огромным количеством не всегда понятных идиом. Сложно читать.
Ещё.
примеры на jsfiddle ещё сильнее отпугивают зрителя, потому что там разработчики забили на поддержку смартфонов, и поэтому там сейчас нечитабельно даже в ландшафтной ориентации.
Я уверен что до моего комментария дочитали процента 3 людей. По выше обозначенным причинам.
Ну раз не для того, чтобы меня убедить, то я даже читать не буду эти простыни 🤣
Бла-бла-бла https://habr.com/ru/post/587674/comments/#comment_23687996! Пишите больше камментов! ))))))
Беда в том, что оно так не работает.
"Тупой логичный" CSS никогда не DRY. Просто потому что инструментов для этого нет. Итого вы написали тупо и логично, а дальше сидите меняете исключительно через полнотекстовый поиск по особым комментариям-меткам, которые вы расставили (расставили же? нет? упс) в тексте, чтоб в 100500 местах поменять один и тот же логически связанный параметр.
На этом месте кто-то уже должен потирать ручки, готовясь написать "но у нас же теперь есть css variables!". И да, есть. И с ними и вправду становится немного легче, но не сильно: во-первых, для них нет нормальных средств отладки, понаворотили стилей с переменными и несколькими уровнями их перекрытия? Ну вот и разбирайтесь сами же, если что-то пошло не так. Во-вторых, нет средств раннего выявления ошибок — опечатались в имени переменных (а их будет оооочень много) — ну, сами виноваты, что сказать. В-третьих, за помещением переменных в правильный скоуп — следить нужно самостоятельно (соседние блоки в некоторых случаях могут нуждаться в инфе из переменной блока, а в этом случае её придётся вынести в некоторого общего для всех родителя).
Итого оно есть, но нормально не масштабируется, и попытка применить css variables для написания css без повторов — на проекте нормальных размеров тоже превращается в ад, просто другого сорта.
Итого в пределе вынос css в код через css-in-js таки как-то работает (если взять нормальные инструменты и применять по назначению), потому что тогда стили подклеиваются к вашим "тупым логичным" компонентам, и всё плюс-минус нормально. А не существуют в виде чего-то отдельного, со своей модульностью (не обязательно совпадающей с модульностью компонентов) и своими проблемами.
Я смоютрю вы все еще хотите конструктива))... Кратко: нет, вы ошибаетесь - второй абзац целиком ошибочный-ложный, вероятно нет опыта, но пытаетесь как-то аргументировать чтобы оправдать такой-же ложный-ошибочный и недостаточно компетентный но насегодня вполне "мейнстримный" вывод в третьем. Как и все остальное - препроцессоры и компонентность - тоже "нужно уметь правильно готовить". Прочитайте если хотите разобраться мою предыдущую статью https://habr.com/ru/post/582638/?
Пытаться одновременно быть "за" препроцессоры и "против" CSS-in-JS — это удивительнейшее двоемыслие.
С учетом того, что делают они плюс-минус одно и то же. Если вы возьмете нормальный CSS-in-JS, а не решение, в которое помимо этого еще полмира запихнули, как в SC.
Я скорее - практик, коллега. И мне в моем адовом аутсорсе часто приходится писать и на том и на этом, на самых разных проектах... Дьявол - в нюансах, большая часть которых всплывает когда вы на этом пашите и горит и тд... "Делают одно и тоже", но по-разному же - об этом и статья...
Я думаю, что не сильно ошибусь, если скажу, что тут в комментариях все практики. Едва ли кто-то из присутствующих сидит и пишет свой очень нужный тулинг для CSS, или пребывает на подобных архитектурных орбитах по каким-то другим причинам.
И вот моя практика — она как раз в том, что препроцессоры на практике могли бы работать (возможности все есть), но никогда не работают. Потому что человеческий фактор и очень уж легко все эти правильно выстроенные через препроцессоры (и/или БЭМ, или любое другое далекое от инструментального контроля решение) структуры просто сломать или постепенно испортить мелкими изменениями. Нанимать отдельного человека, который бы охранял стили от ухудшения и поломки структуры — это никогда не выход.
Ну это вот очень избитая точка зрения, говорю - еще под первой статьей пару лет назад можно найти такие выкованные опытной болью убеждения фуллстеков-тимлидов и тд... Вывод сомнительный крайне - и это очень часто как раз и есть, имхо, главная проблема команд, целых фирм в плане фронта - ниумеем, нипалучается, но и "знать не хотим" - дизайнеры в своей писочнице, мы мракоделим вообще как хотим, джуны - наверстают в компонентах... И все это "работает" только в определенных условиях - спокойный продукт-долгострой, простая вьюха... Чтобы реально хороший дизайн сделать - нужно "отдельного человека" нанять или можно просто - "на Бутсрапах" вывезти? Устал спорить, честное слово...
Итого вы написали тупо и логично, а дальше сидите меняете исключительно через полнотекстовый поиск по особым комментариям-меткам, которые вы расставили (расставили же? нет? упс) в тексте, чтоб в 100500 местах поменять один и тот же логически связанный параметр.
Если у меня будет задача иметь именно в коде CSS единые константы для всего интерфейса (грубо говоря набор констант из дизайн-системы) — я подумаю взять препроцессор и воспользоваться константами. Они решат эту конкретную задачу. У них будут человеко-понятные имена (на опечатки линтер проверит), будет сразу понятно, что это, откуда и зачем. Возможно от этого код даже станет еще более понятным, чем был, т.к. некоторые логические связи между компонентами станут явными. Так что пример как-то не в тему моего комментария.
CSS custom properties дают другой функционал, работающий в реальном времени, очевидно отличный от констант препроцессора. Иногда он нужен, иногда — нет. В моей практике почти никогда не нужен, т.к. состояния компонентов задаются классами для состояний компонента, которые формируются на этапе разработки, а именно рассчитывать какие-то значения в CSS на лету уже не нужно. Хотя могу представить интерфейс, где это может пригодиться. Опять же — вопрос в задачах.
работает (если взять нормальные инструменты и применять по назначению)
По вашему комментарию кажется, что вы отвечаете на вопрос, которого я не ставил. Вы и сами говорите, что инструменты работают, если их применять с умом и по назначению. И я про это говорю. А если не по назначению — то не работают, или по крайней мере не так хорошо, как хотелось бы. И я тоже про это говорю. Так что ваш комментарий вроде как спорит с моим, а вроде как и про то же самое.
Мммм.... я вроде отвечал другому аккаунту... ну Ладно - половина первого, еще кофе не выпил - ничего не понятно... Да - технологии надо по назначению и задачам, все верно, конечно.
я подумаю взять препроцессор и воспользоваться константами
Собственно доведенный до логически завершенного решения препроцессор — и будет CSS-in-JS по типу emotion. Принципиальная разница только в том, что CSS-in-JS может (но не обязан, смотря что и как в стили подставляете) иметь какой-то код в рантайме, а препроцессор не может.
Ну а непринципиальной разницы — куда больше, и вся не в пользу препроцессоров (свой нескучный синтаксис, свои нескучные инструменты разработки разной степени кривости и бажности, своя нескучная возня с тулингом… с какой же "любовью" я вспоминаю старый sass, который требовал второй питон и node-gyp просто для того, чтоб поставиться).
Так что ваш комментарий вроде как спорит с моим, а вроде как и про то же самое.
Да нет, я с вами не спорил. Я всего лишь обратил внимание на то, что подход в лоб с CSS не работает, это таки свой отдельный язык со своей отдельной историей и своими отдельными заморочками (и ваш следующий комментарий про препроцессоры это только подчеркивает), который из-за всей своей отдельности может (но беда в том, что не обязан) неплохо стыковаться с компонентами, а может и не стыковаться.
CSS custom properties дают другой функционал, работающий в реальном времени, очевидно отличный от констант препроцессора. Иногда он нужен, иногда — нет. В моей практике почти никогда не нуженВ моей картине мира css-переменные чаще всего используются для проброса какого-то свойства от блока к элементам. Часто бывает так, что у блока есть модификатор, который меняет некие свойства сразу у нескольких элементов. В традиционном подходе для каждого элемента нужно прописать каскадный селектор от модификатора блока. Это не то чтобы сложно, но может быть громоздко. А если возможны комбинации модификаторов, то последует комбинаторный взрыв. А можно завязаться на кастом-проперти, значение которой и будет меняться модификатором родительского блока.
Не сочтите за лесть, но заглянул на ваши публикации - крайне интересно, круто, великолепно просто! Вы первый человек на которого я подписался в этой помо... на Хабре... У меня профили на профсайтах, кстати, тоже были раньше подписаны "Creative frontend developer", сейчас убрал про "творческий"... ))))
Спасибо, кэп! И останусь при своем мнении что "сухих технических текстов" - нам каждый день хватает в насущных доках с головой... Поэтому, стараюсь вносить свою посильную лепту в этот скучный предсказуемый мир и журнал - писать для вас странные, личные и эмоциональные статьи которые 1) не реклама и 2) не убогая выжимка из очередного геттингстартед "как я тоже развернул проект на этом"... Щас я отхвачу еще минусов, но, походу все "чукчи" делятся на две группы которым друг-друга не понять: писатели и комментаторы, извините!))
Какой-то очень водянистый способ изложения. Почему бы котов и прочие плакаты не заменить на сравнения "Плохо-хорошо" или "Было-стало"?
И чем так плохи flex-ы? Неужто float: left с clearfix-ами лучше? Да и pixel-perfect в эпоху адаптивной вёрстки и экранов разной плотности пикселей немного странное стремление. Тут надо с заказчиками и дизайнерами разговаривать. Обычно в 95% это работает.
Попытка написать супер-универсальную систему приводит к сильному смещению баланса "гибкость-шаблонность" в сторону шаблонности. Типа, бутстрапа. Да, накидать быстро что-то можно, но шаг влево - и ты роешься в документации и стековерфлоу. И это популярная вещь с доками, примерами и сообществом. Не просто так появился ненавистный Тейлвинд (хотя он мне тоже не нравится).
Спасибо за каммент, но картинки, имхо огненные, хотя минус за оформление я уже опять отхватил - ((((...
Флекс не плох к месту и умело приготовленный... Статья написана о проекте в котором как-то удивительно переборно было с этим...
А вот с этим не согласен совсем: "Да и pixel-perfect в эпоху адаптивной вёрстки и экранов разной плотности пикселей немного странное стремление." - во-первых стремление не мое, а некоторых клиентов. Во-вторых - вообще непонятно а чем вам адаптивность и плотность пикселей мешает сделать точно по макету? Просто поставьте плагин и потренеруйтесь - на соответсвующем проекте - где это нужно-важно - это не сложно на самом деле как раз сейчас - делать так чтобы было везде одинаково-идеально.
По поводу "всяких бутрапов" - мой предыдущий текст, взгляните: https://habr.com/ru/post/582638/.
Да, предыдущую статью читал. Смотрите, постараюсь объяснить. Вы сделали своё логическое деление вещей, которое понятно Вам. Но чтобы другому человеку проникнуться этим - нужна внятная документация.
Сравнивая примеры того же бутстрапа, где есть variables.scss, миксины и стили, разбитые по компонентам и Ваши примеры, где есть тоже разбиение, но с другой логикой и под другим соусом - я не понял сильной разницы. Получилось сложно и запутанно.
Мне кажется что вы не до конца поняли основной посыл - это, конечно - прежде всего ко мне вопросы, к моим текстам, согласен... Бутсрап - это набор готовых шаблонов с крайне ограниченной стилизацией. А мой подход сейчас напротив: "никаких бутсрапов - только кастом!") - я считаю что код нужно писать максимально самому и писать аккуратно... Ну ладно, проехали...
Спасибо за каммент! Я с вами согласен и, кажется, совсем не призываю жить без флексбокс!)
tailwind можно не использовать напрямую: можно мержить стили из tailwind-классов в свои.
Да и его назначение больше не в шорткатах для стилей, а в предоставлении документированной css-системы базового поведения. Которую можно переопределять.
Но у tailwind-классов в представлении есть бонус: читая верстку сразу видим ее структуру не обращаясь к файлам стилей и т.п.
А если говорит про ограничения, то это вопрос паттернов использования.
Ну и "в Гугле, Фейсбуке и тд используют - чем мы хуже, да"? На мой скромный взгляд вы говорите какие-то чудовищные вещи "можно мержить стили из tailwind-классов в свои" ??? Что, зачем? Можно пример, пожалйста чтобы я понял о чем речь - я тупой дизайнер вообще с деменцией?...
Дальше еще непонятнее, какая-то посторонняя сомнительная фича чтобы "ее переопределять"? А не проще "все свое" - но лучше не будем - я за день и так отгреб минусов и тд...
Дальше - еще одно таинственное заклинание - о какой структуре то речь? На мой вкус и цвет "хорошая верстка" - должна выглядеть как-то так: https://github.com/ushliypakostnik/ui-library-starter/blob/master/src/components/Input/Input.vue - ну тоесть - не должно быть "никакой структуры о которой нам нужно знать" какбэ - еще и используя некий неудобный левый хромой костыль...
Мне тут один ПМ рассказал что у него любители Таилвинда - постоянно срывали сроки на проектах в ПЯТЬ раз... Впринципе все что мне надо об этом знать...
Вы не знаете tailwind. Не понимаете его. Но почему-то критикуете. Я не буду тут распинаться и что-то доказывать. Точно так же вы не умеете во flex. Этот называется лудитство.
Срыв сроков в пять раз из-за.. CSS? Со слов ПМ? Этот аргумент забивает последний гвоздь в крышку гроба хоть какого-то серьёзного к вам отношения.
А вы не понимаете верстку и фронтенд, судя по всему - играете в навязанные корпоративные игрушки и не имеете ни собственного разностроннего опыта, ни своего мнения по вопросам - ну так воображайте дальше, срывайте сроки, пишите камменты - но лучше все-таки не под моими постами - а то утомили. Очень показательно у кого под этой статьей бомбит - можно просто по акам посмотреть, а кто пишет что "провакационно, но смысл есть", например... Мне совсем не нужно "серьезное отношения" к себе от якобы "специалиста" "любителя Таилвинд". Таких как вы я просто выгоняю сразу с проектов - чтобы не мешали и вычищаю весь код сколько бы его не было - начисто.
Flex он "познал", а... Где вас таких берут-делают то...
Идите троллить в другое место.
tailwind можно не использовать напрямую: можно мержить стили из tailwind-классов в свои.
Это выглядит стрёмно. Вместо нормального цсс там предлагают писать `@apply class2 brder-r-4x sx-dotted some other-21 shit`
Но у tailwind-классов в представлении есть бонус: читая верстку сразу видим ее структуру не обращаясь к файлам стилей и т.п.
Это не бонус. Чем это отличается от обычного подхода? Кроме повышения когнитивной нагрузки такой способ ничего не даёт.
Это выглядит компактно, но дико на первый взгляд.
1. Размеры и отступы. Когда у тебя верстка по сетке и все размеры относительны базовому числу, то уже сам генеришь себе шорткаты xs/sm и т.д. А когда сюда подключается зависимость от брекпоинтов для лучшего адаптива, то без этого уже просто сложно.
А если у тебя сетки нет, то и tailwind не нужен.
2. Цвета, радиусы и другие визуальные части, которые дизайнеры меняют сразу везде: это опять глобальные классы, которые удобно подмерживать.
3. Шорткаты поведения (flex и т.д.). Здесь уже проще: их использование в верстке дает только наглядность во время разработки: сразу понятно что за элемент и как будет себя вести. Это вкусовщина.
Вы разговариваете сами с собой. Чем человек невежественнее некомпетентнее, имеет меньше опыта, тем агрессивнее он старается убеждить всех вокруг "в своей единственной истине" и "самом правильном подходе" - это просто рефлексия и вытеснение компенсирующее ваше нежелание учиться и менятся, экспериментировать, творить самому... Все о чем вы говорите, например - было в вебдизайне задолго до Таилвинд и будет всегда когда этот печальный обморок-недоразумение уже все забудут... Все это - реализуется намного проще и более гибко, эффективно и эстетически удачнее - другими подходами.
Спасибо за каммент! Все так, все так... Тут у меня "вьетнамские флешбеки" на то как много-много лет назад, когда я начинал, конечно же - "с Бутрап" - писал скрипты с джиквери чтобы в ресайзе сетку на кастомный брекпоинт перестроить - вот всякое такое...
tailwind - это про статику. Не нужно условий в js/php: это инструмент для генерации статики.
Это просто добавление слоя абстракции: конфигурируемые утилитарные классы, которые содержат распространенные наборы стилей.
Можно писать точно такой же CSS/SCSS: каскады и т.п.
Но сравнивать лучше с SCSS: мы то же самое можем делать переменными. Только в случае tailwind у нас есть "пресеты" заполненных свойств, которые мы можем применить как элементу, так и классу.
Т.е. мы можем пользоваться сочетанием трех инструментов: css, scss и tailwind-классы. Причем из сборки выкидываются неиспользованные.
Т.е. без tailwind мы пишем, условно:<button class="myClass">
.myClass { border-radius: $border-radius-sm; }
А с tailwind <button class="myClass">
.myClass { @apply rounded-sm }
Или<button class="rounded-sm">
Если обсуждать контекст цветовых схем (тем), то он из коробки решается следующим образом: к элементу добавляются два класса: обычный и второй с префиксом dark:. Переключение может достигается добавлением одного класса в корень.
tailwind никак нас не ограничивает в возможностях, но предоставляет инструменты укладывать стену не по одному кирпичу, а по N сразу.
habr.com/ru/post/508844/#comment_21803906
imho, "фрейвмворки" с их декларативностью задумывались как раз для того, чтобы один раз "привыкнуть" к кажущейся на первый взгляд ментальной сложности, а потом собирать из их инструментария проекты быстрее и эффективнее. причем именно эффективнее, т.к. один к примеру супер верстальщик ушедший с проекта "без фрейвмворка" , ставит его на паузу пока не найдется такойже высококлассный (без преувеличения специалист) , в то время как проект использующий какой либо стандартный инструмент продолжается, т.к. на условном рынке всегда есть "мидл" с соответствующей подготовкой. возможно вы просто как раз тот самый высококлассный специалист, познавший обе стороны, но не осознающий потребностей бизнеса (это весьма субъективное предположение, позвольте ему вас не расстраивать, если оно к вам не относится)
Если честно, то не совсем понял ваш комментарий? Причем тут "фреймворки"? Любая из перечисленных в статье технологий "для оформления" - осваивается целиком за полдня? Я скорее про то что на рынке как раз стало "слишком много" уже "почти синьеоров", ну ладно реально - если фулл, но "чисто фронтов" - которые знают один главный раскрученный фреймворк, имхо далеко не самый лучший, самую дурную технологию для офомления и больше ничего и знать особо не стремяться... Чтобы быть полноценным специалистом - нужно знать и базу-азы, уметь сделать нативно и современные фичи пробовать разные... Это все банально же...
Стек команды всегда будет форматировать стек члена команды и данная статья не будет воспринята командой.
Использующим bootstrap эта статья не зайдет.
Начинающим - возможно поможет, хотя "табличную верстку" они вряд ли будут изучать, как и пытаться понять отличие блочных элементов от строчных.
Стек "солиста", независимо от личной успешности, всегда будет его стеком. При этом неплохо было бы верстальщику-индивидуалу понимать, что в будущем написанное им будет обслуживаемым и масштабируемым, как им самим, так и другими людьми.
Делать индивидуальные работы так, чтобы в процессе обслуживания/масштабирования у других людей не возникало устойчивого желания написать все с нуля, вместо попыток погасить авторские css-цепочки через !important - к этому я призываю коллег, независимо от используемых ими технологий )))
Ну "используюшие бутсрап" - впринципе не занимаются "хорошей версткой" - предыдущую мою статью посмотрите на эту тему - эта о том "что плохо", та - "что хорошо", как надо.) Статья действительно, по моей задумке может быть полезна начинающим, чтобы выбрали "правильную сторону в этом", но совершенно не соглашусь со следуюшими утверждениями: "хотя "табличную верстку" они вряд ли будут изучать, как и пытаться понять отличие блочных элементов от строчных.". Без второго, имхо - вообще невозможно верстать. А письма - пока что еще никуда не делить по сути со своей табличной версткой. В любой момент на любом моменте вас могут попросить сверстать письмо для рассылки - и если вы профессионал - придется предметно и дотошно разобраться, это не сложно и информации полно.
flow? =) статья троллинг, автор байтит на батхерт ньюфагов 👀
Ну есть, наверное, немного, в этом вы правы, конечно - доля "здорового троллинга", имхо - вполне может и даже должна присутствовать в огненно-бомбической статье)... А вот по поводу flow вы не правы - в самом начале статьи поясняется что переработано из реального код ревью написанного несколько лет назад... Да и вот оно меня самого поразило это все - о том и речь...
Да, спасибо за каммент! Походу вообще у многих на Хабре - когнитивный диссонанс от витиевато-размашистого гонзо! ))
Потому что нужно учитывать то, что на ваш текст читатель выделяет какое-то ограниченное количество ресурсов мозга и внимания. И если он не в виде удобного для потребления блюда, а в виде полуфабриката, то его проще дропнуть и переключиться.
Но не примите мою реплику как наезд. У меня нет знаний и компетенции, чтобы оценить техническую сторону, я просто не разбираюсь в теме.
Да, ок, ну а скажите - в скелетную аннимацию вы умеете?
Отчасти да, могу роботов анимировать и всё такое. Забавно, я ваш комментарий прочёл в почте, как раз делая перерыв между занятиями по скелетной анимации.
Ого, офигенно, просто - давайте общаться? Да, можно было бы и в личку задать вопрос, но пусть здесь будет... Да, я по поводу https://habr.com/ru/post/556238/ - ну и там совсем простые минимальные фичи нужны, но которые могут быть интересны соответствующему спецу "для творчества-тренировки"... И я, при этом, даже готов платить чтото адекватное - как договоримся... Технологически в контексте "фронта" тот проект уже не особо актуален - я тут стал на Vue3 + TypeScript - стратегию писать - вот задумал ремейк на Dune 2/2000 "из детства"... Но просто даже - найти выход на человека который может простые модельки красивые делать и анимации для них прописать - это очень ценно - я сам уже давно "не дизайнер" уже похоже совсем! Давайте на днях в телеграм свяжемся - мой ник @ushliypakostnik - напишите мне? Ни по знакомым, ни под статьей о первом эксперименте - под которой было много аплодисментов от коллег - но ни одного "аниматора" - не нашлось...
Со многим согласен в статьи. Но есть огромная проблема в автора - вода:)
Знаете чем отличается полезный материал от хренового, его можно понять и использовать на практике:)
Сдесь огромная проблема с осуствием примеров (вроде только один пример на 5 утверждений) це еслиб я сказал для здоровья нужно кушать орехи, танцевать ночью под луной на кладбище, голосовать за партию Серых и смотреть Игру престолов ну главное зарядки по утрам ведь доказано что это продливает жизнь на примере жителей Японии. Думаю понятен пример? Только у вас ещё хуже выглядит через форму подачи я Дарьтаньян а все остальные долбоебы (довольно честно бывает правда, но вы пишите статью для них и смысл тогда их обзивать !? Це как Моргенштерн только в вашем случае вы тоже не очень разумны )
Спасибо, особенно за сравнение с уё.. идолищем и с Днем Рождения Гражданской Обороны!) Вот тут и тут можно мое никому не нужное музло заценить - я им всю сознательную жизнь и в 2 раза дольше чем разметкой балуюсь! )) Ну я "всегда буду против" и вообще не стараюсь никому угодить какбэ - "я так вижу и чувствую", и, мне кажется - тем и ценно, забавно... Конкретно эта статья, имхо не нуждается в занудных-скучных примерах - "помочь зуммерам осознать что есть еще варики-альтернативы кроме солей" ну и вообще - "первый раз влететь в минус" - ждем вечера )))
О Боже и сюда моргенштерна приплели
Вывод: удаляем React и верстаем на float
Вот вы шутите, а на самом деле иногда плакать хочется и пичаль. Да, имхо для некоторых самых обычных коммерческих кейсов совершенно необходимо уметь на сверстать "нативно" на HTML/CSS/pureJS(ну или jQuery), ну или например испольуя какию-нибудь сборочку https://github.com/ushliypakostnik/webpack-start - престареллый фулл-лаварельщик - еще справиться, а вот зуммеры-реактеры - нет...
Семь простых советов о том, как не надо верстать