A UI component is any interface piece designed to be reused with the same markup pattern and styling rules wherever it appears — a button, a card, a badge, a modal. The idea isn't complicated, but most component libraries fall apart at scale for a specific, avoidable reason: no consistent naming convention, which means every new component gets built slightly differently than the last one, and six months in, nobody can predict what a class name does without opening the CSS file to check.
Pick a naming convention before writing the first component
Convention Example Trade-off
BEM (Block_Element--Modifier) .cardtitle--large Verbose but unambiguous about relationships between parts
Utility-first class="p-4 rounded-lg bg-white" Fast to write, but markup gets long and styling logic lives in HTML
Flat component classes .card-title, .card-large Simple to read, but nothing enforces which classes are meant to combine
BEM is used throughout the examples below because it makes a component's internal structure legible from the class name alone — .card_title unambiguously belongs inside .card, without needing to check the HTML nesting to confirm it.
Top comments (0)