- From: Xiaocheng Hu via GitHub <sysbot+gh@w3.org>
- Date: Fri, 01 Mar 2024 11:02:10 +0000
- To: public-css-archive@w3.org
Hmm, actually I found a case where layers can't fix (modified from https://esbuild.github.io/content-types/#css-import-order): Say we are using two libraries `a.css` and `b.css`, and in case of conflict, we want `b` to take precedence. So it ends up like: ```css @import url(a.css) layer(a); @import url(b.css) layer(b); ``` However, `a.css` and `b.css` both have a reset: ```css @import url(reset.css) layer(reset); /* real business*/ ``` Then the import order is still `reset, a, reset, b`, causing the double-reset issue as in the original example. `@import-once` will fix this case, but only if `a` and `b` use the same reset. If eg they are from different sources with different reset sheets, then `@import-once` doesn't help, either. I feel like this is a more general issue that we can't arbitrarily re-order imported sheets, and have limited ways to tackle it if these sheets do overlapping things. One way is `@layer`, and the other is `!important`, which is known to be an antipattern if it's used to reorder style rules. I don't have a good idea how this can be fixed from the CSS language side. Maybe it's much simpler if CSS authors make sure one sheet has one unique purpose, for example, a sheet doing actual styling should not perform a reset on its own. In other words, each style sheet should be targetting a particular layer in the overall business -- which perfectly matches the purpose of `@layer`... --- > You can influence which named thing (keyframe animation, custom property,...) is declared last and thus "wins", but you cannot use both side by side. That's unfortunate. But CSS modules can't help here, either. It's a general design issue of CSS that everything is the global namespace (except layers), and the current solution/relief is to scope things by shadow DOM. -- GitHub Notification of comment by xiaochengh Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6130#issuecomment-1972981369 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 1 March 2024 11:02:11 UTC