+3
-3
CLAUDE.md
+3
-3
CLAUDE.md
···
7
7
- `npm run build:preview`: Builds non-minified CSS to `dist-preview/stylebase.css`
8
8
9
9
## Code Style Guidelines
10
-
- CSS is organized using cascade layers: `@layer webfont, token, defaults, utility, composition`
10
+
- CSS is organized using cascade layers: `@layer webfont, token, defaults, utility, layout`
11
11
- `webfont`: Only for webfont imports
12
12
- `token`: Only for defining design tokens/variables, no classes
13
13
- `defaults`: Only for styling HTML elements, not classes
14
14
- `utility`: Utility classes with namespaced format using escaped colons
15
-
- `composition`: Layout classes with namespaced format using escaped colons
15
+
- `layout`: Layout classes with namespaced format using escaped colons
16
16
- CSS variables use kebab-case with `--` prefix (e.g., `--step-0`, `--waterfall-gap`)
17
17
- Class naming follows namespaced format with escaped colons (e.g., `l\:waterfall`) only for layouts and utilities
18
18
- Use 4-space indentation in all CSS files
···
20
20
- Fluid typography uses `clamp()` for responsive sizing
21
21
- Import modules with their appropriate layer: `@import "module/file.css" layer(layername)`
22
22
- Maintain version information in banner comment (handled by PostCSS config)
23
-
- Files should only contain CSS related to their specific purpose (follow single responsibility)
23
+
- Files should only contain CSS related to their specific purpose (follow single responsibility)