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).
Verify layout integrity when removing or changing CSS
Removing CSS rules can silently reintroduce overflow or layout regressions; confirm affected components still render correctly across breakpoints before merging.
Bad example
| 1 | .card { |
| 2 | /* Removed because it "looked unused" — but it was preventing |
| 3 | long content from breaking the column layout */ |
| 4 | /* min-width: 0; |
| 5 | overflow: hidden; |
| 6 | text-overflow: ellipsis; */ |
| 7 | display: flex; |
| 8 | } |
Explanation (EN)
Deleting rules like min-width: 0, overflow, or text-overflow from a flex/grid item without checking the rendered result lets long content overflow its container, breaking the layout — a regression that is invisible in the diff but obvious on screen.
Objašnjenje (HR)
Brisanje pravila poput min-width: 0, overflow ili text-overflow s flex/grid elementa bez provjere rezultata u pregledniku dopušta da dugačak sadržaj prelije svoj kontejner i razbije raspored — regresija koja je nevidljiva u diffu, ali očita na ekranu.
Good example
| 1 | .card { |
| 2 | /* Kept: min-width: 0 lets a flex child shrink so text can truncate |
| 3 | instead of overflowing. Verified across mobile/desktop before removing |
| 4 | anything. */ |
| 5 | min-width: 0; |
| 6 | overflow: hidden; |
| 7 | text-overflow: ellipsis; |
| 8 | display: flex; |
| 9 | } |
Explanation (EN)
Before removing or changing CSS, understand what each rule guards against and verify the rendered output at the relevant breakpoints. Rules that constrain overflow or sizing are easy to dismiss as redundant but often hold the layout together.
Objašnjenje (HR)
Prije uklanjanja ili promjene CSS-a, razumij od čega svako pravilo štiti i provjeri prikaz na relevantnim breakpointima. Pravila koja ograničavaju overflow ili dimenzije lako je odbaciti kao suvišna, ali često upravo ona drže raspored na okupu.
Notes (EN)
When reviewing or authoring CSS deletions, do a quick visual check (or screenshot diff) at mobile and desktop widths, paying special attention to flex/grid children and any element that can receive long or dynamic text.
Bilješke (HR)
Kod pregleda ili pisanja CSS izmjena koje brišu pravila, napravi brzu vizualnu provjeru (ili usporedbu snimki zaslona) na mobilnoj i desktop širini, s posebnom pažnjom na flex/grid elemente i bilo koji element koji može primiti dugačak ili dinamičan tekst.