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).
Manually verify every consumer app when switching a shared component from JS-forced fixed positioning to CSS position: sticky
position: sticky silently stops working — no error, no warning — if any ancestor of the sticky element has overflow other than visible, or a transform/filter/will-change. Replacing a JS-computed position: fixed fallback with plain CSS sticky removes that safety net, so every page/app that reuses the shared component must be manually checked; there is no automated or lint-level way to catch the regression.
Bad example
| 1 | /* shared header component, used by 4+ separate apps */ |
| 2 | .header { |
| 3 | position: sticky; |
| 4 | top: 0; |
| 5 | } |
| 6 | /* JS fallback that used to force `position: fixed` regardless of ancestor styles was removed */ |
Explanation (EN)
Any consuming app whose layout has an ancestor with overflow: hidden/auto/clip, a transform, a filter, or will-change on the sticky element's containing chain will silently lose the sticky behavior with no console warning and no test failure — it just scrolls off screen.
Objašnjenje (HR)
Svaka aplikacija čiji layout ima predak s overflow: hidden/auto/clip, transformom, filterom ili will-change na lancu containera sticky elementa će tiho izgubiti sticky ponašanje — bez console warninga i bez pada testa — element će jednostavno otići izvan ekrana pri scrollu.
Good example
| 1 | // Before shipping the sticky-only version of a shared component, |
| 2 | // manually load and scroll every consuming app/publication and |
| 3 | // confirm the element stays pinned (finansavisen, kapital, motor, tv.*, ...). |
| 4 | // Document the check in the PR description since nothing in CI catches this. |
Explanation (EN)
Since no automated check can detect a silently-broken sticky element, treat cross-consumer manual verification as a required step of the change itself, and record which apps/pages were checked.
Objašnjenje (HR)
Budući da nijedna automatska provjera ne može detektirati tiho slomljen sticky element, ručnu provjeru na svim aplikacijama koje koriste komponentu tretiraj kao obavezan korak same promjene, i zabilježi koje su aplikacije/stranice provjerene.
Notes (EN)
Applies to any shared/cross-app component adopting position: sticky, not just headers.
Bilješke (HR)
Vrijedi za svaku dijeljenu komponentu koja prelazi na position: sticky, ne samo za headere.