CSS stylesheets order

Hi all,

After dealing with some styles priority issues in my CSS workflow, I found this:

And I was wondering why global styles were included after global stylesheets in Cwicly’s frontend.

I personnally find more intuitive that global styles take precedence over global stylesheets.

Let me explain my style workflow, and I would really be interested to read your own.
I might take it the wrong side… :wink:

  • FIRST, in my global stylesheets, I define global CSS variables like colors, font sizes, etc., as well as default (or failsafe) colors, sizes or font-weights for body/headings, etc. It is kind of a default framework CSS reset.
    (This is handy when you start a new project because everything is pretty decent – well, regarding my personal taste – with a simple stylesheet copy-paste.)

  • THEN, I customize things in Cwicly global styles like H1 color, H3 line-height, etc…

  • FINALLY, I use global/virtual/block classes to fine tune (no issue with that).

  • (Every now and then I use global stylesheet to customize or fine tune even more when it is more practical that inspector fields, but then I use more specific CSS selectors, but that’s another story.)

What do you think?
Do you use global stylesheets for your default/reset CSS or utility framework or custom/specific only?
Or for variables only but not default rules?
Do you have use cases where the current order is obviously the best?

I’m ready to adapt my stylesheets to this order… just wanted to know other’s practices :wink: