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