Rules Hub
Code Ruleset
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2stack specificStack: css
cssperformancehtmlfouc
Load stylesheets in the document head, not the body
Import or link CSS in the head so styles are available before content renders, avoiding flashes of unstyled content.
PR: frontpage-web · org-mining-hist-2026-06Created: Jun 18, 2026
Bad example
Old codehtml
| 1 | <body> |
| 2 | <link rel="stylesheet" href="article.css" /> |
| 3 | <div id="app"></div> |
| 4 | </body> |
Explanation (EN)
Late critical CSS can produce an unstyled first paint or a layout shift.
Objašnjenje (HR)
Good example
New codehtml
| 1 | <head> |
| 2 | <link rel="stylesheet" href="article.css" /> |
| 3 | </head> |
| 4 | <body><div id="app"></div></body> |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
For manually linked critical page styles, use the framework-supported head/entry mechanism so required styles load with predictable ordering before visible content.
Exceptions / Tradeoffs (EN)
Modern frameworks may hoist/deduplicate stylesheet resources or stream component styles. Do not move imports in ways that violate bundler/framework entry rules.