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).
Hide and show must operate on the same element
Ensure the collapse/hide path and the restore/show path (and any CSS) all target the identical element.
Bad example
| 1 | function collapse(el) { |
| 2 | el.parentElement.style.display = 'none'; // hides the container |
| 3 | } |
| 4 |
|
| 5 | function restore(el) { |
| 6 | el.style.removeProperty('display'); // shows a different element |
| 7 | } |
Explanation (EN)
collapse() hides the parent container while restore() clears display on the inner element, so the container stays hidden and the UI gets stuck collapsed.
Objašnjenje (HR)
collapse() skriva roditeljski kontejner dok restore() cisti display na unutarnjem elementu, pa kontejner ostaje skriven i UI ostaje zaglavljen u skupljenom stanju.
Good example
| 1 | function getTarget(el) { |
| 2 | const container = el.parentElement; |
| 3 | invariant(container, `Expected container for "${el.id}"`); |
| 4 | return container; |
| 5 | } |
| 6 |
|
| 7 | function collapse(el) { |
| 8 | getTarget(el).style.display = 'none'; |
| 9 | } |
| 10 |
|
| 11 | function restore(el) { |
| 12 | getTarget(el).style.removeProperty('display'); |
| 13 | } |
Explanation (EN)
Routing both hide and show through one helper guarantees they act on the same element, so visibility toggles symmetrically and stays consistent with any CSS that targets the same node.
Objašnjenje (HR)
Usmjeravanje i skrivanja i prikazivanja kroz jedan helper jamci da djeluju na isti element, pa se vidljivost simetricno prebacuje i ostaje dosljedna bilo kojem CSS-u koji cilja isti cvor.