bem-structure

What problem does it solve?

This Skill provides expert guidance for writing, refactoring, and structuring CSS using BEM (Block Element Modifier) methodology to ensure consistency, readability, and maintainability across large front-end codebases.

Core Features & Use Cases

• Enforces explicit BEM naming conventions (Block, Element, Modifier) for predictable, scalable class structures.
• Guides component organization and Optics design system integration to avoid duplicating existing components.
• Use Case: when refactoring legacy CSS or introducing new UI blocks, apply the guidelines to keep styles maintainable and aligned with design tokens.

Quick Start

Create a new component following BEM: define a Block class (for example, .card), add Element classes using __ notation (e.g., .card__title, .card__body), and apply Modifiers with -- (e.g., .card--featured). When extending components, reuse existing Optics components whenever possible.