# CSS Best Practices

> Guidelines for building modern, performant, and accessible CSS using MDN best practices. Use this when styling components, fixing layout shifts, or optimizing CSS performance.

- Skill: `vril-labs/css-best-practices` (Agent Skill, multi-file: 12 files)
- Install (CLI): `npx skillmds@latest add vril-labs/css-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vril-labs/css-best-practices/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: VRIL-LABS (https://skillmd.com/u/vril-labs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vril-labs/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](./references/layout-stability.md)
- [Maintainability & Cascade](./references/specificity-cascade.md)
- [Container Queries](./references/container-queries.md)
- [Logical Properties](./references/logical-properties.md)
- [Performance & Animation](./references/performance-animations.md)
- [Accessibility](./references/accessibility-motion.md)

## 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