css

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