reset: as the name suggests, let's add our reset on this layer
global: easy one too, adds any global stuff to this, like, setting html background color and what not
utility: all utilities go here, colors, spacing, etc
component: this one will require touching quite a few files, but the idea is to add component styles to this layer that way users of the component system can bump specificity with ease
Description
CSS Layer is here and it's well supported. We should use it! It will give us even more control over specificity.
For starters, let's create 4 layers:
@layer reset, global, utility, componentreset: as the name suggests, let's add our reset on this layerglobal: easy one too, adds any global stuff to this, like, setting html background color and what notutility: all utilities go here, colors, spacing, etccomponent: this one will require touching quite a few files, but the idea is to add component styles to this layer that way users of the component system can bump specificity with ease