Designing the Foundation

Let's create a folder structure for a real project, using everything we learned.

src/styles/
├── abstracts/          # OKLCH Variables, Tokens, Mixins
├── base/               # Reset, Typography, @layer base
├── layout/             # Grids, Header, Footer, @layer layout
├── components/         # c-button, c-input, c-card, @layer components
├── utilities/          # u-mt-10, u-text-center, @layer utilities
└── main.css            # Entry point: assembling all @layer

Code in main.css:

@layer base, layout, components, utilities;

@import 'base/reset.css';
@import 'components/button.css';
/* ... and so on */