CSS Development Standards

REFERENCE MODE: This skill provides reference material. Load specific standards on-demand based on current task.

Overview

Provides modern CSS development standards for CUI projects, covering fundamentals, responsive design patterns, performance optimization, accessibility, and build tooling.

Standards Documents

• css-essentials.md - Core principles, naming conventions (BEM), custom properties, selectors, file structure, component architecture
• css-responsive.md - Mobile-first approach, Grid/Flexbox layouts, Container Queries, fluid typography, responsive patterns
• css-quality-tooling.md - Performance optimization, accessibility standards, dark mode, PostCSS/Stylelint/Prettier setup, build pipeline

What This Skill Provides

CSS Essentials

• Modern CSS features (custom properties, Grid, Flexbox, modern functions)
• BEM naming methodology and semantic naming patterns
• Selector best practices (low specificity, avoiding IDs, nesting limits)
• Property organization and file structure
• Component architecture patterns
• Utility classes and hybrid approach

Responsive Design

• Mobile-first development patterns
• CSS Grid layouts (dashboard, content grid, auto-fit)
• Flexbox patterns (navigation, cards, centering)
• Container Queries for responsive components
• Fluid typography with clamp()
• Responsive images, spacing, and common patterns

Quality & Tooling

• Performance (efficient selectors, containment, critical CSS, bundle optimization)
• Accessibility (focus management, color contrast, motion preferences, touch targets)
• Dark mode (system preference and manual toggle)
• PostCSS configuration (import, nested, autoprefixer, csso)
• Stylelint setup (property ordering, naming patterns, best practices)
• Build pipeline (development, production, quality checks)
• CI/CD integration

When to Activate

Use this skill when:

• Writing or modifying CSS code
• Setting up CSS tooling (PostCSS, Stylelint, Prettier)
• Implementing design systems and theming
• Building responsive layouts
• Optimizing CSS performance
• Ensuring accessibility compliance
• Reviewing CSS code

Workflow

1. Identify task - Determine which standards document(s) apply
2. Apply standards - Follow BEM naming, use custom properties, implement responsive patterns, ensure accessibility
3. Quality check - Run Stylelint, Prettier, test responsiveness and accessibility
4. Document - Comment complex patterns, explain custom properties

Best Practices

1. Use CSS custom properties for design tokens
2. Follow mobile-first approach
3. Use BEM naming convention
4. Implement container queries for responsive components
5. Support dark mode via custom properties
6. Ensure accessibility (focus states, motion preferences, contrast ratios)
7. Run quality tools before committing