Skip to content

CSS Do's and Don'ts

Knowing what to do and what to avoid helps keep stylesheets clean, predictable, accessible, performant, and easier to maintain. This guide covers the top 50 CSS do's and don'ts with real examples.

What Are CSS Do's and Don'ts?

CSS do's and don'ts are best practices and anti-patterns that guide developers toward writing better, more maintainable, performant, and accessible stylesheets. Following these guidelines improves code quality across your entire project and helps teams collaborate more effectively.

This guide covers 50+ practical do's and don'ts organized by category, each with real-world examples and explanations of why the practice matters.

Top 50 CSS Do's and Don'ts

✓ DO DON'T Category Why It Matters
1 .card-header .header1, .h-blue Naming Semantic names describe purpose, not appearance or position.
2 .btn-primary .btn-red Naming Purpose-based names survive design changes without updates.
3 .user-profile .userProfile, .User_Profile Naming Consistent kebab-case naming across all stylesheets.
4 .card div (generic selector) Selectors Target specific elements, not generic ones.
5 .nav-link:hover .nav-link:hover a (overly nested) Selectors Keep selector depth shallow for performance and maintainability.
6 display: flex; position: absolute; (for layout) Layout Flexbox is more flexible and responsive than absolute positioning.
7 display: grid; float: left; Layout Grid is cleaner and more semantic than floats for complex layouts.
8 gap: 1rem; margin: 1rem; on every child Spacing Gap prevents margin collapse and is more maintainable.
9 margin: 0 auto; text-align: center; on parent for block alignment Spacing Auto margins reliably center block-level elements.
10 box-sizing: border-box; Default content-box Box Model Border-box makes width/height calculations predictable and consistent.
11 font-size: 1rem; font-size: 16px; (on body) Typography Relative units scale better with user font preferences.
12 line-height: 1.5; line-height: 1.5px; Typography Unitless line-height is proportional to font size.
13 font-family: system-ui, sans-serif; font-family: "Comic Sans"; Typography System fonts load faster and match user expectations.
14 letter-spacing: 0.05em; letter-spacing: 2px; Typography Relative units scale with font size.
15 max-width: 70ch; for body text Full viewport width Typography Optimal line length (50–75 characters) improves readability.
16 4.5:1 color contrast 3:1 or lower contrast Accessibility WCAG AA compliance ensures readability for all users.
17 color: var(--primary); color: #0d6efd; (hardcoded) Colors CSS variables make themes and brand updates consistent.
18 Don't rely on color alone color: red; to indicate error (no icon/text) Accessibility Color-blind users need alternative visual cues.
19 background: linear-gradient(...); background-image: url(bad-image.jpg); (no fallback) Colors Provide fallback colors for failed image loads.
20 color-scheme: light dark; Hardcoded light colors only Accessibility Supports dark mode preferences without CSS rewriting.
21 outline: 3px solid #0d6efd; outline: none; Accessibility Remove outlines responsibly; always provide visible focus indicators.
22 cursor: pointer; on clickable elements Default cursor on buttons UX Users expect visual feedback that an element is clickable.
23 pointer-events: none; on overlays Allowing clicks through overlays UX Prevents accidental interaction with hidden elements.
24 :focus-visible for keyboard users :focus with no indicator Accessibility Keyboard navigation requires clear focus indicators.
25 transition: transform 0.2s ease; transition: all 0.2s ease; Performance Specific properties animate faster than all.
26 transform: translateY(-4px); top: -4px; (for animation) Performance Transform uses GPU and avoids layout recalculation.
27 opacity: 0.5; display: none; visibility: hidden; (for fade) Performance Opacity animates smoothly; other methods cause reflow.
28 Minimize reflows Animating width, height, margin Performance Layout properties trigger expensive recalculations.
29 will-change: transform; No performance hints Performance Hints let browsers optimize animations in advance.
30 Minimize critical CSS Large CSS files in <head> Performance Smaller critical CSS improves First Contentful Paint.
31 max-width: 1200px; Fixed widths like width: 1200px; Responsive Max-width allows flexible growth on large screens.
32 @media (min-width: 768px) @media (max-width: ...) (mobile-last) Responsive Mobile-first is simpler and more maintainable.
33 width: 100%; max-width: 100%; on images No width/height on images Responsive Images scale responsively and prevent layout shift.
34 aspect-ratio: 16 / 9; Hardcoded heights Responsive Aspect ratio prevents Cumulative Layout Shift (CLS).
35 padding: clamp(1rem, 5vw, 3rem); Fixed padding for all screens Responsive Fluid spacing adapts smoothly across screen sizes.
36 prefers-reduced-motion support Animations without escape Accessibility Respects user preferences for motion sensitivity.
37 text-decoration-line: underline; Color alone to indicate links Accessibility Multiple cues help color-blind users identify links.
38 aria-label + visible text Hidden text or no labels Accessibility Assistive technology users need descriptive labels.
39 Skip links visible on focus Hidden skip links Accessibility Keyboard users need to skip repetitive navigation.
40 font-size: 16px; minimum on inputs Smaller font on inputs Accessibility Prevents iOS zoom on focus in form fields.
41 Organize by component Random rule placement Organization Logical grouping makes CSS easier to find and maintain.
42 /* Card Component */ No comments or structure Organization Comments help future developers understand intent.
43 Single responsibility per class .card-title-header-blue-large Organization Focused classes are reusable and composable.
44 Use nesting for logical grouping Flat structure without hierarchy Organization Nested rules show component relationships clearly.
45 Avoid !important Using !important liberally Maintenance Specificity wars make CSS impossible to maintain.
46 content-visibility: auto; Rendering off-screen content Performance Skips rendering invisible content for performance.
47 Use containment for layout isolation Global scope pollution Performance Contained layouts prevent cascading reflows.
48 Logical properties for i18n Hardcoded left, right positioning Maintenance Logical properties support right-to-left languages automatically.
49 Use CSS Grid for complex layouts Hacking layouts with nested flexbox Maintenance Grid is more semantic and easier to read for 2D layouts.
50 Test on real devices Only testing in browser DevTools Testing Real devices expose bugs DevTools emulation misses.

CSS Do's Best Practices

  • Use semantic class names: Names like .button, .card, and .nav-menu clearly describe purpose and survive design changes.
  • Embrace Flexbox and Grid: These modern layout systems are more maintainable, responsive, and predictable than floats or absolute positioning.
  • Prioritize accessibility: High contrast, visible focus states, and alternative visual cues benefit all users and improve SEO.
  • Use CSS variables: Store colors, spacing, fonts, and other tokens in variables for consistency and easy theme updates.
  • Mobile-first approach: Start with mobile styles, then enhance with @media (min-width: ...) queries for larger screens.
  • Optimize performance: Animate only GPU-friendly properties (transform, opacity) and minimize reflows and repaints.
  • Test across devices: Real phones, tablets, and browsers reveal issues DevTools emulation misses.

Common CSS Don'ts to Avoid

  • Don't use overly specific selectors: Avoid IDs and deeply nested selectors that make overrides difficult and impossible to reuse rules.
  • Don't hardcode fixed widths: Fixed widths like width: 1200px; break on mobile. Use max-width with fluid padding instead.
  • Don't animate layout properties: width, height, top, left cause expensive reflows. Use transform instead.
  • Don't remove focus outlines: If you remove outline, always replace it with a visible alternative for keyboard accessibility.
  • Don't rely on color alone: Color-blind users need additional cues (icons, patterns, text) to understand meaning.
  • Don't abuse !important: It breaks the cascade and makes maintenance impossible. Fix specificity instead.
  • Don't ignore user preferences: Respect prefers-reduced-motion, prefers-color-scheme, and font-size preferences.

Do's and Don'ts by Role

Role DO DON'T
Designer Create design tokens (colors, spacing, fonts) Specify exact pixels without system
Frontend Dev Implement with semantic classes Use inline styles
Team Lead Establish coding standards Allow inconsistent naming
QA/Tester Test on real devices and browsers Test only in Chrome DevTools

Key Takeaways

  • Names matter: Semantic class names (not appearance-based) are the foundation of maintainable CSS.
  • Layout tools have evolved: Use Flexbox and Grid instead of floats or absolute positioning for cleaner, more responsive designs.
  • Accessibility is not optional: High contrast, keyboard support, and focus indicators benefit all users and improve SEO rankings.
  • Performance comes from CSS: Animate transforms, respect prefers-reduced-motion, and avoid layout properties to keep pages fast.
  • Mobile-first saves time: Start mobile, then enhance. The reverse requires more overrides and is harder to maintain.
  • Real testing catches problems: DevTools emulation is helpful, but real devices reveal issues you won't find in a simulator.
  • Consistency scales: CSS variables, component-based classes, and team guidelines make large projects maintainable.

Pro Tip: The 80/20 Rule for CSS Do's and Don'ts

Most CSS problems come from a few bad habits: overly specific selectors, hardcoded widths, animating layout properties, and ignoring accessibility. Focus on fixing these five things first, and your CSS will be 80% better. The remaining 20% of optimization happens naturally as you gain experience.

Quick Reference Checklist

Before shipping CSS, run through this quick checklist:

  • ☐ Class names describe purpose, not appearance
  • ☐ No selectors with IDs or deep nesting
  • ☐ Layout uses Flexbox or Grid, not floats
  • ☐ Fixed widths replaced with max-width + padding
  • ☐ Animations use transform or opacity
  • ☐ Color contrast passes WCAG AA (4.5:1)
  • ☐ Focus indicators are visible
  • ☐ Mobile styles first, then media queries
  • ☐ CSS variables used for tokens (colors, spacing)
  • ☐ Tested on real devices (not just DevTools)