BEMlike

BEMlike is a naming convention for CSS class names designed to organize styles around reusable UI components. It is inspired by the Block-Element-Modifier (BEM) methodology but is not a formal specification; teams adopt it as a practical variant tailored to their workflows. The central idea is to encode component boundaries and states directly in class names to improve readability and maintainability.

Core concepts in BEMlike include blocks, elements, and modifiers. A block represents a reusable component; an element is a subpart of a block; a modifier indicates a variation of a block or element. The typical syntax resembles BEM, with examples such as nav__item--active or card__title--large. Some projects also apply simplified patterns, for example using block--modifier or block__element and then a separate modifier on the element, depending on the chosen convention. What matters is consistency within a codebase and clear separation of concerns.

Advantages of BEMlike include easier scoping in CSS, reduced specificity, and smoother collaboration between developers and designers. It also facilitates tooling support for search, refactoring, and component-based styling in frameworks and CSS-in-JS environments.

Limitations involve the lack of a formal standard, which can create fragmentation across teams and projects. Proper documentation and a defined style guide are essential to avoid drift. Some teams may blend BEMlike with other naming patterns to align with existing tooling or framework conventions.

See also: BEM, CSS naming conventions, CSS Modules, CSS-in-JS.