css

SKILL.md

CSS Development Guidelines

Core Principles

Write semantic HTML to improve accessibility and SEO

Use CSS for styling, avoiding inline styles

Ensure responsive design using media queries and flexible layouts

Prioritize external stylesheets over inline or embedded styles

Layout Techniques

Flexbox

Use Flexbox for one-dimensional layouts (rows or columns)

Leverage justify-content and align-items for alignment

Use flex-wrap for responsive wrapping behavior

Prefer gap property over margins for consistent spacing

Grid

Use CSS Grid for two-dimensional layouts

Define grid templates with grid-template-columns and grid-template-rows

Use grid-area for named template areas

Leverage auto-fit and auto-fill for responsive grids

Units and Typography

Use rem units for typography to respect user preferences

Use em units for component-relative sizing

Avoid px for font sizes; reserve for borders and fixed elements

Implement fluid typography with clamp() when appropriate

Use viewport units (vw, vh) thoughtfully for full-screen layouts

CSS Variables (Custom Properties)

Define design tokens as CSS variables on :root

Use variables for colors, spacing, typography, and shadows

Implement theming by overriding variables in different contexts

Name variables semantically (e.g., --color-primary, --spacing-md)

Naming Conventions

BEM Methodology

Block: Standalone component (e.g., .card)

Element: Part of a block (e.g., .card__title)

Modifier: Variation of block or element (e.g., .card--featured)

Best Practices

Use lowercase with hyphens for class names

Avoid IDs for styling; reserve for JavaScript hooks

Keep specificity low by using single class selectors

Scope styles to components to prevent conflicts

Specificity Management

Maintain specificity at 0-1-0 (single class) when possible

Avoid !important declarations

Use cascading intentionally, not accidentally

Consider CSS Layers (@layer) for specificity control

Responsive Design

Implement mobile-first media queries

Use relative units for flexible layouts

Test across multiple viewport sizes

Consider container queries for component-level responsiveness

Performance

Minimize selector complexity

Avoid deeply nested selectors

Use efficient selectors (class over element)

Leverage CSS containment for isolated components

Consider critical CSS for above-the-fold content

Modern CSS Features

Use aspect-ratio for maintaining proportions

Leverage gap in Flexbox and Grid

Use logical properties (margin-inline, padding-block)

Implement smooth transitions with transition property

Use @supports for feature detection

Organization

Structure stylesheets logically (base, layout, components, utilities)

Keep files modular and focused

Document complex styles with comments

Use a consistent property order within declarations

Browser Compatibility

Use vendor prefixes when necessary (consider Autoprefixer)

Test across target browsers

Provide fallbacks for newer features

Use progressive enhancement approach

Accessibility

Ensure sufficient color contrast (WCAG AA minimum)

Provide visible focus styles for keyboard navigation

Avoid hiding content in ways that affect screen readers

Use prefers-reduced-motion media query for animations