Организованное программирование

привет друзья с вами Кирилл Мокевнин ведущий подкаст Организованное программирование сегодняшняя тема нашего хотел сказать занятия CSС и мы обсудим эту тему вместе с Валентином Ульяновым разработчиком онлайновых редакторов аля Экселя Ворда и тому подобного а я подозреваю что даже многие из вас пользовались продуктами той компании в которой работает Валентин но может быть мы немножко об этом тоже поговорим привет да всем привет ребята у нас про CSS ещё вообще ничего не было и это такая конечно сильная прямо фронтендовая тема но мне кажется об этом можно интересно поговорить потому что ССС довольно сильно влияет на нас всех мы так или иначе с результатами всего этого добра сталкиваемся каждый день наверное первый вопрос с которого я начну в принципе знаешь о чём рассказать что вообще происходит в в мире CSС потому что мне кажется многие немножко остались в прошлом потому что долгое время CSS был ну да это набор разных стилей их там добавляли позволяли что-то менять но в какой-то момент же случился довольной кардинальный переход да когда у тебя появились интересные штуки связанные там с анимациями с переменными и вообще я даже не удивлюсь если CSS сейчас является тюрингполным ну фактически языком программирования ну да вот это верное замечание потому что у нас там кто если из таких относительно старичков в годах там в пятнадцатом-шестнадцатом всем этим занимался был были проблемы с коросбраузерностью были проблемы вот с интернетэ-эксплорером то что всё это сильно медленно развивалось вернее развивалось оно ещё там как-то более-менее но из-за старых браузеров многие вещи нельзя было внедрять вот а уже там несколько лет назад как вот ИA умер это всё стало сильно получше то есть ну некоторые вещи уже спокойно можно было использовать да то есть вот это сильно повлияло во-первых что старые браузеры умерли и мечта фронтендеров старой школы сбылась когда у нас сейчас вечно-зелёный браузерн вот это первое а во-вторых то что сейчас появились некоторые инициативы вот в тех кругах кто там среди вендеров среди рабочих групп всем этим занимается которые сильно вот то есть сильно это продвинули и что то есть оно сейчас и быстро развивается и достаточно кросс браузер вот и я как бы дальше могу вот про это чуть раскрыть вот что это за инициатива и что вот повлияло так хорошо а я кстати хотел тебя сразу спросить а какой сейчас браузер вот долгое время действительно и Ешесто был да и наш Ослик был долго таким браузером из которого все плевались и это вообще наверное самая главная тема была для разговоров потом он действительно ушёл chrome всё заполнил сейчас немножко это меняется расклад короче есть сейчас аутсайдер который всех тянет на дно а дай угадаю сафари ну вот э частично в некоторых местах да но ситуация меняется потому что вот как раз сейчас ну можно в принципе уже перейти к этому есть такая инициатива как Интероп в двух словах пробу сказать суть где ребята из браузеров то есть из всех команд по сути основных вот Chrome Edge Safari они собираются то есть выбирают предложения над которыми будут работать то есть сначала выбирают потом всё это согласовывают и на протяжении года они то есть какие-то темы какие-то фичи над которыми они будут работать они и вот на протяжении года они всем этим занимаются да и вот как раз отвечая на вопрос благодаря этому Safari он тоже подтягивается и он даже вот конкретно в этой инициативе в Энтерропе он достаточно себя хорошо показывает вот но так да там баги какие-то отдельные есть то есть сейчас уже так однозначно даже не скажешь то есть нет такого что прямо под кого-то надо всё время там страдать ну опять же я всё-таки фронтэндом ну у нас не стартный фронтенд э работе достаточно вот и я пока таких проблем не замечал но вот э-э то есть скажем так может быть но сейчас ситуация сильно лучше вот прямо жёсткого аутсайдера сейчас не выделишь хорошо а давай вот пробежимся по каким-то фичам то есть всё-таки что добавилось что вот прямо последние годы не знаю изменилось и можно теперь использовать из интересного самые такие последние вещи которые были ну я бы сказал такие геймчейнджеры которые меняют вообще как мы сейчас пишем это контейнер queries ну или выражение от контейнера вот слышал что-нибудь media queries понятно а контейнеer queries как контейнер Qies да это похожая немного вещь но уже она позволяет тебе в зависи в зависимости от размера контейнера как-то менять стили то есть ну там специальная вот типа как пишешь как addдиа то есть пишешь контейнер и там тоже например если там ширина у то есть ширина высота например какие-то aspectation там ограниченое количество свойств у контейнера они там ну зависи какое это условие задаёшь размеру то то есть если оно срабатывает то у тебя применяется вот то что в этом этот контейнер будет вот то есть вот такая вещь и ну оно это вот одно из ну таких относительно свежих вещей да причём оно уже стабильно оно прямо стабильно оно уже везде работает всех браузерах там спокойно можно хоть сейчас в продакшене как это использовать вот такая вещь а можно я сразу уточню перед тем как мы дальше пойдём просто реальные юзкейсы потому что это ведь на самом-то деле ещё гипер всё усложняет что у тебя по сути в каждом контейнере да ну давай грубо говорить какой там аля div у тебя может быть как фактически поведение с адаптивное ты можешь там реализовывать правильно в этом це у тебя получается что у тебя адаптивность теперь не на весь не на всю страничку а на прямо блоки отдельные это очень серьёзная штука ведь она должна была решить какую-то фундаментальную проблему так ведь то есть какиесы где вот прямо без этого никак ну вот да какой-то типичный кейс когда у нас есть например без демонстраций сложно конечно объяснять но постараюсь когда у нас в две колонки идут карточки какие-то и есть сайтбар который выезжает например что его можно открыть либо закрыть вот и соответственно если он в открытом состоянии выезжает то у нас карточки в две колонки ну они там сожмутся совсем ничего неудобно будет смотреть да вот и как раз мы можем поставить э ну и при этом на разных разрешениях допустим этот сайдбар может выезжать то есть медиа выоражение мы этого не разрешим и без джаваскрипта а вот если мы используем контейнеer queries мы можем на тот самый на контейнер в котором у нас этот список карточек поставить ну вот это условие да что если он если он будет определённой ширины он сузится от определённой ширины мы поставим карточки в одну колонку и вот пожалуйста сразу могу добавить то есть если такая проблема была им приходилось решать они решали ну разработчики это джесом скажем так скорее всего да и в этом конкретном случае действительно улучшает но я знаешь что думаю как и любой такой инструмент который появляется разработчикам очень он нравится и они могут просто начать его втыкать уже там где в принципе можно было без этого обойтись и сложность этой штуки вырастет просто экспоненциально потому что у тебя такое количество состояний на страничке как это всё ещё друг с другом взаимодействует не думаешь так про такую проблему не сильно как-то думал вот но но с другой стороны оно же ну как сказать ну если какой-то компонент зависящий от размера контейнера ну он же не будет на что-то другое влиять он эти стили у него будут меняться только у самого и ну соответственно плюс в том что он на другие элементы влиять не будет он только это всё на себе и вот Да ну я имею в виду что у тебя гораздо больше частей которые друг дру взаимодействуют и если тебе раньше ты просто такой ну сжимал разжимал страничку то теперь ты разжимаешь сжимаешь страничку ещё выезжает у тебя эта штука и ещё каждый контейнер может меняться ты не всегда догадаешься что вообще там это изменения есть и за этим надо следить короче ну ладно это такие вещи уже более инженерно процессные чем сама фича но понятно вообще прикольно кстати интересно в таком случае её обобщили до того чтобы заменить media queries для этого или у тебя будет два механизма и то и то это оно отдельно оно совсем отдельно там медиа потому что медиа оно на самом деле не только у тебя про ширину длину там куча ну то есть там ещё куча фич можно проверять в медиажениях там допустим наличие курсора у тебя можно проверять то есть как у тебя это можно проверять в медиа вот этих директиве как у тебя запущено приложение допустим оно так ну серии как ПВА например запущено или там по-моему даже скоро наличие включенного джаваскрипта определять ну то есть там куча куча ви то есть это совершенно отдельные вещи и то есть у как раз наоборот у ну это отдельный вот даже например у контейнеer queries там будет скоро продолжение как такие style queries ну как-то так они называются что можно будет то есть сейчас ограничено достаточно количество свойств от которых ты можешь проверять ну из серии вот сейчас ты можешь проверить что если у родительского контейнера допустим ширина там такая-то или высота вот то есть там буквально штук пять свойств а дальше следующий уровень это можно будет проверить что допустим если у родительского контейнера там зелёный цвет фона то тогда вот перемени какие-то ещё стили то есть там капец короче да я понял да да ну это всё причём декларативно то есть там такие описания да всякие ну да это как обычный CSS как обычный CSS поэтому жёстко ну прикольно о'кей хорошо давай дальше это классная история что ещё из того что ещё вот сейчас прямо в браузерах есть это вот сектор H появился ну как псевдоселектор правильно сказать то есть типа как псевдо псевдовселектор - это вот типа Hover Focus ну через знаешь же да которые вещи пишутся то есть чтобы у нас правило работало только вот допустим класс только приходит работал вот то есть ээ has - это как тоже такой псевдоселектор но он с аргументами и там ты можешь у него указывать э то есть с помощью него ты можешь определить определить тоже что у тебя допустим какие есть а части CSS правил или там другие псевселекторы в родителях например и ну соответственно сейчас как как бы лучше подобрать его объяснение вот правило с оно будет применено если хотя бы один из селекторов переданных в аргумент в H да выберет хотя бы один элемент то есть если у тебя например а попробую сейчас на форме вот какой бы да сейчас примерчик привести допустим вот у нас есть форма и мы хотим чтобы поле какое-то если невалидное там значение оно там красная водка какой-то обвелось вот и соответственно мы что можем поставить что мы можем на это поле конкретное да вот на input добавить э правило с селектором has и в нём прописать в скобочках Pvelector user invalid то есть это будет соответствовать ну что не невалидное и если сложно немного объяснение получается ну ладно мы же обычно форму мы когда форму верстаем мы её в лейбла заворачиваем да то есть лейбл в нём например подпись и в нём инпут ну знаешь же такое да ну конечно ну вот соответственно мм тут цель такая и вот нам надо чтобы у нас вот на этом а обводка появилась на всём лейбле вот на всём там лейбле который вокруг подписи и инпута вот и как раз мы можем повешать что на него можем повешать вот правило с поскольку прокинется а поскольку у нас user invalid псевдокласс прокинется со всей формы и соответственно если вот мы инпут в инпуте у нас будет невалидное значение например какой-то email невалидный то у нас это всё прокинется точнее у нас форма станет user inвали это всё прокинется на lл и в итоге отработает правило на которое мы навесили с То есть посмотреть грубо говоря он позволяет хэсм посмотреть какие псевдокласы и ну или вообще то есть какие-то селекторы есть на родителей вот угу ну правда в этом случае мне кажется то что ты сказал немножко искусный пример потому что как правило у тебя же хоть форма и невалидна то тебе надо вешать это на невалидность конкретного поля то есть у тебя невалидная форма не говорит что все поля должны подсвечиваться поэтому в данном случае скорее всего всё-таки оно будет прямо ещё нужно всё-таки ставить класс на конкретный лейбл или там ну обёртку какую-то над лейблом потому что там часто ещё обёртки бывают например в Бутстрапе у тебя див там какой-то да ну да это имелось в виду что вот ты на конкретном этом лейбле на конкретном лейбле вот такое правило сдаёшь и ну да это опять же сейчас уже детали реализации ну я надеюсь словами получилось донести ну это да ну это такая фича скажем локальная а вот я имею в виду глобально то есть например те же самые переменные то есть я думаю что далеко не все знают хотя наверное сколько они уже существуют и вот то что идёт в эту сторону про переменные не ну просто ну контейнеры да переменные то есть это же прямо сильно изменяет там или А я знаю что про анимацию ту же самую да а ну ещё да про фичи вот например мм из того что тоже относительно Ну просто я к тому что прос опять же сейчас насла будет сложно объяснить но на самом деле там у него очень много кейсов которые ну тоже сильно просто я к тому что благодаря Хезу - это тоже одно из первых мест где мы можем заглянуть наверх то есть мы же обычно все сессии только вниз можем с типа как ну только вниз можем смотреть да тут у нас способ заглянуть то есть а что у нас сверху то есть на отношении применить что-то в зависимости от того если у нас что-то сверху это псевдокласс то есть это на самом деле выглядит описание может оно не супер крутое получилось но на самом деле тоже фича которая влияет в целом на вёрстку ну да да да то есть открывает новый пласт скажем так то есть это не просто там типа добавили новую фичу это новый пласт вообще категорию скажем фич новую открывает даже наверное до сих пор мало кто ещё понимает как это можно использовать да я вот об этом хотел сказать что ну вот ключево что оно по позволяет заглянуть вверх и даже вот ну слышу такой момент что некоторое время подобного не внедряли просто потому что не справились бы по по перфомансу движки рендеринга то есть что ну с ведь с годами это всё оптимизировали улучшали как вот HML срендерится в браузерах и в какой-то момент вот как раз дошли они до такого уровня работы что можно было без вреда для перформанса спокойно вот внедрить ну такую штуку которая смотрит наверх вот как этот хэс да и поэтому то есть тут его как раз я бы его тоже вполне отнёс к тем фичам которые меняют игру как верстай угу я конечно в шоке от уровня сложности который сейчас там появляется и если всё это заиспользовать у тебя никая декларативность не поможет нормально понять все эти хитрые взаимосвязи хорошо угу ну мне кажется не так это только разминка это мы ещё сейчас ну не всё это только мы только начали да из того что сейчас ещё стабильно работает в браузерах это возможность создавать свои каскадные слои то есть ну может слышал там это правило layer про про что-нибудь слышал прор нет а расскажи ну это сейчас это я бы сказал крекая архитектурная фича но она тоже вот из таких ну более фундаментальных которые могут что-то поменять в чём смысл что такое каскад в CSS это возможность применять вот несколько правил на какой-то один элемент да причём ну из разных источников правила да ведь у нас например если мы какой-то один заголовок H1 какой-то просто пишем на странице у нас ведь применяются какие-то дефолтные браузерные стили потом наши какие-то стили и там даже какой-нибудь не знаю инлайн стиль может примениться вот это собственно каскад называется что несколько вещей так применяется и а вот я сейчас начал перечислять когда я сказал браузер то есть есть браузерный стиль который по дефолту а есть наши и вот это как раз такие встроенные разные слои каскада вот а сеть это правило layer оно нам позволяет свои собственные слои объявлять в рамках нашей вот ну нашего всего вот соответственно мы можем то есть прописать лер и там допустим а там какой-нибудь типа базовые стили вот и там что-то что-то себе прописать и серии там на теги что-то накинуть да следом допустим а добавить стиль типа там а components да и вот просто стандартные наши всякие там компоненты аккордены и так далее для них накидать стили угу понятно правильно я понимаю что фактически это обобщение и замена правил н или всё-таки нет ну - это скорее как такой костыль который нам позволяет ну перебить перебить что-то да вот тут про специфично вот оно не связано ли да ну оно не совсем вот про про специфичность я бы добавил что да это как раз помогает вот исправить ту ситуацию когда у тебя ну отчасти помогает вот в этой борьбе специфичности ну как-то исправить в том плане что мы на из серии что сейчас мы можем допустим подключаем Bootstraap мы можем Bootstrap подключить на отдельный слой и тогда он точно никак не будет м конфликтовать нашими стилями то есть мы на там в нижний слой подключаем Bootsraap а поверх него уже на новом слое на пользовательском нашем пишем какие-то свой стиль и вот они инфликтовать никак не будет то есть если мы наш подключаем ниже он ну 100% будет перебивать вот в этом плане как раз плюс вот и то есть и да это такая опять же более архитектурная фича которую надо пробовать надо использовать то есть по по ней нету каких-то пока ну особо паттернов вот как это ну из серии что там это нельзя вот завтра взять там в свой проект вточить и всё то есть это вот скорее такая штука как будто бы есть какое-то пересечение Shadow дом немножко ну это сейчас оно с изоляцией немножко связано но Shadow дом это я думаю дальше можно будет поговорить это отдельная тема уже ну я имею виду что это такой как бы разные как будто бы перспективы при изоляции то есть вот такой такой вот такое вот да в том числе да это помогает вот штука которая помогает сромом изоляции но оно ещё больше как вот ну архитектурный ты вообще свой сес строишь в случае если ты его пишешь руками потому что сейчас же да разные есть способы его писать и вот при когда мы ну да мы мы до этойдём то есть да когда вот ты руками пишешь CSS это вот как раз одна из вещей как вот которые помогает архитектурно его как-то вот по-нормальному организовать хорошо а гриды я вот на примерах ждал помнишь был хайп гриды гриды всё-таки ждали что флекс конечно хорошо но надо же ещё лейаут задавать кто-то даже где-то начал использовать где-то внедрили но я так и не понял в итоге гриды пошли или не пошли так ещё какая-то база гриды - это сейчас вообще база их ну большая часть всяких раскладок сейчас уже гридами делается ну да да возможно даже там тот же уже какой бутрап я его сам сбил со счёт пятый он наверное сейчас там уже ну то есть к тому сейчас это база не не грядов там нет я просто поскольку активный пользователь Бутстрапа там всё равно раскладка пока ну опять же это по разным причинам они же всё-таки должны поддерживать и какие-то и старые истории и так вот ломать с ходу нет поэтому гряды в этом плане не то чтобы прямо ух юзаются я просто как будто бы слышал что их вроде бы сделали но они не пошли в в какую-то там то ли стадию апрула то ли ещё что-то или я не прав и они вот прямо всё Нет ты ты скорее немножко да ты скорее с чем-то перепутал потому что они уже много лет особенно когда отвалился Е они ну просто как ну это база то есть это ну флекс да а вот гриды всё-таки помню что были эти иусы где они об этом писали что типа рановато немножко с гридами конкретно сейчас по индустрии да даже вот тот же Tailйвин который сейчас практически там не сильно уступает по популярности Бotsрапу там гряды ну устроены там просто раскладки да дадада там раскладки на грядах чисто в нём делаются знаешь наверно последнюю какую штуку вот про фичи хотел сказать а то сейчас мы с тобой этот ченджлок такой будем за 5 лет перечислять меня знаешь что поражает я последнее время ну как последнее время короче последние годы стал очень много видеть как чуваки показывают какую-нибудь штуку вообще невероятную говорят: "Это сделано чисто на CSS моназу ну там разные вещи" и вот я правильно понимаю что всё это в сторону каких-то элементов программирования и анимаций вот можешь пояснить потому что как будто бы такие чуваки говорят: "Я игру сделаю" я думаю как можно игру сделать у тебя есть состояние да у тебя есть ну короче тебе программировать надо как это на CSS получается ну вот сейчас да вот CSS вообще в какую он сторону движется ну вот там действительно очень много фич появляется которые в том числе и как будто бы как уже программировать скоро можно будет прямо позно потому что вот то что мы ну не дошли вот доhangло там дальше говорю ещё и функции уже есть черновяки функции что вот ну типа функции на на CSсе дадада и ифы ифы да да то есть там уже всё вот я к чему стой ифы серьёзно ифы ну ну да что-то типа ну ифа имеется в виду сейчас как функция ифа ну вот в сае есть функция if например и которая как не правила if а функция то есть ну ну понятно ну вот да типа как чернарный оператор аналогия вот что-то такое там уже ну вроде как оно есть вот есть прямо черновик уже это в спеке да я к тому что ну да применять вопрос применения оно действительно много чего ну то есть я бы вообще я это как вижу что эти вещи нам позволяют ну часть вещей которые мы на джавакрипте делаем их перенести в CSS и например не тянуть а там библиотеки ну то есть сейчас многие вещи которые раньше тянулись в библиотеке на 5-10 Кб можно сделать одну строчку сисса грубо говоря или тремя строчками вот и вот это одно из хороших назначений где вот это всё может помочь да ну и плюс вот опять же где этой серии применять да например помимо вот такого допустим какие-то демки да красивые это всё можно делать вот и плюс ещё вот про опять же писать рукописный CSS то есть то что немножко уже упоминалось что сейчас мы часто ну не просто руками пишем а с какими-то инструментами вот то как бы это нам как будто бы снова помогает такой ренессанс рукописного CSS вот эти вот фичи делают на мой взгляд ну вот кстати да мы с тобой подобрались к престпроцессорам а и здесь что получается то есть с одной стороны я наверное насколько вижу браузеры внедряют сейчас всё довольно оперативно внедряют почти синхронно то есть у тебя как будто что-то появляется и тут же есть возможность это использовать везде ну опять же это происходит очень быстро и правильно я понимаю что фактически многие же идеи пришли как раз из препостпроцессоров которые они о классные фичи давайте внедрять ну то есть потому что видно прямо что перетягивание идёт да у тебя туда всё это заводится приведёт это или не приведёт к вообще к их убиранию исчезновению или ещё что-нибудь в этом духе то есть есть как будто бы тенденция того что в каких-то моментах может сказать: "Блин а нафига нам вообще есть CSS и дополнительный этап трансляции когда CSS это поддерживает?" Вот да про это тоже могу немножко пояснить то что действительно припроцессоры вот с появлением многих этих фич они немножко актуальность теряют вот но я бы не сказал что их вот уже прямо сегодня можно закапывать да или ну там даже в ближайшие пару лет их прямо можно закапать потому что ну во-первых опять же пропроцессоры какая там ситуация мм раньше их было несколько каких-то более-менее используемых типа там был L там Styйus вот ну и САС да как вроде сам он самый первый по-моему появился сейчас по большей части релевант только САС потому что в отличие от всех остальных он прямо развивается то есть у него там куча скачивания на Payмен до сих пор там больше чем у Лвинда там где-то 16 млн он стабильно развивается то есть там вот если посмотреть по релизам за последние полгода там наверное штук пять было минорных релизов вот и то есть это не просто какие-то там бакфиксы это прямо ну кое-где даже фичи добавляются значимые в него вот уже там у них там даже тулинг есть всякие там спеки свои то есть по фичам то есть всё серьёзно у них там ну какое-то движение есть по крайней мере то есть э к тому что оно живое сами по себе эти инструменты и касаемо юзкейсов то где-то ну в каких-то вещах из серии допустим перемен то есть есть набор фич где CSS действительно он вытесняет да и он уже можно использовать чистый CSS но более продвинутые какие-то места как например те же самые кастомные функции миксины какие-то да вот такие вещи они ну там ещё вот только какие-то совсем ранние черноки есть да и то есть дай бог через только несколько лет оно появится все сессии вот а пока это двигаются в эту сторону получается да так или иначе двигаются вот но конкретно на сегодняшний момент то есть как минимум процессоры могут вот этими фичами помочь да первое и во-вторых вот если к прямо к юскейсам переходить то они всё ещё помогают ну немножко тебе улучшают перепроцессоры да и потом это первое второе они тебе помогают когда у тебя какая-то большая кодовая база много стилей они тебе это помогают организовать потому что например в Сасе некоторое назад добавились такая полноценная модульная система если раньше в Сасе у тебя были импорты которые просто склеивают файлики да то сейчас это прямо модульная система где там у тебя там в модулях приватные члены есть там как-то конфигурация у них продвинутая даже что-то типа динамических импортов есть вот этих модулев да то есть там ну вот такая штука полезная достаточно в этом плане и ещё то есть это второй былкейс большая какая-то кодовая база и третий - это вот как раз для чего-то прямо сложного и нестандартного на CS типа серии там тех же демок там не знаю и там игру какую-нибудь сделать ну или даже там инструменты какие-то вот как я например делал вот то есть для такого они всё ещё подходят то есть резюмируя что да где-то сес выясняет вытесняет актуальность немножко потеряла но они живые по крайней мере САС живой развивается изкейсы они всё ещё есть ну давай пару прямо примеров то есть автопрефиксера например применять всё равно нужно так ты к CS его не применишь а он нужен ну автопрефиксер - это скорее сейчас это немножко разные вещи это процессинг одно один вопрос - это процессингса а второй вопрос - это ну припроцессоры которые ну какие-то вот фичи языковые добавляют языковые фичи условно да и просто это всё-таки разные вещи я бы это разделял да я имел в виду например знаешь что вот у меня в буotстрапе в пятом очень классная фишка есть я думаю что она там много где есть это генерация своих утилит то есть когда например у тебя есть прозрачность да ну вот сейчас в бустрапе это внедрено у тебя есть прозрачность и там там 0,25 50 75% и так далее то же самое высота и так далее но того же не было по-моему для высоты и они сделали очень классную штуку вместо того чтобы просто добавлять ну то есть понимаешь на любую опцию можно добавлять почти там 75% 50 100 и так далее вот и они сделали очень классную вещь ты определяешь просто утилиту говоришь что вот мне нужно с таким-то названием там у тебя появляются вот эти точки ты пишешь там 2550 тра-та-та и он тебе это подставляет как переменную вот это число и ты его в стиль вставляешь и он тебя генерит соответственно в очень небольшом описании например там высота defис 25 высота дефис 50 и соответственно правильный стиль и всё это описывается очень одной компактной конструкцией честно для меня это просто вообще фантастика я не то чтобы такой ЦС-писатель потому что не надо не писать какого костома это встроено в инструменты это делается очень легко на Асса и я этим пользуюсь актуа ну активно потому что часто бывают ну какие-то утилиты которые нужно добавить и тебе не надо костылить какой-то код вот на CSС такое не сделать да ведь пока то есть там прямо надо функции программирования по сути ну да это действительно сделать но просто про то что ты описал по идее это ну то есть в Ботсрапе да забавный момент немножко отвлекусь там у тебя есть и часть как атомиic CS подхода и есть часть ну как обычные просто компоненты вот и часть которая атомик но она находится я бы сказал на таком в прошлом веке потому что современные атоми инструменты они это у тебя на Литу делают они просто на Литу смотрят это называется джит движок они на Литу смотрят ну твою разметку и сами это всё генерируют вот как бы ну то что в Ну да я к тому опять же немножко это отключение вот но конкретно мы сейчас дойдём да да вот а просто но конкретно вот да какие-то такие вещи действительно в CS вот ну то есть то есть генерацию да при процессора вот важно хорошее было замечание они помогают генерировать тебе CSS потому что есть моменты когда тебе нагенерировать надо CSS вот тут действительно да для каких-то в эти это в том числе один из кейсов где они могут быть полезны вот э то есть скорее фичи CSS они больше ну про динамику то есть опять же вот это разные вопросы то есть про какую-то там расчёт и динамику и генерация ну то есть да генерировать пока даже планов нету и серий циклов там что-то типа циклов у них вроде даже в спек в черновиках нету угу короче будем ещё жить со всеми этими делами довольно долго ещё один был вопрос по поводу вариантов создания ЦСА сейчас да давай вот это прямо перед фреймворками важно то есть я немножко живу в какой-то такой изолированной среде потому что у меня там свой проект я много лет этим занимаюсь и мы там в основном пользуемся Бутстрапом и стараемся минимизировать кастом ну потому что давай так для нас CSС - это штука которая не должна нас отвлекать от основной работы вот а есть люди для которых это и есть основная работа и поэтому там немножко другие подходы и мне вот интересно в этом плане как вообще сейчас в принципе люди к этому подходят я знаю что ну это любое берём направление все такие там фреймворки зло пишу сам особенно кстати это касается всяких цэсов больше чем например бэкэнда или фронтенда потому что там без фреймворков ну мягко говоря тяжеловато бывает да и там немножко это безумие а вот в ЦСЕ такого было много что я всё буду там с нуля писать сам вот насколько вот это вот ушло то есть какие сейчас основные способы чего все люди ожидают о чём говорят фронтендеры друг с другом когда про CSС разговаривают ну да здесь тоже могу немножко ситуацию пояснить основные способы сейчас у нас какие можно назвать ну первое - это с написание CS первый - это стандартный рукописный когда мы например по БМУ ну чаще всего по по вот по бму пишем соответственно ну просто вот как-то сами руками правила там как-то это всё разбиваем на какие-то там каталоги и так далее да это стандартный второй - это один самых популярный - это CSSNGS когда мы берём ну там куча библиотек есть на эту тему там для разных фреймворков да что соответственно когда мы вот там как-то в компонентах или вот ну короче где-то в джакриптовых в компонентах это вот всё пишем да то есть самые там популярные - это типа style componen для Реакта есть ещё вот ну какие-то опять же я с ними не сильно работал но вот примерно понимание есть а вот третий некоторые его относят к CSSУ но я бы его выделил отдельно это так называемые scoped scoped решения то есть CSS-модули например тоже сейчас одно из самых популярных наверное вот и также эти механизмы они есть например в некоторых фреймворках встроенные типа по View в swelt то есть изоляция стилей то есть в чём суть этих решений в том что ты пишешь CSS м как обычно и он добавляет сам изоляцию какую-то присборки то есть классы допустим в хэши какие-то уникальные хэши у тебя переделывает и ну там ещё какие-то вещи применяет то есть ты можешь эти стили в компонентах у себя как допустим импортировать как в сецдулях ну я думаю многие сталкивались вот то есть тут почему не выделяется потому что ты по по большей CSS пишешь как обычно вот и на благове разборки уже у тебя появляется изоляция в одноух компонентах вот то есть это такой можно третий способ выделить вот скоп решения четвёртый - это Atomic CSS вот популярный сейчас Tailwind и ну ещё другие библиотеки есть для этого и последний я бы ещё тоже его наверное выделил это как это испольше Shadow дома то есть поскольку там тоже есть свои различные нюансы основные способы сейчас такие я бы назвал ну и плюс наш способ - это просто использование готового компонентного фреймворка где у тебя просто вот а B C соединил чуть ли не визуальных редакторов кстати по Бутстрапуса наверное ты видел их дофигище и накидал и побежал дальше ну да в том числе в принципе ага а вот давай начнём прямо с первого насколько вообще это популярно то есть это вообще считается мне кажется зашквар уже сейчас с нуля писать ну потому что ну это же безумие вообще ну есть такой взгляд сейчас я во многом согласен что да сейчас вот ну есть некоторые сторонники есть некоторые любители CSса даже вот в сообществе которые вот любят писать руками да про зашквар ну опять же не ребят напишите обязательно в комментариях к какому клас какому так сказать группе товарищей вы относитесь потому что я честно ну не знаю для меня это безумие потому что очень много вещей утилитарных которые вот просто за годы выработались и мне кажется что они просто вот ну сетка та же самая да самому всё это делать но вы всё равно лучше не сделаете чем готовые решения но это скорее да это скорее вот ну каким-то большим ребятам которые хотят там свою дизайнсистему библиотековых компонентов ну действительно тут правильно что правильный момент что когда ты у тебя там серия лендит на две странички ты да там можешь это всё вот накидать как ну по бму оно вроде бы даже неплохо работает но да когда у тебя что-то начинается побольше ты у тебя каких-то много продвинутых вопросов и вот не зря в своё время был целый БМЕК Яндекс сделал да что то есть это же не там всё не ограничилось нижними подчёркиванием и дефисами в названиях классов там был целый БМЕК тулинг и всякое такое чтобы там всякие уровни переопределения собрать это без коллизий и так далее да вот поэтому то есть действительно чтобы вот так по БМУ делать это прямо что-то сложное это ну действительно тебе целый тулинг для этого нужен да вот поэтому действительно я к тому что есть люди кто так делает но не сильно понятно насколько оно имеет смысл да вот просто такой писать только бизнесс да то что мы вот единственное что да сейчас как я упомянул чуть ранее вот эти новые фичи типа там каскадных слоёв всякие там ну ещё есть некоторые вещи они как будто бы ну могут что-то как бы новую жизнь в это вдохнуть потому что из серии будет например решены вопросы всякие как раз изоляции у тебя будет нативная изоляция с этими новыми фичами там а ну ещё какие-то вещи да там упрощения поэтому ну тут опять же такая такой вопрос что а нужны практика наработана какие-то паттерны да желательно чтобы в всём этом ну пользоваться в продакшене а вот то есть тут отчасти такой замкнутый круг что пока новыми фичами мало пользуются как бы нету паттернов и пока как бы ну нету паттернов ну мало кто пользуется ну короче вот то есть такой момент то есть да про рукописный верно подмечено что кто-то использует но малопопулярно и сейчас как будто бы прямо сейчас смысла мало Угу так писать но CSS NGS это же как бы по сути же то же самое то есть ты сам пишешь но типа в Джесе правильно то есть там всё равно тулинг какой-то нужен или я неправильно понимаю там всё сильно проще в том плане что то есть там тебе уже надо сильно меньше обо всём этом думать потому что во-первых да там у тебя сразу идёт какая-то изоляция у тебя там например не нужно думать над названием сущностей ну в большинстве случаев ну если как уникальные классы например да опять же чтобы коли не было тебе над этим тоже думать не нужно скорее всего там структура экологов тоже себе не нужно думать то есть да это сильно попроще здесь SNGS но вот какие да если переходить к минусам то как верно замечено там тоже обычно ты ну то есть там есть упрощения какие-то но всё равно ты пишешь его там более-менее ну практически как обычно да вот потом второе из проблем которые там есть - это то что у различных инструментов есть там различные ограничения баги свои какие-то да вот все с СНДже следующее - это то что оно не для каждого стека подходит потому что ну да если у тебя там стандартные спан реакции там понятно это просто но вот если у тебя допустим там Rub какой-нибудь тот же самый да вот ну backст какой-то проект или экзотика типа там Эльма там клоуже скрипта условного ну тыт уже особо не вставишь все CSSNGs да и плюс у них из минусов есть тоже как види можно отнести что есть runнтай решения которые прямо в рантайме у тебя это всё собирают соответственно размер бандла у тебя из-за этого тоже возрастает да хоть сейчас есть такие CSSNGS сошения которые у тебя в билдтайме собирают прямо обычный CSS из твоего вот ну из того что ты там в компонентах понаписал но опять же это не все поэтому такой как бы со звёздочкой тоже я бы ну минусах сказал да то есть и ну резюмируя если то плюсы то что его легко использовать то что там груворя я подключил библиотеку и всё и там тоже Sale components и там ну просто берёшь и пишешь да удобно в компонентах то есть DX более-менее но свои подводные камни есть ну и плюс много готового кода есть которое с вот эти библиотеки то что вот ты упомянул они как раз многие с CSS работают и интегрированы как-то поэтому тут ещё вот такой момент что то есть там и библиотека готового кода какого-то много в этом подходе ну и по сути мы пришли к тому что всё-таки пожалуй подтверди это или опроверни а основной всё-таки способ написания - это атоomic CSS ну про вот основной это опять же про основной - это это спорный вопрос спорный сейчас я бы сказал оно скорее на два лагеря то есть самые популярные - это вот либо CSS NGJS и Scoped решение CSSмодуль ну потому что CSS-модули очень часто используются то есть я там не знаю чуть ли не каждый третий то есть вот скорее основных я бы таких вот выделил три: CSSNGs Scoped и Atomic вот и они ну как бы по процентному соотношению так даже и вот с ходу не скажешь а я что да пропустил я забыл про суп вот эта вот штука это же по сути ну глобально то же самое ты всё равно пишешь всё с нуля у тебя просто решаются какие-то архитектурные там фундаментальные задачи с изоляцией связаны ещё с чем-нибудь но это не фреймворки у нас здесь скорее да в том плане что ну вот те же CSS-модули то тут верно замечено что у них из минусов опять же ты пишешь CSS как обычно просто руками ну то есть это не особо эффективно да они по сути тебе да вот дают изоляцию тебе и то есть да дают изоляцию какие-то архитектурные решения и немножко там помогают вот ну тик улучшают но также да там из минусов что опять же не в каждом стеке ты это себе вставишь и у тебя CSS итоговый собранный он получается далеко не сам оптимально собирается в большинстве случаев потому что там то есть для изоляции у тебя дублируются стили чтобы не было ну пересечения и реиспользования соответственно немножко у тебя сейчас раздувается да хоть там есть какие-то вроде бы ну возможно какие-то плагины для аглификации в Онесборге но это не точно вот поэтому да там у него минусы как раз есть выше перечисленные вот но при этом он очень популярен CSS модуль сейчас я то единственной ещё такой вопрос задам о'кей допустим вот используют они эти штуки пишут сами но ну как бы каждый раз ты понимаешь что вот сейчас надо на флексах написать опять вот наборы классов чтобы можно было их использовать да или при таком подходе люди не так делают они не пытаются строить некую универсальную там сетку или утилиты они говорят: "Вот прямо конкретно у меня тут блок отзывы вот я прямо под него стили нахерачил" то есть какой подход в такой случай опять же используют ээ часто готовые какие-то ну готовые библиотеки много используют я к тому что эти используя эти подходы это не отменяет использование готовых библиотек вот я к чему что чаще да используют какие-то вот киты там типа вот этот материал дидизайн да вот самые сейчас которые популярные и то есть с одним из этих подходов используют Uты да и там уже Тити он по-моему называется вот как-то так или мантин я не помню название его там тоже какой-то популярный его просто на Редите все постоянно упоминают я увидел ну ладно короче есть ещё ну да да просто я к тому что такой в стоит понимать что вот прям прямо с нуля с нуля даже используя один из этих способов редко кто-то пишет как правило вот там в стандартном проекте берут какой-то UI Kit то есть либо берут UI kit и просто его напильником подпиливают либо ещё хороший вариант - это headless UI kit берут то есть без стилей где у тебя просто прописана вся вот логика компонентов серии там как всякие аккордеоны разворачиваться должны как например там accessibility у тебя тоже тоже прописано ты просто его как-то стилизуешь вот и то есть уже вот эти киты их тоже можно различными способами вот этими стилизовать то есть часто оно такое и соответственно я думаю для сетки там чего-то есть просто опять же у меня сейчас нестандартный проект там чего-то подобного нету не да ну просто тогда свой добавлю пример потому что у меня этот кейс используется сейчас вот а понятно что у нас базовый идёт Bootstraap но не чистый ареact Bootstraп потому что сейчас там много где фронтнд уже на реакте поэтому понятно что он за тебя это тоже классно за тебя там решается много вопросов потому что у тебя в компонентах уже проставлены там accessibilлити да и многие другие вещи но например нам не хватало его возможности я одно время думал найти что-то более продвинутое но такого же плана то есть не Tailwi то есть мне надо было такого же плана и я нашёл знаешь что я нашёл Праймреact он в принципе старенький но он достаточно неплохо развивается и мне ещё понравилось как раз то что он только существует в режиме не CSSфреймворка а конкретно компонентов на Реакте это там полезно с точки зрения развития что им не надо там две вещи поддерживать а во-вторых у них есть режим headless и с темами под конкретные штуки то есть я что получается сделал я его к себе добавил в Bootstrap подключил тему там правда тема для четвёртого бустрапа но я посмотрел он выглядит нормально то есть жить можно мне просто самое главное было что я ничего писать сам не буду и всё и у меня теперь как бы есть бонус в том что фактически у меня два я сложил две библиотеки на базе одних и тех же стилей то есть React Boostra плюс Prime React и конечно количество возможностей там с точки зрения ну есть базовые бустраповские понятно утилиты и у тебя бесконечное количество просто компонентов которые вот просто ну типа знаешь в Праймрекреакте есть грид ты прямо вставляешь да передал ему данные и у тебя там всё короче прямо вот всё само это очень-очень прикольно для людей кому нужно вот в таком режиме работать но это сильно больше чем CSС конечно то что мы сейчас с тобой говорим туда заложено просто немеренное количество логики ну да и там об этом и речь что это вот как то что я писал примерно стандартный способ сейчас как пишут что просто берут вот либо прям готовый киIT либо headд и его уже ну там как-то просто с хедласом тут как раз прикол что разные есть возможности ну опять же в зависимости от инструмента есть разные возможности то есть ты headless UIT можешь хоть и рукописом ссом стилизовать можешь хоть атомарным хоть там и где-то CSS вот тут да какой момент так что тут тоже надо понимать люди использовали использовавшие 15 лет назад смеются сейчас нам с тобой в лицо да ну да так в типа у нас всё это было уже да-да-да что ну это да другой уровень что инструментов то что действительно вот XJz Mall тот же самый да вот фреймворк там ну такая же история что то есть прямо хорошие много компонентов которые ты можно просто кинул и всё их снять визовать вот так что да есть такое да ну там есть тоже свои особенности что это всё-таки такие закрытые экосистемы которые ни с чем особо не комплементарны ни к чему поэтому там есть свои сложности всегда поэтому как бы сейчас наверное я это рассматриваю как знаешь такой виток эволюции когда у тебя такого же уровня появляются инструменты но они открыты к соединению с внешними системами то есть они немножко абстракцию по-другому пересобрали то есть раньше вот это была в первую очередь история в себе вот я знаю что молд в эту же сторону идёт и в смысле так устроен а вот праймреакт тот же самый да он такой открыт к тому чтобы с чем-то коннектиться ну и понятно что рукопашки больше тут очевидно но это уже совершенно другого уровня решения да которое тебе просто вот приложение раз и готово и в общем-то почти ничего делать не надо хорошо давай вот мы с тобой хотели про больше поговорить про Атоic CSS это как бы твоя тема да то что ты хотел вот много я наверное даже местами адвокатом дьявола побуду потому что у меня были там попытки и есть всякие вопросики по этому поводу значит Тайлбн он сейчас number one в этом смысле у него там куча классных фич он безумно красивый я из него кстати тырю все дизайны чтобы было понятно у него там классная библиотека компонентов что взял чат GPT забросил говорил говоришь: "Перепиши мне на Бутстрапе" он тебя переписывает и ты радостно пошёл короче вставлять это к себе в проект вот давай про него поговорим а какую проблему он решил и какую не решил потому что вообще-то сообщество разделено и вот этот вот хайп который у него был в самом начале он всё-таки начал немножко ну не то что проходить но появилось много людей которые стали использовать его очень активно на больших проектах и появилась да эти обратная волна она всегда начинается у любого инструмента который активно использует короче много видишь тут всего давай врываться в тему атомика ну да вот про ключевые вот если вопрос какую проблему решает ключевые вот его преимущества да по сравнению там с разными подходами во-первых это то что мы тратим меньшее маслетоплива здесь то есть нам не нужно опять же здесь думать про название сущностей там уникальные там какие названия классов структуру каталогов надо продумывать второе - это то что у нас меньше CSS в итоге попадает на клиент потому что в определённый момент мы часто используем одни и те же утилиты и у нас в какой-то момент стили новые практически перестаёт добавляться вот второе - это то что мы быстрее физически пишем стили потому что у нас ну особенно когда у нас короткие классы да вот эти вот утилитарные у нас переключение между файлом и меньше да то есть всё примерно в одном контексте оно и четвёртый такой неочевидный плюс про который редко кто-то говорит - это что такая что эта история она такая стекгностик то есть ты здесь не зависит то есть ты хоть можешь стандартным там реактом реактовском Spa использовать вот атомарный подход хоть там на PHP у тебя там с шаблонизатором с каким-нибудь хоть даже вот в Эльме да вже упомянутом то есть от СКА оно не зависит ну да это именно потому что это всё-таки CSS фреймворк а не опять же там какой-то праймреact тот же самый это чисто реактовская штука ты её не заюзаешь вне реакта это правда да но тут знаешь что хочется добавить точнее договорить вот всё-таки атомик в чём он проявляется потому что ну так вот со стороны это выглядит как давайте практически чуть ли не под каждое свойство ну где это разумно мы делаем классы потом комбинации просто уже в самом HTМеле опять же упрощённо мы можем всё это комбинировать получая нужный результат или мысль немножко другая ну основа у него простая и идеи то что у тебя есть вот куча каких-то маленьких классов каждый который делает одно простое действие да вот часто применяет одно правило но не обязательно одно то ну смысл именно в их утилитарности да вот что одно какое-то простое действие вот и дальше да действительно ты их можешь уже комбинировать и там есть разные какие-то ну разные практики разные приёмы паттерны как это всё делать так чтобы оно у тебя заявленный эффект ты получил который скажем так продают вот на этих там лендингав OMX SS фреймворков да например но что вот изменилось вот чуваки начали его внедрять да он идёт с дефолтной кстати темой довольно симпатичной и что такие говорят: "Фух нам мы смогли уволить половину команды фронтэнда" или как они говорят то есть бизнес какую в этом тоже пользу видит или они такие говорят: "Ой да нам просто не знаю проще там гибче" что что они говорят потому что гибче чем CSС где полная свобода конечно не придумаешь всё равно какие-то ограничения появляются а ну тут да если опять же переглядить на практике вот во что эти преимущества выливаются то что ну например у тебя уме уменьшается размер стилей да из серии что у тебя был там огромный бандлсэса да например ты переписал условно перевелистал всё на Томарной у тебя там раза в два грубо говоря оно там уменьши уменьшилось ну вот да были подсчёты я вот в одном из своих докладах на фрутенкон про это вот приводил пример где там несколько примеров даже где ребята переписали у них там чуть ли не в два раза оно уменьшилось причём там парочка таких кейсов была да то есть это первое да про то что вот из преимуществ малый размер стилей то есть например ты присал у тебя э быстрее стало всё грузиться уменьшил размер CSса да соответственно второе - это вот что ну выросло скольство разработки про это ну опять же я к сожалению не было пока возможности взять один проект и переписать его из серии там сначала допустим в рукописном CS его написать потом то же самое с нуля в Томарном то есть пока такой возможности не было да я поэтому когда исследовал тему больше опирался вот тоже на опыт ребят да на какие-то ну то есть и на свой опыт потому что я там с восемнадцатого года в теме вот и с ну просто кейсы какие-то как раз вот ребята об этом и говорят те кто перешли что возращает продуктивность поскольку вот тебе не надо например переключаться между контекстами то есть смотреть что а вот ну из серии что ты как вот в БМИ например мы видим какой-то нам стиль что-то стилизовать нужно а нам надо подумать что а как же это назвать например да вот например bмблок - это или элемент условно да вот потом придумать какое-то уникальное имя и так далее и так далее да в потом ну соответственно переключиться пойти написать стили для этого да когда придумал вот тут ты ничего про это не думаешь просто накидал утилит для стилизации и всё оно как бы ну оно у тебя сработало да вот в базовом варианте таком да да давай я ту начну накидывать как значит противник этой части ну во-первых ты говоришь уменьшается размер CSS это правда а но с другой стороны у тебя растёт размер HTМ причём это же критичней потому что у тебя CSС-то загрузится потом а с точки зрения того что поисковик например по SEO загрузит или там просто браузер вот в целом грузит и пчпиды все у тебя HTML насколько увеличивается то есть насколько тут замедление происходит или оно не критичное ну если спойлерить то скорее не критично потому что ну во-первых HTML он когда загружается он стримится во-вторых оно там яху вот у них как основоположники вот атомарного подхода они как-то даже проводили эксперимент про вот замеры ну это больше актуально конечно для рукописности СССА но они проводили эксперименты замера длину класснеймов какое получается при атомарном подходе и при подходе стандартном когда ты вот условно бемовским да то так в атамарном оно было примерно то же самое то есть ну опять же с оговоркой когда мы используем короткие короткие название утилиit потому что вот например в Tailвиin ПМ типа того да а вот если использовать короткие названия да вот как там в моём инструменте как в атомайзе от Яку как раз-таки там это достаточно хорошо то есть HTML не сильно это раздувается это опять же тут видишь очень важный пункт потому что фактически мы сейчас переходим к штуке которую очень контровершал да как говорят у тебя когда ты смотришь такие компоненты и когда вот что-то написали у тебя конечно глаза вот так вот увеличиваются потому что там километровые строчки причём не одна даже вот блок там на 15 скажем строк у тебя количество стилей м классов применённых там не знаю 50 может быть я даже думаю больше я не писал в таком стиле но каждый раз когда я вижу с этим сталки я понимаю там опять же преимущество что и так далее но всё-таки насколько в целом это не тупиковая веть ветвь скажем так развития потому что мм как будто бы это сложно ну вот да я здесь могу ответить что согласен вот эта вещь она имеет определённый порог вхождения что ну во-первых в в Тейлвинде я тоже вот считаю минусом его минусом что у него там длинные вот эти вот названия классный там вообще он как бы про него могу потом сказать но то есть он спроектирован скажем так по заветм Вовки из среди девятого царства вот и там вот эти ну нейминг там никакой да то есть совершенно без скажем так неконсистентный и плюс он длинный вот а когда мы используем короткие название классов там оно то есть эта проблема она меньше то есть она меньше ну у тебя очевидно вот эти поменьше всё-таки как бы классными становятся перх во-вторых то что да когда ты первый раз это видишь вот эти вот заклинания да аббревиатуры а ну понятное дело это непривычно вот и оно да имеет прогхождение то есть оно имеет прохождение и кому-то чисто эстетически оно не подойдёт я здесь согласен ну о'кей не подойдёт так не подойдёт да то есть на рынке разные есть инструменты да спокойно к этому можно отнестись вот но тут в чём смысл если один раз разобраться тем более вот например если говорить про млад да про мой инструмент там сокращения вот эти они составлены по чёткому алгоритму вот и ты можешь один раз в этом алгоритме разобраться да и дальше уже вот эти сокращения свойств их выводить в голове и когда ты то есть тебе не надо зазубаривать ты один раз изучил алгоритм а и дальше то есть тебе не надо зазубривать там 200 всех этих куче утилит да то есть ты пару раз прокрутил какое-то свойство оно у тебя довелось до автоматизма да то есть и большая часть их будет ну просто продиться в голове вот поэтому то есть порук хождения он есть но когда ты его проходишь то дальше ты уже то есть ощущаешь лёгкость бытия в процессе вёрстки поэтому ну вот я всё равно про концептуально то есть я понял твою идею с сокращениями но это скажем так это просто оптимизация там по скажем визуальному какому-то состоянию причём опять же она естественно и минусы даёт потому что когда у тебя одни буквенные обозначение это тоже тяжеловато как ни крути но я говорю про концептуальность что у тебя в принципе то есть смотри неважно какой инструмент важно что у тебя всё равно этот уровень детализации будет одинаковый почти во всех инструментах либо вообще одинаковый ну потому что у тебя чуть ли не один класс на одно свойство на полтора свойства о'кей но всё равно это очень-очень сильная детализация и у тебя всё равно когда ты сидишь это проектируешь тебе надо применить там не знаю 15 20 30 причём не на одном уровне а на нескольких если там что-то ты пытаешься сделать и вот эта вот штука я честно скажу я до сих пор её не принял как концепцию того что так надо то есть я могу выбирать мне это не нужно вот это вот уровень кастомиза мне наоборот тот же самый буotstrap я хочу просто набар и у меня есть конкретный компонент набар я пишу набар и он как надо отобразился меня это устраивает мне больше не надо да а и каждый раз когда я смотрю то же самое на тай Wind или то что поверх него сделано вот классный пример этот Шеридон да он называется я правильно его произношу наборы компонентов вокруг Тейлilй это очень популярная штука просто про неё все сейчас Шендин который про неё сейчас все говорят но там фишка в чём кажется что-то слышал то что библиотека какая-то что-то слышал так прикол знаешь в чём все такие: "Вот классно там замена" я такой: "Дай-ка посмотрю" а там знаешь какой я такой думаю: "А как её установить как вообще этими компоненты пользоваться?" А там написано: "Дак это не так работает ты просто копируешь к себе этот исходник" то есть у тебя там есть конечно компонент алябар ну там не знаю аккордеон ещё что-то но ты же понимаешь что это просто грубо говоря кто-то на Тайлвинде собрал все эти классы в одну кучу но ты эти классы ты как бы к себе это копируешь и потом тебе с этим жить а например обновление понятное дело поэтому у меня скорее глобальный вопрос вообще в принципе в сторону м того что ну не будет ли отката ребята давайте вернёмся к нормальному ЦСУ то есть не создаёт ли эта проблема на каких-то больших объёмах я имею в виду вообще как бы сама концепция что просто как пример приведу у тебя же всё равно когда столько классов понаписано там навигация по ним замена понимание в целом вот этой картинки неужели по HTМлю это удобно делать мне как будто кажется что нет здесь могут ещё помочь ну какие-то хорошие практики и паттерны да вот как с этим всем работать да потому что ну тут например один из вот частых про которых мало редко говорят например в докладах об этой теме и мало кто об этом задумается это вот техника которая называется алиасы которая как раз-таки вот помогает немножко эту сложность убрать то есть в чём она заключается что ты делаешь какой-то глобальный словарь где у тебя к примеру ключи - это название ну название аляаса самого и значение - это вот набор вот этих атомарных классов да и соответственно для частки объединять ну да да для реиспользуемых каких-то вечей из серии там не знаю для там кнопки какой-то вот как раз это для то есть для каких-то компонентов которые ты не просто подключил и всё а вот где тебя надо именно переиспользовать ну какие-то стили вот такие наборы ты вот этими алиасами их уже в шаблоне используешь и внимательный зритель может подумать: "Так это же CSS правила перезаболей получается" вот но я здесь могу сразу да я здесь сразу могу да пояснить немножко что в чём преимущество такого подхода что во-первых эти аляасы они у тебя существуют только в билдтайме то то что ну а соответственно когда у тебя это всё опять же это ты там допустим можешь в шаблонизаторе в своём глобальную какой-то такой словарь завести или там ну условно там в реакте неважно да то есть ну что-то такое то есть к тому что ну как правило оно в билтайме то есть в итоге у тебя в Html будут просто вот эти утилиты останутся да то есть тебе не надо дописывать вот как в случае CS справил тебе не надо что-то дописывать да именно что у тебя в коде попадёт вот это первое второе а их будет как правило меньше чем обычных CSS-правил ну если бы мы опять со сравникописом CSS их будет сильно меньше поэтому у тебя с неймингом вряд ли будут проблемы среди вот этих вот алиасов да ну там как правило они скорее всего у тебя в одном файлике уместятся потому что ну у меня там на среднем объёме проекте у тебя так получалось вот и третье то что то есть одна из killрфич - это вот по сравнению с CSS правилами обычными что ты можешь это редактировать эти алясы place через ну поскольку это просто строка да ты можешь например если у тебя в двадцати местах там у кнопки такая-то жирность шрифта а в двадцать первом у тебя например она другая отличается то ты можешь просто как заменой одну утилиту заменой в строке в этом лясе заменить в конкретном месте одно на другое и всё оно у тебя заменится без ну без там создания новых сущй например да или ну вот Вот такая как бы тоже фича вот и этот как раз вот да подход про именно вот про паттерны про вот ну про части как бы сокрытия этой сложности он вот здесь решается да я например там регулярно таким вот пользуюсь и ну работает достаточно хорошо я кстати вот именно таким образом на Telwin смотрел вот я смотрю это скорее как на некий базис вокруг которого можно строить свою систему ну мы можем наверное назвать это дизайнсистемой да ну и как бы с точки зрения дизайна с точки зрения ЦС когда ты действительно делаешь там аляаляс и как-то это комбинируешь по поводу рантайма всё понятно оптимизации это кстати я сейчас пока ты говорил я подумал это в принципе даже и на ЦС такую штуку можно писать которая автоматом берёт тебе под каждый значит свойство делает отдельный класс и когда у тебя есть наборы он эти наборы ну понимаешь да подменяет и in и inпacсит то есть я думаю что это можно даже реализовать в реальности хотя бы для 90% там случаев поэтому это как бы я не считаю знаешь таким мегапреимуществом потому что это всё-таки оптимизационная вещь оптимизационные вещи часто делают типа тебе ничего не надо делать инструмент развился у тебя это появилось из коробки а вот в чём плюс как будто бы опять же в моей картине мира йс не сам по себе э хорош вот в чистом виде потому что ты всё равно задолбаешься и это в ад может превратиться потому что ну люди реально жалуются а вот если ты вокруг этого типа давайте сначала соберём свой буotraп упрощённо ну с плюсами естественно там же много всяких фишек которых у Бустрапа нет это очевидно тут как бы понятно и соответственно дальше мы это добро используем и при этом у нас есть возможность всегда вставить конкретные стили там не знаю в сеточку какую-то и и использовать да да да тут об этом как раз и речь да что вот если испольть хорошие практики и паттерны э вот в амарного сесса они ну вот появляю получают заявленный эффект что действительно ты можешь реиспользовать эти алиасы и у тебя всё будет то есть реиспользовать какие-то вещи да и там где нужно конкретное вот конкретный где-то что-то подпилить да ты уже там просто утилит рукомпишь да то есть ну вернее как как правило ты используешь готовые компоненты в которых ты уже у тебя уже ну всё как бы в себе ты все эти стили накидал да например вот там где стилисполь нужно которые в компоненты ну и вне компонентов тут действительно алиасы тебе помогают а там где что-то уникальное какое-то место стилизовать просто ты можешь вот прямо накидать в конкретном месте их и всё ну то есть да мысль верная что А внде аAS - это встроенная фишка самого фреймворка не в Лвивинде это вообще нет это вот алиасы конкретно это вот ну я я это называю паттерном да или таким bestст практисом отмик CSS что это не привязано к фреймворку это именно вот такой как такой паттерн как ты можешь то есть это вот то что я сказал ты можешь опять же хоть в сасе например не-нене это на уровне шаблонизатора делается как правило то есть условно вот ты ну там не знаю в Ларавеле же в Ларавелле наверняка пользовался там просто глобальную переменную себе какой-то словарь глобальный завёл и в шаблонах ты просто имеешь доступ к этому слова понял ты имеешь в виду всё я понял ты я думал ты имеешь в виду что есть прямо конкретная имплементация просто если нет конкретной имплементации то есть для меня эта мысль опять же очевидная вот то что мы сейчас с тобой обсуждали алиасами я себе так это и видел но просто зная как устроен мир обычно если типа инструмент тебе не дают то как правило никто этого не использует и все делают очень по-разному нет ли такой проблемы что у всех там просто кто влез кто по дрова и знаешь как часто бывает инструменты-то конечно мощный но профессионалы любят рассказывать эти истории как они заходят в какие-то проекты и говорят: "А там такой кошмар надо всё с нуля переписывать" или нет или вот крупные проекты которые долго на Тейлвинде такие: "Да нет у нас всё хорошо мы всё помним понимаем" да в инструментах этой штуки нет ну опять же про это и ну так скажем это здесь к тому что то есть Atomic CSS - это опять же методология то есть которой тоже есть там свои какие-то то есть свои плюсы минусы свои какие-то бестпрактисы и там антипаттерны условно да вот ну что и серия вот про антипаттерна кстати например чрезмерно исполь Appя помнишь же вотде такой вот это как раз антипаттерн да потому что ты по сути ну вот оно превращается как в рукописный CSS только немножко по-другому тут тоже отчасти как ну нормальное дело нормально будет что вот нужно использовать чтобы оно у тебя хорошо было достигался на эффект нужно использовать без практицы и вот об этом речь скорее ну кстати вот да можно про это сказать что сейчас появляется большое количество именно а уже фронтенд обёрток над лвиндом и они как раз решают эту проблему потому что вот это то же самое как React Bootstrap у тебя не просто это обёртки над компонентами но часто они добавляют какие-то вещи которых изначально в реакте нет то есть у тебя получается что ты можешь просто создать компонентную библиотеку на реакте поверх него и тебе не придётся придумывать алиасы потому что у тебя будет конкретно акордеон у тебя будет конкретно кнопка у тебя будет конкретно ссылка а там внутри уже хоть 500.000 классов тебе неважно это обновляется само соответственно я вот недавно исследовал я нашёл как минимум несколько таких штук над тайвиндом она кстати называлась что-то на Н как-то она называлась потом переименовали причём буквально недавно и по-моему сам разработчики выпустили причём за какие-то деньги такие типа 200 баксов да там у них появилась короче фигня которую ты можешь купить и это как раз вроде обёртка над короче это уже набор готовых компонентов но это уже не такой как вот та штука где ты копипастишь к себе а это уже высокоуровневые компоненты которые можно к себе ставить и использовать ну это по идее это это скорее имеется в виду вот ты про него говоришь но он UI kit это называется вот у них это как Win UI а а у них ну они Я к тому что раньше он вроде бы назывался Tailwin UI а сейчас он кажется ну переименовалось ну вроде бы как-то каталист как-то дадада да и у них вот он и хд и не Headдless потому что ты можешь понять короче это вот ровно то о чём я говорю да что у тебя не надо придумывать никий аляс у тебя просто ну там вот ниже вот я сейчас смотрю да набор просто стандартных компонентов под всё вот и в этом смысле кстати довольно забавно получается то есть это такой уровень абстракции когда в принципе ты уже можешь на даже неважно что там атомик у тебя под капотом но ты эту штуку можешь прямо с бутстрапом сравнивать и выбирать ну или я имею в виду с системами аналогичными Бутстрапа где у тебя тот же самый праймреакт где у тебя просто готовые компоненты просто плюсом к этому у тебя идёт возможность юзать собственно Tailwind ну да это остальное скорее про вопрос вот который упоминали что как сейчас уже обычно используют ну типа там пишут CSS или пишут стили да что просто берут какой-то Headless библиотеку и на неё уже наворачивают ну вот тут этот ну например или готова библиотека вот TailWind UI это да ну он раньше так назывался или катаalist это про тоже история что ты просто вот берёшь тою штуку но да под капотом но просто написано на телвинде вот и всё а дальше уже ну и там возмо скорее всего опять же я не пробовал скорее всего есть какие-то удобные вещи для именно вот там кастомизации с помощью Тейлда а ну просто в Тейвинде же да с четвёртой версии она недавно вышла у них там появилась фича что кастомизация через CSS через кастомные свойства что у них вроде как там чуть ли не все вот эти утилиты они в значениях не конкретно захардкоя а CSS ну какая-то CSS переменная вот и ты можешь то есть там видимо и в этом ещё тебе помогает каталист этот что вот ну то есть я кстати только что посмотрел а ну наверное мы глубоко копать не будем но тут написано что tailwind UI is now tail wind plus и катаalist - это отдельная штука то есть получается что какая-то там немножко другая связь я думаю что нам в комментарии накидают это нас с помидорами чтобы мы ничего не поняли и учите им отчасти ну расскажите да ребят если кто-то следит и сечёт потому что это прикольно я посматриваю то есть мне вот эта вот уже штука нравится но не нравится что она платная вот я поэтому подожду ещё немножко или пока её сделаю ну тут да вот конкретно то есть в самом устройстве инструментов и вот в НД том же я более-менее разбираюсь а вот в библиотеках я ну да вот прямо готовы акиты в последнее время давненько не использовал угу да это интересная штука короче их много развивается но с ними всегда проблема есть я вот скажу тебе когда ещё только вот бутра появлялся вот эта его активность пошла там же на фоне очень было всяких много вещей а там был foundation как-то он назывался суперпопулярный он исчез где он никто про него не говорит потом на основе самого Бустрапа было полно обёрток хотя кстати вот он плохо под это подходит потому что он сам готовый UI kit уже да то есть это не атомиic CSS из которого можно классно собирать и поэтому я честно тебе скажу я боюсь их все до смерти потому что там должна быть какая-то такая популярность чтобы он не умер просто какая-то запредельная вот а так в основном ты не можешь на них рассчитывать слишком уж много их умерло за последние десятк лет ну вот да и именно вот то чтобы брать прямо готовый UI kit ну вот целиком и вот на него завязываться ну на него завязаться да это достаточно опасно а ну и причём когда он такой как бы несерьёзный ну из серии тоже там допустим только сесс у тебя какой-то написан да вот а когда он прямо такой конкретно типа материала того же да или вот ну к нему уже понадёжно ну и поэтому да вот что-то типа headless если опять же мы про такое говорим вот то есть либо Headless какой-то брать или ну под себя стилизовать либо вот самый такой ну популярный если тебе там кастомные стили не нужны типа вот материала тоже да либо вот решение типа уже ну вот опять же вот эти решения то что мы там рассказывали про XGS мола и так далее почему кстати вот я ну небольшое такое замечание да вот вспомнил про способы написания CS вот а в Моле там есть штука типа CSS нса но она более продвинутая то есть она ещё более продвинутая в том таланне что там называется это немножко CSSNs то есть там типизированные стили что ты короче если в CSэсе ну в свойстве какую-то допустишь ошибку тебе Typeesрипt это подсветит что ты не то свойство написал да например и там даже ну да там даже есть такое что ты если стили попытался написать для несуществующего компонента это там тоже ну оно тебе тоже ругнёт save что ну так делать нельзя Да вот поэтому как раз для ну вот к вопросу про что брать прямо для больших проектов да это вот ну немножко переходя к вопросу вот рассмотрели разные способы м написания и что допустим подойдёт для там стартапа что подойдёт для там если ты второй Яндекс делаешь да то вот как раз-таки ну я вот здесь что мог бы сказать как вижу что если там среднестатистический продукт какой-то да у тебя или ну неважно даже просто проектик то есть АOM CSS он хорош как дефолт здесь такое дефолтное решение да потому что ты и сам можешь там накидать и вот взять какие-то решения типа как Хедлса и туда стилизовать да например а если вот допустим какой-то ну там условный второй Яндекс хочешь сделать то там ну лучше всего там хорошо подаёт подойдёт Мол потому что ты там и как он как и UI фреймворк тебе и как с точки зрения стилей ну опять же если в контексте ССС то там вот опять же вот эти фичи то что ты и не напишешь чего-то лишнего там у тебя нет проблемы там лишнего CSэса не будет да ты и как бы у тебя там и это всё валидация будет ну и так далее вот поэтому то есть тут вот отвечай просэ вопросу что где лучше ну тайпскриптовый да да то есть тайпскриптовая типизация в этом плане действительно интересная это надо будет смотреть как это будет развиваться и двигаться в эту сторону э уверен что это будет но тут надо не забывать что того же Тайлвинда уже LSP есть я поскольку им не пользуюсь поэтому я не могу сказать как он работает но раз он есть для меня это уже показатель того что они в эту сторону идут и у тебя там какие-то вещи ну прям точно подсказываются анализируются и всё такое я знаешь что тебе хотел сказать по Тайлду ещё спросить поскольку он у нас такой самый яркий представитель всего этого добра а про его фичи особенные которые внутри него есть вот например одна из главных которую так любят все говорить вот по поводу там выбрасывания стилей да анализа выбрасывания что у тебя ничего лишнего нет или это не выбрасывание происходит короче как эта штука работает а ну да-да-да поясню это вот сейчас вообще как в старые времена когда вот только тамс начинался то есть первое поколение инструментов было такое что вот ну многие возможно видели когда либо у тебя у тебя просто есть заранее заготовленных куча вот этих утилит и ты ну соответственно ты там какие-то используешь а лишние ты удаляешь допустим отдельным инструментом типа CSS раньше был который на этапе сборки просматривает эту разметку и лишнее выкидывает да вот так было раньше ну и кто-то даже там не стеснялся просто вот был Legax такой сейчас уже инструмент э Тахионы да ну Тахинс библиотека называлась может тоже слышал раньше была популярная там она она небольшая там килобайт наверное 14 сисса или 15 ну гзипованного имеется в виду жатва некоторые просто подключали вот в лоб подключали и всё и верстали вроде как на том же по-моему npm так и был долгое время свёрсан вроде бы но современное уже поколение инструментов оно работает вот по принципу ну так называемый дт мод да или там в основе который лежит джит движок то есть ну это такое джит - это джит компиляции не имеет отношения это такое немножко маркетинговое название которое йвин придумал в своё время да хотя что интересный факт тоже что вот немножко отступлю то что саму эту концепцию первыми придумали и ну реализовали ещё Яху чуть ли не в году в шестнадцатом наверное да это вот как раз один из первых инструментов вообще реализации этого миксеса - это Атомайзер и вот как раз у них там уже в шестнадцатом году это было то есть то что ЛВН продаёт как эволюцию ну продавал да или там что вот они там изобварили это было ещё в Амайзе в шестнадцатом году вот и как он работает что просто ты запускаешь допустим ну там усно через CLI запускаешь вот этот Gдвижок ты там пишешь какой-то код он сохраняешь мнение он смотрит твою разметку смотрит какие ты утилиты там использовал и генерирует только вот эти утилиты вот это как раз ну вот G движок так и работает и в современных инструментах да типа вот в Тейлвинде там в там уна каком-нибудь в Млати ну оно есть вот этот [ __ ] движок у меня есть сразу замечание я вижу две проблемы здесь первое все те кто пишут классический серверный бэкэнд с генерацией htмле в шаблонизаторах они идут лесом потому что естественно он не может анализировать какие-нибудь там блейд влавели ну понимаешь да все эти мплейд движки бэкэндовые то есть эта штука работает только с фронтендом правильно ну нет вообще бы не сказал как раз это уже зависит от реализации движка потому что ну вот например там ну то есть Tailйвин сейчас а большая аудитория Тейлвинда - это как раз рубисты которые пишут вот классический такой ну классический эээнд вот это нет то что они его используют вопросов нет я имею в виду как ты ну прикинь ты вот пишешь в рельсе у нас например Hamл или сли Ну у тебя этот движок обязан понимать и Хамол с Slim чтобы это писать иначе а это свой синтаксис это свой язык как он замены сделает он смотрит разметку ну сейчас опять же а ты видел как слим выглядит или хамол ну да я шаблонизаторами конкретно вот как ну например блейд блейд я вот использовал не посмотри Хамл давай посмотрим просто вот сейчас открой потратим немножко время потому что это полезно просто вот ты глянь и скажи мне потому что это если ты его не видел то это совершенно не имеет отношения к таким шаблонизаторам про который ты говоришь можно слим скорее даже посмотреть потому что это более его продвинутая версия аналог - это пак в ноде это копипаста этого то есть он выглядит прямо настолько не так нуте мплейт если набираешь то ты можешь его увидеть ты просто увидишь что у тебя это не шаблон в плане того что называет словом шаблон в А ну типа что он как паг а ну да что типа паг - это копипаста хам а это совершенно другой синтаксис то есть у тебя инструмент если не умеет конкретно с ним работать он никогда в жизни не найдёт никакие стили и не заметит ну тут тут тут да вот я согласен что про ну про менее дефолтные движки шаблонизации - это верное замечание что ну опять же я не знаю каквин конкретно это уже действительно должна быть интеграция да движок должен уметь вот в это вот я здесь согласен да но опять же например ну блейд тот же самый ну вро достаточно популярная вещь спокойно да например и ну по мне кажется он не блейд понимает мне кажется он просто понимает любые движки в которых интерполяция сделана в классическом htмле то есть он понимает HTML а всё остальное не трогает а вот если у тебя интерполяция сделана не в классическом HTМле он как бы не знает для него это просто мусор какой-то и всё ну почему он просто может строчки то есть самый простой пример вот например как млад сделан он просто смотрит строки то есть он просто смотрит я об этом и говорю он он не пытается парсить правильно он просто как регспами смотрит да да да,да да то есть простой как бы да опять же тут ну зависит от реализации Gдвижка опять же например в Млате да у меня достаточно простая вещь грубо говоря на нескольких регулярках да но грубо говоря 80% там HTMLров таких похожих на HTML и JSX какое-нибудь оно спокойно спокойно стабильно работает да по что-то менее стандартное типа вот паг там Hamл и так далее ну например мой инструмент ну да он скорее всего не осилит как Tailвиind с этим работает там сможет ли он Хамл съесть или вот это что-то менее дефолтное где у тебя не в кавычках это да вопрос то есть так что ну да тут отчасти верное второй вопрос динамические строки потому что да вот даже в реакте где в принципе стиль-то прописывают в целом плюс-минус name и пошёл да у тебя есть условные конструкции у тебя есть вот эти class names и так далее я уверен что в других фреймворках свои штуки плюс тебя никто часто бывает что у тебя вообще функция какая-нибудь которая просто возвращает набор классов там по каким-то условиям то есть у меня такого полно в коде когда не знаю там у тебя например иконка языка тебе нужно подставить стиль соответственно понимаешь у тебя там есть некая динамика которая всё это добро выбирает вопрос очевидно что если он в рантайме это не исполняет он не может понять что там такой используется класс это просто физически невозможно это ограничение да такое мира как вот с этим работает то есть ты я подозреваю что скорее всего там принцип такой что ты обязан тогда дополнительно описать какой-нибудь файл в котором ты говоришь: "А вот это точно добавь" или я неправильно себе это вижу ну в том числе в том числе это один из способов как вопрос решать ну если опять же там у того же там в Tailвиindнда в доке есть моменты где ну про правильную как бы динамическое использовано ну и серии что там в каком-нибудьрнике что ты там не куски утилит должен а целые утилиты например да тогда он поймёт по названию просто дадада от базовых то есть от такого базового рекомендации можно с такого начать и второе да что если вот статически проанализировать никак не получается то можно ну вот где в отдельном месте их где-то прописать и например вот в Tail Day я там скорее всего где-то в конфиге должен быть типа йтлиста или как это ну что-то типа вайт-листа что вот такие-то утилиты точно мне сделать да вот а в Млать например там есть мм ат то есть в отличие от большинства вот этих популярных инструментов ат режим там он не удалён то есть ты можешь там есть ну ты в САС конфиге можешь тоже прописать типа какие типа тоже в строчке какие тебе утилиты нагенерировать да то есть просто в строчке и всё да то есть в том числе ну и то есть там ещё есть как бы способы различные генерации утилиit ну ahad of time как вот в старом варианте да то есть это комбинировать можно поэтому то есть тут да замечание хорошее а вот это вот другое да да вот генерация утилит ты просто вначале упомянул тоже хочу у тебя спросить как это происходит аа вот мы с тобой говорили да что у тебя например есть там прозрачность а есть прозрачность 50% то есть э как это происходит в Тейлвинде я просто пишу класс он увидел его распарсил понял что я хочу и создал соответствующий класс в ЦСЕ а вот да да немного могу раскрыть там есть вот в Тейлвинде например есть специальный синтаксис ну из серии вот я пример понял то что имеешь в виду что допустим прозрачный цвет что у тебя есть из серии красные а ты хочешь там красные прозрачностью на 50% например бэкграунд сделать да 25 да там дада вот и что например в Тейлвинде да есть специальные то есть часто для этого либо используются специальные синтаксисы в этих утилетах да что ну там из серии типа пишешь там 50% допустим там слэш и например 0,5 прозрачность да то есть и либо специальные синтаксисы есть для этого либо а ну вла тоже что-то подобное есть для каких-то вещей либо можно использовать CSсные функции CSS-функции какие-то например современные ну вот тоже из современных фич а допустим про в CSS есть функции для работы с цветами да вот что ну похожую работу сделал с цветами как САС только прямо в рантайме вот и например а то есть вот даже такие вещи в утилитах можно ну в какие-то сложные кейсы спокойно использовать вот единственное что прямо сейчас вот как раз-таки это ну так реализовано костыльно но в перспективе например вот в Малати я планирую first class поддержку вот этих функций реализовать да то есть просто как сырую функцию тоже можно прописать то есть способы этого тоже есть в том числе угу ну просто к тому что фактически то что ты говоришь это уже аналогично прописыванию стилей напрямую практически а когда ты уже даже не классы а просто стайл пишешь потому что если ты говоришь что это синтаксис но это типа переизобретение своего собственного стайла фактически ну там сейчас да там вот важное замечание что например вот в Тейлвинде часто такие вещи опиниated сделаны да и вот либо вообще какой-то фантазийный синтаксис а в онлайте там всё максимально опирается на CSS там вот как раз большая часть вот таких синтатических штук когда ты сложные какие-то значения в ну сложные значения для аути серии там допустим бордер радиус же например какой-нибудь бордер радиус ты там можешь указать а в одном свойстве несколько значений для разных углов например или даже там а для одного угла два значения чтобы продвинутую кривезну сделать вот и что в в comгде тебе да скорее всего придётся вот сырое как вот в онлайн-стиле писать сырое сырой CSS как в онлайн-ститиле а вот в малате большаую часть таких вещей оно грубо говоря используя как CSсный практический синтаксис нативный ты можешь несколько значений уситилита указать и оно тебе сконвертируется в CSS то есть тут опять же ещё зависит от инструмента ну я имел в виду немножко другое опять же я имел в виду что как неважен инструмент то есть у тебя в результате всё равно ты по какому-то синтаксису это описываешь я имею в виду что банально ты не получишь автокомплита то есть банально ты не получишь никаких проверок то есть у тебя а вот чтобы реализовать например какую-то более жёсткую историю связанную с типизацией со всем остальным эта штука из неё полностью выпадает потому что тебе нужен ну это просто физически слишком сложно сделать чтобы понять распарсить проверить там валидность и так далее тем и у тебя нигде подсветка не появится то есть короче это ещё более низкий уровень то есть по сути это уровень а какого-то неважно хорошего или там нехорошего синтаксиса но аналогичный тому что ты стайл прописываешь вот что я имел в виду потому что в бустпе у тебя пре предгенерация соответственно ты понимаешь что у тебя автокомплит может на этом работать ну то есть это статически можно выводить такие вещи и поэтому у тебя ну как минимум в проекте есть просто договорённости что ну вот у тебя есть такая штука и а да даже смотри пример я просто в браузере открываю а как только она появляется я у себя там ну когда экспериментирую да класс какой-нибуд добавляю он мне сразу эти классы все показывает и это конечно суперу удобно то есть вот эта штука она всего этого лишена то есть это просто вот рукопашный стиль внутри даже если это красивый язык вот что я имею в виду ну кстати да да это верное замечание ну тут я уже скорее про произвольные да тут я немножко ушёл в сторону как сдавать произвольные значения вот в атомиксе это скорее вот про это да то есть замечание это верное что то есть с как раз в том с атомик со старой школы он больше про то что был что у тебя заготовленные есть значения из серии заготовленная шкала размеров например заготовленные там зна ну заготовленные там цвета только заготовленные да вот что это да то есть тут в том числе тут правильно замечено что произвольно значение то есть у них свои плюсы и свои минусы есть то есть где-то это тебе там ты можешь не написать не того но в каких-то случаях опять же это тебе и ну может быть и нужно сери что что-то сложное продвинутое написать тут опять же от задачи уже зависит знаешь ещё какой интересный момент есть я не знаю насколько ты это сталкиваешься насколько это важно в реальной работе для по крайней мере кейсов вот где ребята работают в других местах не у нас потому что у нас это важно и мы это поддерживаем что я имею в виду значит дело в том что у нас вообще на Хекслете нету отдельных фронтендеров нет вру у нас есть один человек но это скорее больше помогать потому что много маркетинговых задач там лендинги или ещё что-то но весь э код который пишется для любых не маркетинговых задач например там админки интерфейсы обучения и всё такое они пишутся бэкэндерами и ну то есть у нас такой немножко скажем фулстеки в этом плане но при этом мы исходим из того что ну не надо думать про фронт просто вот у тебя есть компонент ты его просто используешь и я знаешь ещё какую проблему всегда видел и вижу что у тебя при таком раскладе когда нужно допустим если ты Алиасы особо не используешь и у тебя нет вот этот готовый набора да что вот эта вся история она вырубает просто большое количество людей которые могли бы в коде что-то поправить я понимаю что кто скажет: "А у нас это и запрещено туда кроме фронтендеров никто не лезет" но понимаешь да о чём я говорю что ты зашёл тебе надо какую-то штуку сделать ну если ты не эксперт в ЦСЕ хрен ты там соберёшь этот километровый штуку чтобы она у тебя адаптивная чтобы у тебя там все правильно выставились параметры и так далее правильно ведь ну да да это хорошее замечание что вот в этих инструментах про вхождение есть и вот тоже кстати интересный момент есть стереотип что Атокс CSS - это для тех кто плохо знает CSS ну тут как раз вот это по-моему не ну это я сейчас некоторые как раз вот любители именно классического CSС они вот это говорят что вон тамвин [ __ ] те кто не умеет CSS писать ну то есть что-то такое да то есть даже или там взгляды есть про то такая позиция слышал что типа Таман CSS он там вредит развитию CСэса и так далее ну как бы ну ладно ту тут да посыл верный основная мысль про то что э вот ну да CSS здесь особенно вот знать надо и у этого порох хождение есть ээ вот кстати знаешь наверное не могу не заметить эту штуку я действительно из-за того что мно ну то есть у меня нет такого что я там пытаюсь следить за ЦСом и развиваться внутри него и всё такое то есть есть какое-то базовое понимание да и когда я работаю например опять же с бустрапом или подобными штуками я знаешь что замечаю я сначала себе этого запрещал немножко а потом в какой-то момент отпустил думаю какого хрена мне хватает чем заниматься короче я замечаю что я мыслю реально вот именно этими высокоуровневыми конструкциями то есть я не мыслю тем что там на фоне просто я понимаю что вот эта штука решает такую-то концептуальную проблему колонки например да там роу и так далее и знаешь э сначала я этого немножко стеснялся потом я это принял а потом я понял что блин я реально 90% наверное 95% задач без проблем решаю таким подходом ну потому что когда всё достаточно стандартно нет Pixel Perfectта я сам как бы определяю дизайн давай так я могу себе это позволить в своей собственной компании и поэтому те места где у меня реально что-то такое надо сделать где там надо что-то применить я могу воспользоваться просто помощью других вот и это конечно очень классная штука то есть можно так жить и действительно вот когда говорят там: "О ты ЦС не будешь знать" да чёрт побери я его знаю очень плохо если мы говорим по сравнению там с какими-то крутыми ребятами но это позволяет мне очень быстро двигаться и решать проблемы не привлекая там специалистов другого уровня вообще глобально меня конечно это пугает потому что ну представь у тебя вот в какой-то момент верстальщики в чистом виде ушли да и появляется значит вот сейчас фронтендер объём знаний да довольно большой очень много независимых таких специфических направлений да один там сидит в реакте второй здесь это просто каждый раз это свой мир какой-то некий да и ты ещё к этому всему должен уметь там в фигме макет нарезать и заверстать её используя вот этот весь трэш мы не придём снова к разделению на верстальщиков так не самое смешное что вроде как и есть ну вроде ну вроде как в каких-то компаниях оно даже и есть тут на самом деле от компании зависит где-то прямо ну то есть я и вакансии ну опять же там когда какое-то время назад искал работу ну были прямо вакансии чисто верстальщиков вот и есть вакансии ну таких которые вообще не верстают то есть во-первых да первое что частично это разделение уже есть ну и к вопросу о том что ну действительно сезложняется и что ну как и вот что я насчёт этого думаю то что для большинства задач сейчас вполне достаточно вот твой подход когда просто работать с компонентами и там максимум что то есть с готовыми ко мне наработать ну это опять же для бизнеса это и хороший подход это и норм да то есть тут уже от задач зависит вот но если там у тебя попадают задачи где тебе во фронте надо больше как-то покопаться да то есть как-то это получше вылезать и ещ то есть с этим побольше повзаимодействовать то знанияса тебя прокачают тебе хорошо помогут да как вот я уже сказал что какие-то вещи ты сможешь сделать тремя строчками CS вместо того чтобы на 5 на 10 Кб библиозеку тащить да например или ну вот то есть вот такое например да поэтому и сильно проще сверстать например да то есть То есть там не ну и не брать готовы компонента то есть тут опять же сильно от задача зависит но в среднем для бизнеса для кого для бизнеса для большинства продуктов подход когда ты чисто используешь готовые компоненты даже сильно про CSS не думаешь он хорош как по мне и ну сейчас это вполне рационально это норм ничего плохого нету давай тогда поговорим немножко про веб-компоненты если это вообще как бы входит в тему вот э того чего мы сегодня обсуждаем или не входит я кстати до сих пор не понял но кстати сейчас ну раз уж затронули да про них сказать стоит да вообще ну какая история есть взгляд про то что как будто веб-компоненты они вот должны заменить фреймворки да что такая позиция есть но на самом деле то для чего они были созданы их цель - это возможность создавать свои HTML-элементы с какой-то инкапсулированной логикой и стилями всё вот и дальше вот как уже ты это будешь использовать уже зависит от твоей фантазии вот что будешь ты просто из серии сделаешь ты какой-то компонентик там изолированный для там лтип там не знаю или плеер какой-то либо ты будешь на основе этого делать какой-то фреймворк как вот ли например да или ну вот такое то есть тут уже дальше от твоей фантазии идёт ну и поэтому сам по себе этот достаточно низкоуровневый там нету пока не планируется по крайней мере условно там стейтменеджмента какого-то на уровне спеки сделать или там роутинга ну что-то такое что тебе в любом случае нужно в во фреймворке хотя бы даже маленьком поэтому вот то есть тут важно понимать для чего вообще компоненты задизайнены да вот чтобы просто кастомные теги делать свои и всё а вот дальше уже то есть как ты это будешь использовать от твоей фантазии побольше зависит и при этом а с точки зрения опять же стилевого оформления это полностью изолированная штука или ты можешь её снаружи как в реакте докинуть про стили да и продолжая тему конкретно если про стилизацию говорить там есть два способа что ну во-первых у тебя там вообще вебкомпоненты - это набор спек то есть это не одна как бы ну не одна какая-то фича это вот набор спек который сокуп называется и вот shadow дом одна из основных там спецификаций вот и там есть с помощью если применяем мы shadow дом просто ещё забавный момент веб-комбинеты можно вообще без Шедоудома применять можно допустим использовать то есть только кастомные элементы можно использовать тут ещё вот да момент поскольку это всё низкоуровневое и оно там как-то отдельно лежит просто отдельные спики можно разных части применять независимо то есть просто я например в продакшене применял вот кастомные элементы не раз и это нормально работает вообще без шадома но если мы уж туда начали говорить про такой каноничный способ с шадоу домом там есть несколько моментов первый способ - это когда ты прямо з то есть когда ты включаешь шодом да он изолированный по дефолту вот и уже как с таким изолированным стилем работать там можно либо у тебя прямо в шаблоне прописать ну вот условно в этом в шедоудоме прописать текстл и в нём накидать какие-то стили какие-то правила CSсные ну и всё оно будет работать это для какого-то изолированного виджета если ты делаешь да его вставлять это хороший способ но для переиспользования там есть второй механизм он называется constructable style sheets где ты можешь откуда-то импортировать например CSS да вот ну это то есть сейчас это скорее больше как в CSS JZ будет будет похож импортировать CSS откуда-то да его там подключить там есть специальный метод то есть в Шадом его подключить и короче реиспользовать вот то есть там разные способы плюс есть ещё возможности внутрь вот этого шадома влазить допустим с помощью CSS вот custom properties да можно то есть внутри у тебя то есть внутренний custм properties можно снаружи да на них повлиять его компонента и ещё там кое-какие есть псевдоклассы которыми тоже можно как-то вот внутренней части Шадома ну стилизовать вот поэтому то есть там ну свои механизмы и они ну тоже как бы неплохо работают угу я понял хорошо давай а поговорим знаешь про если можно насколько можно вот ты периодически рассказывал про свою работу там свой инструмент давай немножко поговорим про вот разработку редакторов в первую очередь про особенности и что там отличается потому что ты не раз упомянул то что это некая особая среда с особенными подходами и какими-то интересными видимо деталями которые вот не встречаются в обычной такой типовой разработке тут на самом деле было немножко завеса мой конкретно инструмент ну это просто инструмент для вёрстки с помиксS то есть что-то похоже на Telwin да а то что на работе я его ну не использую оно Дадада это я думаю просто это был результатом твоей работы нет не это свой инструмент я там давно ещё то есть как вот я сказал что в теме Омик ССS с восемнадцатого года и вот тогда я примерно начал там свой инструмент понемногу делать да и вот что то есть инструмент я я его применял в продакшене то есть на других местах работы я его в продакшене применял несколько раз да вполне себе но вот конкретно на текущем там вот своя специфика поэтому вот я могу то есть и про то и про то могу в принципе рассказать давай про особенности сначала вот именно разработки редакторов то есть что там такого кардинально другого вот в твоём кейсе там вот у тебя в том числе был выпуск с специалистом из мира вот он там специфика немного похожая что я это к тому что у тебя есть какой-то есть какая-то юайная часть да вот условно там как кнопки ну то есть ну да юная часть ну из серии как вот Word ты представляешь себе выглядит да то есть там у тебя есть UI всякие кнопочки из серии там вставить там вставка файл там вставить там фигуру картинку и так далее да и есть холст сам документ на котором у тебя ну там текст и документ собственно так вот во всех редакторах сейчас ну норма каких-то более-менее серьёзных холстовая часть она делается на канвасе там же как я привёл пример честь мира он тоже рассказывает у них там на кан то есть часть где вот прямо какой-то особенно сложный UI ну или rui иногда называется оно как правило делается на канвасе и там для этого ну соответственно рендеринг там какой-то кастомный как правило да поэтому там никакого нету да вот а UIя часть она небольшая её можно делать на чём угодно в принципе вот там ну у нас поскольку проект там со старых времён ты про панельки которые вот Дадада да я про панельки вот мм UN часть я называю именно вот эти панельки да соответственно вот эти панельки её можно она как правило небольшая ну у нас по крайней мере её можно делать на чём угодно да то есть у нас она там на старых технологиях ну поскольку сам продукт там тоже с десятых годов развивается и как бы ну поэтому тут не удивительно но например вот бинго да да ну вот а то люди говорят: "Джери умер" ничего не умер он во все поля ну да да в ну ну не только опять же как бы это уже и детали то есть сейчас некоторые таких названий даже и не вспомнят э ну ну ладно я ну вот например а из таких более современных примеров Photoshop веб-версия там UI сделан на литеки это вот фреймворк на основе веб-контентов от Гугла да ну вот у Adobe там потому что дизайн-система сделана вот как раз на основе лита да и ну я например вот ли в продакшене использовал вот там делал программу лояльности для бренда компании и мне тоже он зашёл достаточно поэтому вот зрителям тоже рекомендую вот есть возможность на лид посмотреть потому что это по сути такой как ну такой стандартный фреймворк похоже на стандартный веб-фреймворк там типа како-нибудь View или Реакта да фронтвый но при этом он весит э там 6 Кб примерно да по фичам он ну похож достаточно да не особо там уступает и по девелопер экспириенсу тоже там ну при на таком же уровне при этом там есть и экосистема и там ну какое-то сообщество достаточно готового кода всякие разные компоненты там у него с с самое забавно я изредко посматриваю ну какие у них там у ребят обновления да я удивился когда увидел что у него скачивание на НПэме больше чем у Свелта да или там ну даже то есть либо на уровне короче либо наравне у них либо даже больше улета вот я лично удивился потому что вот про Свелт там даже и на конференциях из Ридка говорят да на ну то есть про Свелт мы слышали многие да вот а пролит особенно в русскоязычном сообществе там три человека условно слышал да вот а оказывается он там Ну у меня есть скептическое отношение к скачиванием на впйме просто я не уверен что это так просто скажу я знаю то что эти системы там очень много сиек там очень много разных систем которые скачивают и ты просто знаешь что делаешь ты просто берёшь в своём проекте делаешь матрицу типа для всех версий значит тестировать или там что-нибудь такое и у тебя просто эти скачивания там счётчик начинают так наворачивать я не уверен что можно этой цифре доверять вот на 100% ну так слово просто я тебе согласен я просто что хотя бы примерный показатель ну согласись что там если 10 человек использут то у тебя кру Да да я к тому что вот хо примерно хотя бы сравнимые какие-то цифры как ну опять же там как у Свелта и тут даже не только скачивание тут и другие вот такие скажем так э базовые показатели простые да которые можно взглянуть из серии там звёздочек и серии там а в твиттере подписчиков и так далее и так далее там ульта даже YouTube канал есть год поэтому как бы ну я просто к тому что это не такой не какая-то совсем как бы маргинальная технология а что ну ну опять же это гугловский всё-таки проект что такой вполне себе ну как бы когда ты говоришь гугловский я знаю что часть людей такие: "Мм серьёзная компания" а вторая часть такая: "Ну это же Google они его обязательно закопают" как они закопали веб-компоненты до этого как он назывался он так и назывался по-моему полимер а не это кстати а полимер точно полимер это развитие это ну так скажем развитие полимер по сути лит вот и а что они ребрендик сделали видимо уже все устали от него да нет там скорее сейчас там вроде бы была история что полимер был написан на первой версии специфика точнее на нулевой версии спецификации веб-компонентов и там ну её затепкейтили вот и скорее всего вот с этим ещё и связано что ну вот как бы такой бренди нужен да если у тебя какая-то штука много лет и ей особо не стали пользоваться проблема в том что она никогда новизной не будет для людей надо что-то знаешь новое чтобы новизна пошла это тоже такой приём ну ну может быть да может быть да ну вот ээ немножко ушли вот от вопроса про редакторы ну основное вот да если прожать тему основное вот особенность она такая что большая часть у тебя ну скажем так движок и большая слуги у тебя в этом канвасной части и вот там как раз по сути ну у нас например там ну грубо говоря чистый джез по большей части да и то есть куча ну просто куча кода там всяких классов и так далее то есть там ну суммарно в районе 15 млн строчек кода то есть ну это конечно сери если с юайной частью это если с юайной частью тоже да ну как бы вот то есть масштаб большой и соответственно по большей части вот просто ты копаешься в этой джаваскриптовой логике и что-то делаешь и там так далее ну то есть есть понятно что там есть слой рендеринга да какой-то и вот есть слой логики ну вот где просто из серии там самодействие что там как там не знаю можно ли то есть как у тебя гиперссылка там будет отрабатывать на вот на тексте или ну если вот недавная фича а вот кстати да забавно что когда вот я только пришёл на это место а первый шаг моей первой задачи после ресрча был дописать бинарную десериализацию для нового ООО XML-тега вот итак к слову немножко какой у нас какой у нас фронт вот как бы вот такое вот да что ну это и немножко поясню потому что вот офисные документы вот эти э там типа вот вордовские экселевские они основываются на спеке спецификации ООО XML ну вот и по сути внутри если заглянуть вовнутрь да строение этого документа то есть это будет грубо говоря архив где лежат несколькой ну каждый из которых вот будет сделан по ну собственно по вот этой спеке да ну там опять каждый там несколько то есть грубо говоря в одном документе вордовском условно у тебя будет несколько XML документов каждый из которых там за что-то отвечает да вот и соответственно вот получается что о XML-документе у тебя что-то похожее на дом как есть в браузере только оно там по сути другими тегами и как-то по другим правилам вот как раз по каким оно правилам что каждый тег каждый атрибут обозначает в этом это означает спека о XML у нас вообще как это то есть как у нас устроено основной редактор у нас десктопный по сути основная как бы версия вот этого офиса у нас десктопная это ну кстати тоже про к слову про фронтENд что как бы бка там особо нету да то есть десктопное просто приложение и что интересно то что поскольку это всё начиналось в там десятых годах электрона не было тогда ещё да поэтому вот ребята кто это начинал они просто сделали взяли Хромиум там как-то пропадчили его и по сути у тебя вот поскольку ну основной вот движок написано сегодня на джакскрипте у тебя просто Хромиум запускает как веб каждый документ - это веб-страничка грубо говоря вот отдельная вкладка вот в этом вот хромиуме да соответственно вот такой момент и к вот про к вопросу что я ну начал говорить шаг задачи был про написать DC реализацию то что как раз-таки вот часть Chromum - это на плюсах написано да и вот общение между джаваскриптовой частью и частью плюсовой оно вот нужно соответственно сериализовать дереализовать вот бинарный формат некоторый да и соответственно вот отсюда она и взялась ну и вот там как раз я делал фичу возможность вешать гиперссылку на картинку да вот что ну обычно гиперссылку на текст вешаем да чтобы вот на картинку можно было в документе кликать вот и как раз там вот не было десериализации вот тега определённого да то есть там раз другим тегом это делается да XMLным не так как текст ссылкой и вот нужно было по сути дописать чтобы плюсовая часть тебе сериализовала вот теги в это бинарный формат определённый и ты у себя в джавокрипте должен его когда принимаешь правильно десериализовать код это как бы поэтому это был такой первый шаг отлично legacy CД с одной стороны конечно иногда пугаешься но без этого а без этого нельзя я имею в виду нельзя с точки зрения профессионального развития это очень крутая вещь когда ты такое повидал и понимаешь как как реально всё устроено и как бывает очень непросто и самое главное сидишь и кусаешь локти потому что ты не можешь использовать ни одну из новых технологий которые только в этом мире есть да потому что фиг ты там просто так что-то притащишь ну да тут я согласен что там у LEСci какие-то минусы есть ну это один из минусов как бы что вот текущее место работы у меня но при том что сам проект говорю очень интересный там ну много каких-то сложных задач да вот и ну то есть это всё нивелирует и вот даже опять же интересно вот во всём там поразбираться вот ну что как такое сложное ребята смогли вот организовать поэтому ну тут опять же есть свои плюсы есть сво минусы дада да это это на самом деле интересно вообще вот редакторы всякие такие вещи это прикольная штука у меня конечно не такой объём но вот тот же самый редактор Хекса я про него иногда говорю то есть это конечно микроскопическая вещь по сравнению с тем что вы делаете но она интересная потому что всё равно это совершенно другой формат работы когда у тебя есть там какой-то realтайм у тебя есть там куча элементов ко все дру все всё со всем связано а в общем это довольно приятно мне нравится этим заниматься тоже но слава богу я могу себе позволить знаешь там этот воткнуть любую новую штуку если она если мне захотелось да ты уже несколько раз упоминал про свой инструмент давай немножко про него поговорим а какую ты проблему хотел решить потому что это очень классно связано с тем что вот мы обсуждали да вот у тебя есть атомик а у тебя есть wви все как бы на нём пишут и ты такой говоришь и кстати ты наверное не один такой говоришь типа хрень или там ну не знаю как ты это рассуждаешь типа напишу своё и ещё 100 людей там говорят: "Напишу своё давай чуть-чуть поясни что за проблема" то есть почему вдруг я разрабатывая на Тейлвинде скажу: "Всё стоп хватит больше так нельзя дайте что-то другое" ну да могу здесь ответить что вот поскольку я упоминал начинал это всё довольно давно больше участ скажем таким стандартным фронтендом я некоторое время назад занимался то есть где-то 3 года карьеры я так достаточно много верстал вот и вот в году восемнадцатом вот ээ как какая у меня была история что я в то время в какой-то момент вот прямо конкретно угорал по Бэму да вот ну тогда ещё это было всё-таки чуть более актуально да вот такие рукописные вещи писать там я уграл по БМУ я там посмотрел все доклады статьи которые только были на этой по этой теме да и вот ну всё мне оно заходило вот я вот как раз тоже когда уже поплотнее с ним поработал я вот начал задаваться продвинутыми какими-то вопросами понял что то есть чтобы что-то серьёзное на БМИ делать нужен тульт да и в какой-то момент мне там случайно попал вот доклад про Atomic CSS вот я сначала посмотрел тоже было немножко скептическое отношение а потом ну как-то взял это попробовал это в проекте потыкал и вдруг вот я понял да что когда я писал в в БМЕ в стандартном подходе мне нужно было думать про много всяких вещей да вот там про название тамму сущности уникально структуру каталогов да вот это всё тут я просто беру накидал вот утилит для силизации и всё и оно работает всё я пошёл дальше мне не нужно больше думать об этом вот я как-то вот реально ощутил вот эту самую лёгкость бытия в процессе вёрстки меня оно вот как-то очень сильно зашло и я вот ну решил этой темой заинтересоваться вот начал тему копать тогда ещё и вот учитывая восемнадцатый год тогда Windн - это была ещё там библиотека вообще с там ну в какая тогда была проблема были тогда популярные инструменты допустим Тахионы вот я упоминал библиотека там то есть там тоже использовались вот эти короткие названия классов но там была проблема сильно с консистентным то что неконсистентный нейминг там был да и ну то есть очень беспорядочный и плюс мало фич да из серии что там было не было ну непонятно было как делать допустим а там для ну где-то для ховера то есть для ховера утилиты генерировать ещё ну то есть какие-то сложные утилиты там было ну плохо это всё потом вот в Тейлвинде там то же самое там в Тейлвинде тогда было очень мало фич да и тоже же проблем с неймингом была вот был атомайзер от Yahхуu как раз-таки в который уже тогда был джит движок и уже тогда по фичам было неплохо но там был мне совсем не понравился вот синтаксис утилит в том плане что там это ну опять же могут зрители найти а вот как это выглядит что там вот со скобочками то есть значение утилиты ты в скобочках должен был писать то есть серии ты цвет задаёшь пишешь там а ну se color и в скобочках пишешь допустим black условно да вот и то есть вот этот синтаксис да он мне прямо ну мне он как-то совсем не зашёл да вот ну и плюс то есть вот такой момент да и вот это всё соответственно вот такие вещи ну и плюс опять же я тогда был всё-таки как бы молодой глупый так скажем да тоже был более горячий такой хотелось тоже какой-то свой проект написать вот я как-то взялся и плюс такая возможность была на работе вот я как-то взялся просто как этот проект инструмент для вот вёрстки с то подходе от Omix CSS взялся там ну внедрил его там на работе с командой использовали да и как-то вот ну делал себе делал да немножко это всё релиз выпускал какие-то фичи вот а то есть просто это был птпроект какое-то время да особо то есть где-то он превосходил по фичам Wiin где-то не особо но там осо ничем не отличался вот но в какой-то момент а ну я поскольку у меня давно ещё была такая идея что мне хотелось мечта вернее стать open source разработчиком да вот что-то такое своё сделать я в какой-то момент решил это оформить в полноценный open source проект вот это был важный шаг да то есть я решил это оформить как полноценный open source и в какой-то момент подумал что вот то есть я смотрел я смотрел что делает Tail Wind и я видел что там нету каких-то нужных мне фич неконсистентный нейминг ну ещё там какие-то проблемы да особм инструменте у меня это получалось то есть я вижу что у меня получается не сильно хуже соответственно в двадцать первом году я как бы решил за него серьёзно взяться скажем так я взял длительный отпуск больше полугода и я по сути переписал свой инструмент а за там условные 7 месяцев то есть я переписал его так что по многим фичам он стал там тоже цей превосходить например какая была цель я делал инструмент который мне был удобен интересен да и второе - это что я пытался решить проблемы которые вот есть у текущих инструментов да и то есть я начинал это как пд-проект но в какой-то момент я увидел что из этого можно попробовать сделать полноценный продукт да и вот я собственно в какой-то момент вот довёл это оформил в продукт а там довёл до уровня когда он может по фичам бадаться с популярными конкурентами да типа того что Элвин да и вот сейчас пробую его дальше развивать как-то продвигать я всё равно знаешь чточе не очень понял потому что когда ты говоришь вот проблема там нейминг я тебе честно скажу я ни разу ни от кого это не слышал то есть если вышую созойти есть там какие-то то есть я понимаю что там баттл переписки что неконсистентный нейминг надо что-то с этим делать или нет такой истории то есть это всё-таки твоя личное восприятие или это как бы некое настроение в сообществе вот прямо про Ишью опять же я не скажу но не раз когда вот при набросах на тот же Taвин вот там не одну статью читал вот про Toxs и про плюсы и минусы да вот когда изучал тему там одно из один из пунктов был про то что там как раз неконсистенты нейминг да то есть из серии ну там какие-то примеры приводить что там допустим м flex то есть утилита для того чтобы дисплейфлекс задать называется просто флекс да а вот утилита чтобы задать там флекс а есть просто свойство такое в сетфлекс сокращё ну сокращённые свойства где там можно для нескольких там flex flexшин ещё что-то указать да вот и указать свойство flex там с каким-то значением оно называется типа flex 1 или flex авто вот и таких примеров там много и вот я это сам увидел и у тех кто то есть такие замечания не раз я слышал да то есть про ишсы опять же не помню такой иус но от скажем так аргументы против тейвинда такие я слышал не раз я тебя понял ну честно скажу конечно всё-таки такие помнишь мы с тобой говорили по поводу уровня популярности и всего остального здесь конечно это имеет огромное значение тайwн всё-таки за ним стоят люди которые в том числе зарабатывают и у них есть возможность всем этим заниматься плюс а ну я понимаю что тебе хотелось тоже свой продукт сделать я просто мне интересно мм есть ли пулреквест или ишиусы на эту тему потому что они же всё-таки развиваются выпускают новые версии и не знаю добавление каких-то реально аляасов уже на их уровне да что у тебя два имени например потом как часто делают добавляют новое имя потом какое-то время они оба работают потом первое деприкейт потом соответственно ещё и утилиту пишут которая реплейсами всё это заменяет то есть там были вообще такие случаи изменений нейминга или нет про нейминг как раз такого не было у них такого не было и подвижек я ну опять же я не скажу что я там много ишу прочитал в Тнвинде но подвижек в эту тему тоже нет может немножко сумбурно рассказывал да про историю что вот одна из претензий у меня например к Tailйвинду что вот как я уже говорил он спроектирован примерно никак то есть там с точки зрения его ну связи с CS в том плане что вот тот же намит мы обсудили но вот например как что в CSсе у нас для многих свойств есть можно несколько значений задать да то есть в Tail in изначально это никак вообще не было предусмотрено когда появились джит движки появилась опция делать произвольные значения для вот утилит ну то что вот ты говорил обсуждали что это есть плюсы есть минусы но такая потребность иногда бывает делать произвольное значения из серии там по ну почти какого-то онлайн стиля это мы обсуждали вот в Tail ind соответственно это никак не было цельно предусмотрено там сделай синтаксис вот этот с квадратными скобками ну чтобы вот произвольное значение задавать и там тебе нужно написать такой сырой CSS который не связан с конвертируемое так называемые значения то есть вот термин конвертация я подразумеваю что вот когда сокращение из значения утилиты превращается в настоящий CSS вот то есть там конвертация в производных значениях её нет вот то есть вот таки и вот много таких вот вещей по там тому вот как связи сэсом оно там никак вообще не предусмотрено да вот и опять же вот простой пример рассмотрели на уровне значений а в CSI там же ещё у нас есть вот и ну вот в Тайлан где это называется да что соответственно там чтобы при хоре оно работало да чтобы там при каких-то медиашениях оно работало да то есть там это тоже то есть там большинство архитектурных решений они принимались так что типа вот понадобилось нам вече ну о'кей давайте вот ну сделаем как-то так да то есть просто как просто набор таких решений как бы архитектурные вещи там принимались да вот а когда вот я свою штуку делал я это именно проектировал так чтобы оно могло органично развиваться вместе с ССом и вот такой пример приведу простой что когда вот ну контейнеer queries которые мы сегодня обсуждали в начале они ведь появились тоже далеко не сразу и в какой-то момент ну когда они стабильными стали во всех браузерах их захотелось и в атомарных инструментах вот этих тоже библиотеках использовать да как получилось в Тейлвинде ребятам пришлось придумать новый синтаксис чтобы использовать контейнеer queries да и там написать там типа плагин на условный там 7080 строчек да в Млате же мне было то есть у меня было так спроектировано что новые правила может хоть пользователь добавить через config то есть ты и базовую поддержку там было забавно базовую поддержку containera queries у меня можно было добавить просто через config никак не меняя вообще код инструмента да то есть и вот у меня как раз оно спроектировано так чтобы органично вот развиваться вместе с CСом и вот по сути с ним дружить да вот такой ответ я бы сказал ну а тут мне хочется сказать ребят очень интересно кто досмотрел до этого момента поделитесь пожалуйста своим мнением чувствуете ли вы что есть такие проблемы в Тайлвинде и насколько вас это трогает насколько вам мешает это работать потому что довольно интересно посмотреть на общее как бы восприятие вот этой проблематики потому что я с ней не знаком а поскольку лвиндом я не пользуюсь для меня в целом сам подход я уже много раз про это говорил он вот для определённых кейсов в которые я не попадаю и поэтому я спокойно к этому отношусь валентин тебе большое спасибо что ты пришёл поделился взаимно спасибо что позвал было приятно здесь находиться здорово тебе приятно находиться у себя дома мне приятно находиться у себя дома да вот как-то так мы и живём ребят если вам понравилось видео поставьте лайк а обязательно поделитесь своим мнением по вот поводу того что мы сейчас обсудили и не забывайте подписываться на мой канал в Телеграме Организованное программирование где я рассказываю про разработку немножко бизнес и обучение программированию всем спасибо

пока เฮ

[музыка]