Пожалуй, забыл рассказать самое главное - как управлять всем этим добром через JavaScript. На данный момент работает такая схема: tppr.me/GSvA4 В HTML в head добавляем два тега style, в первом задается порядок слоев, во втором - импортируется основной файл стилей и файл с темизацией с присвоением имен слоев. Если нужно поменять порядок темы, то нужно отредачить первый тег style, поменять строки местами. Костыльно, но это то, что есть на данный момент. Можно было бы написать утилитарную функцию, которая делает это изящнее. Вообще, уверен, что JS API к этой фиче рано или поздно должны подвезти.

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

@AleksanderLamkov

10 ай бұрын

Согласен, удобное API не помешало бы. На данный момент работает такая схема: tppr.me/GSvA4 В HTML в head добавляем два тега style, в первом задается порядок слоев, во втором - импортируется основной файл стилей и файл с темизацией с присвоением имен слоев. Если нужно поменять порядок темы, то нужно отредачить первый тег style, поменять строки местами. Костыльно, но это то, что есть на данный момент.

Самое важное забыл сказать, что стили, у которых не задан layer будут всегда иметь самую высшую специфичность ибо попадут в анонимный слой. И, я так понимаю, чтобы засосать ваш любимый фреймворк в слой, придется юзать костыль с import + layer, чтобы контролировать в какой слой утечет фреймворк. Жаль, но пока нет возможности указать слой в атрибутах style тега (а хотелось бы, привет сборщики)

Стоит упоминуть, что нужно обновить style-loader до 3.3.0 для поддержки @import layer. Ну и mini-css-extract-plugin до 2.7.4

Ой, ну это прям дип дайв в каскады. Надо еще такого контента. Ты хорош 😉

А как этим делом управлять через js?

@AleksanderLamkov

10 ай бұрын

Хм. Моё упущение, что не рассказал об этом. На данный момент работает такая схема: tppr.me/GSvA4 В HTML в head добавляем два тега style, в первом задается порядок слоев, во втором - импортируется основной файл стилей и файл с темизацией с присвоением имен слоев. Если нужно поменять порядок темы, то нужно отредачить первый тег style, поменять строки местами. Костыльно, но это то, что есть на данный момент. Можно было бы написать утилитарную функцию, которая делает это изящнее. Вообще, уверен, что JS API к этой фиче рано или поздно должны подвезти.

Я работаю со своим фреймворком и у меня все организовано таким образом что я просто не вижу зачем мне это и как его применять, ну это пока что, поэтому я и смотрю ролики на эту тему возможно найду идеи как или если столкнусь с такой проблемой как решить. А вот @scope это фишку я жду с нетерпением, а @layer я не вижу как я могу применить, для управления цветами для тем использую дизайн токены поэтому не подходит. Но как было в свое время с subgrid я тоже не видел за каким оно мне надо, пока не столкнулся с оптимизацией некоторых элементов и для выравнивания мне идеально подходит именно subgrid. К чему я? Если вы не видите зачем вам нужно или нет новые фишки из СSS это не значит что это вообще не надо. Все мы создаем разные веши, я допустим только сайты, а кто-то еще и нативные приложения и там что-то может быть по-другому и просто новая фича вам еще не пригодилась, но не значит что она бесполезная.

Хороший стиль изложения, спасибо)

Не сильно понял про слои с theme, это чисто для примера было или это используется в практике? потому что тогда не ясно как менять тему сайта на самом сайте

@AleksanderLamkov

7 ай бұрын

Привет! В закрепленном комментарии писал о том, как менять слои через JS. Ну а дальше всё также, как делали с переключением темы и раньше: функция смены темы привязывается к какому-нибудь чекбоксу и выбор пользователя параллельно записывается в localStorage, чтобы после перезагрузки страницы была нужная тема. На практике в реальных проектах я @layers ещё не применял, но сам функционал темизации на своём сайте (aleksanderlamkov.ru/) когда-то давно делал так: github.com/aleksanderlamkov/aleksanderlamkov/blob/main/src/components/theme-switcher/index.js

Лайк, хорошая подача и чистая дикция, супер. Кстати что за шрифт в редакторе такой прикольный, квадратненький?

@AleksanderLamkov

10 ай бұрын

Спасибо! Шрифт - JetBrains Mono.

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

@AleksanderLamkov

10 ай бұрын

Либо так, либо создать отдельный файл, например, custom.css и подключить оба файла таким образом: @layer main, custom; @import url('./main.css') layer(main); @import url('./custom.css') layer(custom);

👋 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

Спасибо!

Очень круто! Спасибо)

когда-нибудь доберусь до этого на практике)

Гуд. Вот такого больше. Забей на этих новичков - сами разберутся (шутка).

Layer это использует вроде TW уже давно

А просто сделать z-css индекс не судьба?

@AleksanderLamkov

10 ай бұрын

Это не про z-index, а про специфичность и каскад.

@WERWOLION

10 ай бұрын

@@AleksanderLamkov ты не понял. Сделать z-css, не индекс. Индекс я написал для того чтобы ты понял как это работает. z-css 1, auto, 10000000 И не нужно танцев в бабуинами. При этом чтобы знать какой z-css, задать тупо смотришь в девтул. Ой как сложно наверное такое сделать , ведь он уже существует, просто не меняется через сss

@AleksanderLamkov

10 ай бұрын

​@@WERWOLION ага, теперь понял твою идею, интересно. Ну, спецификация - вещь адаптивная, может когда-нибудь и сделают нечто подобное :)

@geldelian

6 ай бұрын

@@WERWOLION а что за z-css, который не меняется через css?

@WERWOLION

6 ай бұрын

@@geldelian z-css должен меняться , это тоже самое что z index только для величины приоретета свойств

Твои ролики очки обучательные.

Громкость видео хотелось бы повыше, а то довольно тихо!

@AleksanderLamkov

10 ай бұрын

Спасибо, учту!

@evgenyyakushenko4636

10 ай бұрын

@@AleksanderLamkov А так подача материала очень понравилась!

Не нравится мне эта концепция. Прогибаются под говнокодеров?)) Если человек не осилил понятия каскада и специфичности, то ему решили навалить ещё и эти слои? Ну и мне дико не нравится название - ну какие это нафиг слои в контексте css? Под это определение больше подходит z-index

@AleksanderLamkov

4 ай бұрын

Я думаю, что эта функциональность как минимум упростит поддержку проектов, где в основе интерфейс стилизован CSS-библиотекой, типа MaterialUI / AntDesign, и где нужно точечно для определенного элемента что-то переопределить.

5:05 Автор, вы уверены, что то что не наговорили глупостей, рассказывая о месте Layers в каскаде? Цитирую вас: "их приоритет выше, чем любой из вышеперечисленных", "слою наплевать на наличие important и даже на inline в атрибуте style", "он переопределит всё, что нужно". Ведь показанная вами картинка с приоритетами прямо противоречит вашим словам. Кстати, к картинке тоже есть претензия, точнее, к её самому верхнему слою. Если схема строится по принципу чем выше слой - тем выше приоритет в каскаде, этот принцип должен выдерживаться и для содержимого первого слоя. А у вас этот порядок развёрнут с ног на голову.

@AleksanderLamkov

10 ай бұрын

Привет! Спасибо за замечания. Буду откровенен. Моя цель - донести не сухую информацию строго по спецификации, а обработать её и выдать так, как её понял я. Про порядок в каскаде я нарочито показал и рассказал так (сверху вниз, от источников стилей до всем известных правил), ибо посчитал, что так людям будет понятнее. Инлайновые стили перезапишут браузерные/пользовательские/авторские, layers перезапишет все вышеупомянутое, а дальше работают стандартые правила - чем селектор специфичнее и/или ниже в коде, тем правило "главнее". Не считаю, что в моих суждениях есть противоречия.

@sersalikov

10 ай бұрын

@@AleksanderLamkov Боюсь, вы не поняли моё замечание. Я нисколько не сомневаюсь, что вы, будучи профессиональным разработчиком, правильно понимаете базовые вещи CSS. Однако я обращаю внимание, что слушая то, что вы говорите, можно прийти к ложному пониманию, противоречащему спецификации. Вы говорите/пишите "Инлайновые стили перезапишут браузерные/пользовательские/авторские, layers перезапишет все вышеупомянутое" - но это неправда, инлайновые стили важнее слоёв, они не могут их перезаписать! И ваша схема это верно показывает, инлайн стили у вас выше, чем слои. А поскольку инлайновые стили - всегда авторские, то и фраза "Инлайновые стили перезапишут браузерные/пользовательские/авторские" - бессмысленна. В вашей схеме более важное находится выше. Специфичность важнее порядка следования, слои важнее специфичности и так далее. Но этот принцип нарушается для источников. Там более важное находится ниже. Возникает внутренне противоречие в оформлении схемы, а это затрудняет понимание/усвоение материала.

@AleksanderLamkov

10 ай бұрын

@@sersalikov да, вы правы, в этом высказывании про перезапись инлайновых стилей я оговорился, спасибо за то, что указали. Про схему - учту, в следующий раз при объяснении каскада сделаю иначе.

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

@AleksanderLamkov

8 күн бұрын

Привет! Если ты только начал изучение CSS, то советую сначала ознакомиться с моим бесплатным курсом: kzread.info/head/PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz Текущая тема видео (layers) не для новичков, только запутает. Это новая фишка CSS, которая даже не всеми браузерами поддерживается.

@AlexKid555

8 күн бұрын

@@AleksanderLamkov я на мдн обучаюсь, но спасибо за инфу, да я уже понял что это лишняя тема просто хотел понять ее смысл так как в мдн там она почти сразу обьясняется

Привет, наткнулся на твой канал и мне понравилась твоя подача, предлагаю ролик по css для профи, интересно что профессионалы используют в css (можно даже препроцессоры сюда добавить)

@AleksanderLamkov

10 ай бұрын

Привет! Спасибо :) По поводу идеи - всё будет, но постепенно, сначала курс по основам, затем более сложные вещи, в т. ч. препроцессор.