Order CSS files correctly

Incorrect CSS/JS order causes render-blocking delays and FOUC—users see unstyled content while waiting for styles to load.

Quick Reference

• Load all CSS files before JavaScript in the document head
• Use async/defer for non-critical JavaScript
• Inline critical CSS for faster first paint
• Prevents FOUC (Flash of Unstyled Content)

Check

Verify that all CSS files are loaded before JavaScript files in the document head to prevent render-blocking and ensure proper styling precedence.

Fix

Reorganize head section to load all CSS files before JavaScript files, except for asynchronous scripts that don't block rendering.

Explain

Explain why CSS should load before JavaScript to prevent FOUC (Flash of Unstyled Content) and ensure optimal rendering performance.

Code Review

Review stylesheets, component styles, and responsive states related to Order CSS files correctly. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.

---

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/css/css-order