Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Define CSS classes in the module of the component that uses them
Keep a style class in the stylesheet of the component that consumes it rather than passing class strings down from a parent, which lets the prop become a clean boolean.
Bad example
| 1 | // parent passes a class string down |
| 2 | <ReplyRow shouldShowBottomBorderRadius={styles.bottomBorderRadius} /> |
Explanation (EN)
Passing a class string under a boolean-like prop name obscures both ownership and the prop contract.
Objašnjenje (HR)
Good example
| 1 | // class lives in ReplyRow.module.scss; prop is a boolean |
| 2 | <ReplyRow shouldShowBottomBorderRadius={isLast} /> |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
When a prop represents a semantic child state, keep the implementation class in the child stylesheet and pass the state through a correctly typed prop.
Exceptions / Tradeoffs (EN)
A public design-system class/slot override remains appropriate when callers intentionally own presentation. Do not convert arbitrary class customization into a misleading boolean.