Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Let reusable item components span full width and size them in the parent
Keep single-item components layout-neutral (full width) and apply grid/width sizing in the parent that maps over them, so the item stays reusable in different layouts.
Bad example
| 1 | function ArticleTeaser() { |
| 2 | return <div className='small-6 large-4 cell'>...</div>; // width baked into item |
| 3 | } |
Explanation (EN)
Baking collection column classes into an item limits reuse in other parent layouts.
Objašnjenje (HR)
Good example
| 1 | {articles.map(article => ( |
| 2 | <div key={article.id} className="small-6 large-4 cell"> |
| 3 | <ArticleTeaser article={article} /> |
| 4 | </div> |
| 5 | ))} |
Explanation (EN)
The parent assigns each item its collection layout and a stable key; the teaser retains only its internal presentation.
Objašnjenje (HR)
Notes (EN)
For a reusable item rendered in several lists, let the owning collection choose grid/column placement while the item owns its internal layout.
Exceptions / Tradeoffs (EN)
Full width is not inherently layout-neutral: a block div fills normal flow but behaves differently in flex/grid. Avoid extra wrappers when the component already exposes a suitable layout hook.