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