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).
Keep SCSS Module File Names Exactly in Sync With Their Component
A typo'd SCSS module filename (e.g. `FilerModal` vs `FilterModal`) silently drifts from the component it styles.
Bad example
| 1 | // components/FilterModal/FilerModal.module.scss |
| 2 | .root { |
| 3 | padding: 1rem; |
| 4 | border-radius: 1rem; |
| 5 | } |
Explanation (EN)
A typo in the SCSS module filename (`FilerModal` instead of `FilterModal`) still compiles and works, but it desyncs the file name from the component name, confusing anyone searching for `FilterModal.module.scss` and making future renames error-prone.
Objašnjenje (HR)
Tipfeler u imenu SCSS modula (`FilerModal` umjesto `FilterModal`) i dalje se kompajlira i radi, ali razdvaja ime filea od imena komponente, zbunjuje svakoga tko traži `FilterModal.module.scss` i čini buduća preimenovanja rizičnima.
Good example
| 1 | // components/FilterModal/FilterModal.module.scss |
| 2 | .root { |
| 3 | padding: 1rem; |
| 4 | border-radius: 1rem; |
| 5 | } |
Explanation (EN)
Keeps the SCSS module's filename character-for-character identical to the component's name, matching the project's file-naming convention and making the pair easy to find and rename together.
Objašnjenje (HR)
Ime SCSS modula ostaje slovo po slovo identično imenu komponente, u skladu s konvencijom imenovanja fileova u projektu, čime je taj par lako pronaći i preimenovati zajedno.