CSS Best Practices

CSS Best Practices

This skill provides a set of rules and best practices for writing modern, performant, and maintainable CSS. It focuses on stability, modern layout engines, and user-centric accessibility.

This document is designed for AI agents and LLMs (but not limited to) to follow when creating/generating, debugging and maintaining CSS in any format or using any CSS framework, tool and preprocessor in any kind of web project.

Core Rules

• Layout Stability
• Maintainability & Cascade
• Container Queries
• Logical Properties
• Performance & Animation
• Accessibility

Usage

Activate this skill when generating new CSS files, refactoring legacy styles, or debugging UI performance issues.

Read individual reference files for detailed explanations and code examples:

references/layout-stability.md
references/specificity-cascade.md
references/container-queries.md

Each reference file contains:

• Title and basic description/context
• Correct code example with explanation
• Optionally incorrect code example with explanation
• Brief explanation of why it matters