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