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).
Hoist shared SVG attributes onto the common parent
When child SVG elements all carry the same presentational attributes (stroke, fill, etc.), set them once on the parent and let inheritance apply them, instead of repeating per child.
Bad example
| 1 | <symbol id="logout" viewBox="0 0 20 20"> |
| 2 | <path d="M6 10h13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /> |
| 3 | <path d="M13 5l5 5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /> |
| 4 | <path d="M13 15l5-5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /> |
| 5 | </symbol> |
Explanation (EN)
The same four stroke attributes are duplicated on every path. Changing the stroke width or join style means editing every child, and the repetition obscures the shape data that actually differs.
Objašnjenje (HR)
Ista četiri stroke atributa ponavljaju se na svakoj putanji. Promjena debljine ili stila spoja znači uređivanje svakog djeteta, a ponavljanje zamagljuje podatke o obliku koji se zapravo razlikuju.
Good example
| 1 | <symbol id="logout" viewBox="0 0 20 20" |
| 2 | fill="none" stroke="currentColor" stroke-width="1.2" |
| 3 | stroke-linecap="round" stroke-linejoin="round"> |
| 4 | <path d="M6 10h13" /> |
| 5 | <path d="M13 5l5 5" /> |
| 6 | <path d="M13 15l5-5" /> |
| 7 | </symbol> |
Explanation (EN)
Shared stroke properties are declared once on the parent; SVG inheritance applies them to every path. The children now contain only what makes each one unique, and a single edit changes the whole icon.
Objašnjenje (HR)
Zajednička svojstva linije deklarirana su jednom na roditelju; SVG nasljeđivanje ih primjenjuje na svaku putanju. Djeca sada sadrže samo ono što svako čini jedinstvenim, a jedna izmjena mijenja cijelu ikonu.
Notes (EN)
Most presentation attributes (stroke, fill, stroke-width, stroke-linecap/linejoin) inherit; a child can still override locally when it genuinely differs.
Bilješke (HR)
Većina prezentacijskih atributa (stroke, fill, stroke-width, stroke-linecap/linejoin) se nasljeđuje; dijete i dalje može lokalno nadjačati vrijednost kad se uistinu razlikuje.