Cтатьи по тегу «каскадные слои»

Непостижимые алгоритмы Твиттера принесли мне в ленту занятный вопрос Саймона Хойберга, автора нескольких книг про JavaScript:

Почему ‘!important’ перекрывает значения в css? 🤔

Для меня это читается как «not important», т.е. «не важно», и я ждал бы от него обратного 😅

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

И мне вдруг пришел в голову неожиданный ответ на этот вопрос, которым я хочу поделиться. Предупреждаю: это ни разу не официальное определение из спецификации, а скорее полушуточный мнемонический прием, поясняющий эту «странность» и, как мне кажется, помогающий лучше понять и запомнить ее логику.

Верите или нет, но каскадные слои — новинка CSS-модуля каскада и наследования 5 уровня, казалось бы, только-только появившаяся в черновиках — уже более двух недель как кандидат в рекомендации, без пяти минут стандарт! И W3C вовсю призывает их реализовывать. А браузеры вот-вот последуют этому призыву: уже 8 февраля по плану выходит Firefox 97 с их поддержкой по дефолту, вскоре за ним подтянется Chrome 99 (и всё остальное, основанное на его движке). Даже в Safari их уже можно «потрогать» (этот браузер последнее время вообще радует CSS-новинками). Так что есть все шансы, что к концу года поддержка каскадных слоев станет практически повсеместной!

Пожалуй, самое время присмотреться к новинке повнимательнее: она может в корне изменить наш подход к организации стилей и забыть про хаки и !important-ы для «перебивки» специфичности. Например, Мануэль Матузович навскидку приводит три случая, где эти слои здорово упростят жизнь: уменьшение веса базовых стилей, «борьба» с излишне специфичными стилями сторонних компонентов и служебные классы. А где бы захотели их применить вы?