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).
Match sizing already used by comparable components instead of introducing a new value
Before hardcoding a new size/spacing value, check what equivalent components nearby already use and reuse it unless there's a real reason to differ.
Bad example
| 1 | // New dropdown menu icon, copied from an unrelated design |
| 2 | .icon { |
| 3 | width: 16px; |
| 4 | height: 16px; |
| 5 | } |
Explanation (EN)
A sibling dropdown in the same menu area already uses 20px icons, but this new icon was set to 16px just because that's what the source mockup happened to show, creating a visible inconsistency between two similar UI elements.
Objašnjenje (HR)
Susjedni dropdown u istom dijelu menija već koristi ikone od 20px, ali ova nova ikona je postavljena na 16px samo zato što je to slučajno prikazivao izvorni mockup, što stvara vidljivu nedosljednost između dva slična UI elementa.
Good example
| 1 | // Matches the icon size already used by the sibling categories dropdown |
| 2 | .icon { |
| 3 | width: 20px; |
| 4 | height: 20px; |
| 5 | } |
Explanation (EN)
The icon size is aligned with the equivalent icon in the sibling dropdown, keeping the two comparable menus visually consistent.
Objašnjenje (HR)
Veličina ikone je usklađena s ekvivalentnom ikonom u susjednom dropdownu, čime dva usporediva menija ostaju vizualno dosljedna.
Exceptions / Tradeoffs (EN)
A different size is fine when there's a deliberate design reason for the two components to differ — the point is to avoid accidental, uncoordinated divergence.
Iznimke / Tradeoffi (HR)
Različita veličina je u redu kad postoji namjeran dizajnerski razlog da se dvije komponente razlikuju — poanta je izbjeći slučajno, neusklađeno odstupanje.