Miriam Suzanne makes a wonderful point about how I'm processing and thinking about @layers inside CSS:
This is an exercise in thinking through what different concerns go into building a site design. I’m trying to give each viewpoint the stand-alone attention that it deserves, to see what I learn from the process. And then I’m layering all those viewpoints, to see how they cascade together.
Emphasis her own.
It's one of the challenging things about CSS but also the most exciting (to me).
Layers facilitate the process of developing a website from a "content out" point of view too.
- Starting with HTML. Work out the content's structure.
- Start with the
@layer foundationstyles, getting the bits all together from the responsive empty slate. - Add a
@layer frameworkto start building the visual infrastructure. - Add a
@layer layout, systemfor laying things out and having fun with further details like light and dark modes, increasing typographic styles, etc. - Keep going, as you see fit.
Working well the the idea progressive enhancement but less enhancing here, more intentional.
Building while designing. Designing while building. Progressively, in browser.