Vrembem is a framework-agnostic CSS component library built for people who love writing CSS and the BEM methodology. It merges battle-tested CSS authoring conventions with modern CSS features.

The main goal of Vrembem is to provide front-end systems that every project needs while making it easy to customize and expand. This allows authors to focus on the aspects of a project that are unique to them.

Utility-first BEM

It's a common misconception that using BEM means you can never deviate from it. Vrembem takes a practical utility-first approach to authoring BEM components. This is the methodology in practice:

1. Add utilities first. These are typically one-off single property classes. Vrembem uses a verbose utility naming convention to reduce over-reliance on CSS abstractions.¹
2. If an element is starting to contain too many utilities, that's a sign that a block class is needed.
3. Add utilities to a block when adjustments are needed.
4. If a block starts to accumulate too many utilities, that's a sign that a modifier class is needed.

The benefits to this approach are that it reduces bloat that can exist from early abstractions. Since blocks and modifiers are only created organically once patterns emerge, they become less rigid and more open to composition-based architecture.

Composability

The catalog of available components Vrembem provides is intentionally focused. Instead of having a component for every scenario, primitives are provided for very purposeful roles such as layout, containers, or actions. These can then be combined to create context-specific blocks and views.

This approach allows components to be highly composable with each other, built with the idea that they will be mixed, nested together, and expanded. Only the most common interface patterns are added to keep Vrembem lean and intuitive.

Modern CSS

Vrembem uses modern CSS features and native browser APIs to build fast and responsive components for all devices. Purely optional JavaScript modules are available to enhance your projects, or bring-your-own JavaScript. Vrembem implements the following features:

• Design tokens powered by CSS custom properties (variables).
• Custom palette tokens using the oklch color space.
• Layout components that leverage Flex and Grid.
• Cascade layers using the @layer CSS at-rule for tokens, base, components, and utilities.
• Native browser APIs are used for things like the dialog element, modals, and popovers.

Vrembem is in active development and will continue to receive the benefits of modern CSS and native APIs as they become available and more widely adopted.

Footnotes

1. CSS abstraction refers to when utility classes act as a replacement for writing CSS entirely. With a more verbose utility naming convention, utilities match their property and value mapping more explicitly. ↩