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).
Use the border-radius shorthand instead of per-corner longhand properties
Prefer the single border-radius shorthand over separate per-corner radius declarations when rounding specific edges.
Bad example
| 1 | .card { |
| 2 | border-top-left-radius: 16px; |
| 3 | border-top-right-radius: 16px; |
| 4 | border-bottom-left-radius: 0; |
| 5 | border-bottom-right-radius: 0; |
| 6 | } |
Explanation (EN)
Four longhand declarations to round only the top corners. It is verbose and the reader has to assemble the four lines mentally to understand the shape.
Objašnjenje (HR)
Cetiri zasebne deklaracije da bi se zaoblili samo gornji kutovi. Predugacko je i citatelj mora mentalno spojiti sva cetiri retka da bi shvatio oblik.
Good example
| 1 | .card { |
| 2 | border-radius: 16px 16px 0 0; |
| 3 | } |
Explanation (EN)
One shorthand declaration expresses the same thing. The clockwise top-left, top-right, bottom-right, bottom-left order makes the rounded edge obvious at a glance.
Objašnjenje (HR)
Jedna skracena deklaracija izrazava isto. Redoslijed u smjeru kazaljke (gore-lijevo, gore-desno, dolje-desno, dolje-lijevo) odmah jasno pokazuje koji je rub zaobljen.
Exceptions / Tradeoffs (EN)
Use longhand only when a single corner is dynamically overridden in isolation (e.g. by a state class) and the shorthand would force you to repeat the other three values.
Iznimke / Tradeoffi (HR)
Koristi duzi oblik samo kada se jedan kut dinamicki nadjacava izolirano (npr. klasom stanja) i kada bi skraceni oblik prisilio na ponavljanje preostale tri vrijednosti.