css

CSS

Predictability is the highest CSS virtue. If your styles require !important to work, restructure the cascade.

CSS rewards explicit, low-specificity selectors and intentional cascade ordering. Prefer boring, readable patterns over clever one-liners.

References

• Layout — [${CLAUDE_SKILL_DIR}/references/layout.md]: Flex shorthand values, grid details (subgrid, implicit rows, alignment), layout patterns
• Modern CSS — [${CLAUDE_SKILL_DIR}/references/modern-css.md]: Extended modern CSS patterns and examples
• SCSS — [${CLAUDE_SKILL_DIR}/references/scss.md]: @forward patterns, module configuration, built-in modules, file organization
• Responsive — [${CLAUDE_SKILL_DIR}/references/responsive.md]: Extended responsive design patterns and examples
• Methodologies — [${CLAUDE_SKILL_DIR}/references/methodologies.md]: Methodology patterns and architecture details

Selectors and Specificity

• Single class selectors by default — keep specificity flat at 0-1-0
• Never use ID selectors for styling — IDs are for anchors and JS hooks
• Never qualify classes with elements — .error not div.error
• Max nesting depth: 3 levels — deeper nesting couples CSS to DOM structure
• Avoid !important — use cascade layers or restructure selectors instead; only valid use is in a low-priority reset layer for truly essential styles
• Use :where() to zero-out specificity when needed — :where(.card) .title has 0-0-1 specificity
• Use :is() with awareness — it takes the highest specificity of its arguments
• Flatten nested selectors in SCSS — ability to nest does not mean you should

Layout Systems

Choosing Flexbox vs Grid

Use Case	System
One-dimensional flow (row or column)	Flexbox
Two-dimensional layout (rows AND columns)	Grid
Content-driven sizing	Flexbox
Layout-driven sizing	Grid
Component internals (nav items, card content)	Flexbox
Page-level structure, complex arrangements	Grid
Items need to wrap naturally	Flexbox
Precise placement on named lines/areas	Grid