Enforce BEM naming and component structure in CSS projects.
npx skills add https://github.com/RoleModel/rolemodel-skills --skill bem-structure
Please help me install this Agent Skill. Skill: bem-structure Source: https://github.com/RoleModel/rolemodel-skills/tree/main/skills/bem-structure Command: npx skills add https://github.com/RoleModel/rolemodel-skills --skill bem-structure
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.
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.
High-intent search queries and answers about installing and using this skill.
BEM (Block Element Modifier) is a CSS naming methodology that enforces consistent class structures using Block, Element, and Modifier rules. Use BEM during CSS reviews or when creating new UI components to ensure scalability and maintainability across large frontend codebases.
To structure CSS with BEM, define a Block class like .card, add Element classes using __ notation like .card__title, and apply Modifiers with -- like .card--featured. Always use flat class selectors to maintain predictable and readable component structures.
Yes, you can apply BEM guidelines during refactoring sessions to restructure legacy CSS. By enforcing explicit Block, Element, and Modifier naming rules, you can transform unstructured styles into maintainable components aligned with the Optics design system.
BEM naming integrates directly with the Optics design system to prevent component duplication. When extending UI blocks, the methodology guides you to reuse existing Optics components whenever possible, ensuring alignment with established design tokens and maintaining structural consistency.
Flat class selectors are required in BEM to maintain predictable and scalable class structures. By avoiding nested selectors, you ensure explicit Block, Element, and Modifier naming rules are followed, which keeps large frontend codebases readable and maintainable during CSS reviews.
Lionad-MorotarRefactors Vue components to adopt the BEM naming convention and generates scoped CSS selectors.
shwilliamsonEnforce BEM naming, CSS variables, and responsive patterns for CSS/SCSS.
markky21Build scalable design systems with Tailwind CSS v4 and design tokens.
twofoldtech-dakotaStandardize CSS, SASS, and JavaScript with 7-1 structure and BEM naming.
