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).
Prefer CSS clamping over JS truncation for text previews
When the UI only needs a collapsed preview with optional expansion, use native CSS clamping instead of custom JS truncation logic, especially for rich text.
Bad example
| 1 | function ArticlePreview({ html }: { html: string }) { |
| 2 | const [preview, setPreview] = useState(''); |
| 3 |
|
| 4 | useEffect(() => { |
| 5 | const text = stripHtml(html); |
| 6 | setPreview(text.slice(0, 180) + '...'); |
| 7 | }, [html]); |
| 8 |
|
| 9 | return <p>{preview}</p>; |
| 10 | } |
Explanation (EN)
This adds custom truncation logic to solve a visual presentation problem. It becomes harder to maintain when the content contains HTML, line wrapping changes across breakpoints, or the preview needs to stay consistent with real layout behavior.
Objašnjenje (HR)
Ovo dodaje prilagođenu logiku trunciranja da bi riješilo vizualni problem prikaza. Održavanje postaje teže kada sadržaj sadrži HTML, broj redaka ovisi o breakpointima ili preview mora ostati usklađen sa stvarnim ponašanjem layouta.
Good example
| 1 | function ArticlePreview({ html, expanded }: { html: string; expanded: boolean }) { |
| 2 | return ( |
| 3 | <div> |
| 4 | <div |
| 5 | className={expanded ? '' : 'line-clamp-2'} |
| 6 | dangerouslySetInnerHTML={{ __html: html }} |
| 7 | /> |
| 8 | <button type="button">Read more</button> |
| 9 | </div> |
| 10 | ); |
| 11 | } |
Explanation (EN)
CSS handles the visual truncation, so the implementation stays aligned with the real rendered layout. Expansion becomes a simple presentation toggle instead of a custom string-processing system.
Objašnjenje (HR)
CSS rješava vizualno skraćivanje pa implementacija ostaje usklađena sa stvarnim renderiranim layoutom. Proširenje postaje jednostavan presentation toggle umjesto prilagođenog sustava za obradu stringova.
Notes (EN)
Prefer native CSS/platform behavior first. Fall back to JS only when the product truly needs content-aware truncation that CSS cannot express.
Bilješke (HR)
Prvo preferiraj nativno CSS/platformsko ponašanje. Na JS prijeđi samo kada proizvod stvarno treba sadržajno svjesno trunciranje koje CSS ne može izraziti.
Exceptions / Tradeoffs (EN)
If the requirement depends on semantic content boundaries, server-side summaries, or exact character budgets, a JS or backend solution may still be necessary.
Iznimke / Tradeoffi (HR)
Ako zahtjev ovisi o semantičkim granicama sadržaja, serverskim sažecima ili točnom broju znakova, JS ili backend rješenje i dalje može biti potrebno.