Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Document non-obvious !important overrides
When !important is genuinely needed to beat framework-injected styles, explain the conflict in a short comment.
Bad example
| 1 | const drawerSx = { |
| 2 | zIndex: '1400 !important', |
| 3 | }; |
Explanation (EN)
Without context, the override looks accidental. Reviewers cannot tell whether it solves a real framework specificity issue or is masking dead CSS.
Objašnjenje (HR)
Bez konteksta override izgleda slucajno. Revieweri ne mogu znati rjesava li stvarni framework specificity problem ili skriva mrtvi CSS.
Good example
| 1 | const drawerSx = { |
| 2 | // Needs !important to override MUI's injected drawer z-index when this sheet must stack above another mobile drawer. |
| 3 | zIndex: '1400 !important', |
| 4 | }; |
Explanation (EN)
The comment records the exact conflict, so the next reviewer knows why a normal override was not enough and what can be revisited later.
Objašnjenje (HR)
Komentar biljezi tocni konflikt pa sljedeci reviewer zna zasto obican override nije bio dovoljan i sto kasnije moze ponovno provjeriti.
Exceptions / Tradeoffs (EN)
If the override can be removed by switching to the library API or theme override cleanly in the same change, prefer removing it over documenting it.
Iznimke / Tradeoffi (HR)
Ako se override moze ukloniti prelaskom na library API ili theme override u istom changeu, to je bolje nego samo dokumentirati ga.