Box/FlexBox props (preferred) - Use design system props
className + SCSS - When props unavailable
Escalate to UX Guild - When no pattern exists
Never use:
❌ sx prop or sxStyles
❌ styled-components
❌ Inline style={{}} (except rare dynamic values)
❌ CSS modules
className:
Box and FlexBox props for layout and paint
className only for states those props do not cover, in @layer chroma.overrides
bem() is not an export of @prepared911/ui
Design System First
Always check if Box/FlexBox props can handle the styling:
Co-located SCSS
When Box props aren't enough, use className + co-located SCSS:
File Naming
Match component filename convention:
MyComponent.tsx → MyComponent.scss (PascalCase)
filter-bar.tsx → filter-bar.scss (kebab-case)
Single stylesheet in directory → styles.scss
Importing
BEM Naming
Block Element Modifier
With Sass &
className
bem() and prefixClass() are not exports of @prepared911/ui. Layout and paint go through Box and FlexBox props. Use className for interaction states the props do not cover, and put those rules in @layer chroma.overrides.
Generates:
Design Tokens
Always use design tokens instead of hardcoded values:
Max 2 Levels
Only .block and .block__element. Never .block__element__subelement.