If you declare layers in one stylesheet, do you have to have the styles associated with those layers within or imported into the same stylesheet, or can they exist in completely different files, as long as they're all linked into the same html via the head?
@sarajw And to answer your primary question, once a layer name is established you can use it in different files. It's recommended to do order-setting for all your layers as the first step in your first imported file, eg
@layer reset, default, primary, secondary;
That way it's clear where the order is established
@mrtrimble@sarajw please don't extend others' layers. instead, add your own right after theirs. you can even wrap the design system layer in your own layer.
@sarajw@mrtrimble Argh, how did I not even know about layers until now? Super glad I read this before tearing out all my CSS and re-writing it, which I 100% need to do because it’s a shambles.
@sarajw layers transcend the idea of stylesheets, so yes you can use the same layers in different css files.
the only thing to pay attention to in the end is the order of rules: make sure your layer statements come before all other stylesheets are included in the head.
Follow-up question - if I'd rather not have all the CSS in one big long file, what's more performant, importing into one central file or just linking separately?
Add comment