The user/browser specifies initial preferences and hands the remaining influence over to the document. – Håkon Lie
If conflicts arise the user should have the last word, but one should also allow the author to attach style hints. – Håkon Lie
🖥 User Agent Defaults (goes first) 👥 User Preferences 🎨 Author Styles ❗🎨 Author Important ❗👥 User Important ❗🖥 User Agent Important (most power)
@layer generic { audio[controls] { display: block; } } @layer generic { [hidden] { display: none !important; } }
@layer settings { … } @layer tools { … } @layer generic { … } @layer elements { … } @layer objects { … } @layer components { … } @layer overrides { … }
@layer framework { #menu .dropdown .menu-item { background: whitesmoke; } } @layer override { .menu-item { background: lightcyan; } }
@layer default { … } @layer theme { … } /* still a lower layer than "theme" styles */ @layer default { … }
/* establish layer order */ @layer one, two, three; /* add code to layers as needed */ @import url(two.css) layer(two); @layer three { … } @layer one { … } @layer two { … }
@import url(framework.css) layer(framework.base); @layer framework.overrides { /* anything here will override framework.base */ }
Already Sorting Layers tools (Sass, no output) config (Sass, no output) reset initial patterns layout components (Sometimes SFC) utilities (eg .visually-hidden)
Wrap Components <template>…</template> <script>…</script> <style lang='scss'> @layer components { /* all our component styles */ } </style>