Semantic naming

Core naming rules

• Name components by purpose, not appearance.
• Keep child classes short and scoped by the parent.
• Use modifiers for reusable variants.
• Use .is_* for temporary state.
• Use .has_* for conditions and content presence.
• Avoid utility names pretending to be components.
• If the name needs explaining, the architecture probably does too.

Methodology influences

LSCSS borrows useful parts of older systems instead of pretending frontend history began yesterday.

• RSCSS influences short contextual child selectors.
• BEM influences explicit modifier classes.
• ITCSS influences ordered layers and predictable precedence.
• Modern CSS adds tools such as :where(), @scope, and container queries.

Components and child selectors

Components should describe what something is, not how it currently looks. Child selectors stay short because the parent already gives them context.

.product-card
.site-header
.filter-panel

.product-card > .title
.product-card > .price
.site-header > .logo
.filter-panel > .actions

This keeps HTML readable without losing ownership. The selector carries structure, the class name carries meaning.

Modifiers and state

A featured card and a loading card are different problems. One is a reusable variant. One is temporary behaviour. Do not force both into the same naming pattern.

.product-card--featured
.product-card--compact
.is_active
.has_error

This separation makes CSS easier to read and JavaScript easier to reason about.

BEM-style elements vs contextual child selectors

/* BEM-style element naming */
.product-card__title {}
.product-card__price {}

/* LSCSS-style contextual child selectors */
.product-card > .title {}
.product-card > .price {}

LSCSS keeps the useful modifier idea from BEM but usually avoids repeating the parent name in every child class. The parent already exists. It does not need to introduce itself at every meeting.

Names to avoid

.blue-box
.big-red-button
.left-column-text

These names describe appearance, not responsibility. They age badly the moment design changes and they quietly become lies in production.