Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Avoid magic spacing values; use layout properties that adapt
Don't pin elements with hardcoded paddings/offsets that break when surrounding sizes change; prefer flexbox alignment, percentages, or anchoring (right: 0) so layout stays correct when paddings or container sizes change.
Bad example
| 1 | .timeOfDayContainer { padding-top: rem-calc(10); } |
| 2 | .x::after { right: rem-calc(175); } // breaks at other resolutions |
Explanation (EN)
An offset coupled to another element's incidental size breaks when that size changes.
Objašnjenje (HR)
Good example
| 1 | .buttonsContainer { display: flex; align-items: center; } |
| 2 | .x { position: relative; } |
| 3 | .x::after { position: absolute; right: 0; } |
Explanation (EN)
The example supplies the formatting and containing-block contexts required for its alignment and anchoring.
Objašnjenje (HR)
Notes (EN)
When an offset exists to align against a variable sibling or container, verify the intended relationship and express it through the existing layout model.
Exceptions / Tradeoffs (EN)
Fixed design spacing and optical offsets may be intentional. Adding align-items has no effect without a compatible flex/grid context and right:0 requires the correct containing block.