bem-naming

BEM Naming in Fundamental Styles

This skill explains the BEM (Block Element Modifier) methodology used in fundamental-styles and provides naming patterns with real examples.

When to Use This Skill

Use this skill when:

• The user asks "How do I name CSS classes in fundamental-styles?"
• The user asks about BEM methodology
• The user wants to understand class naming patterns
• The user asks "What does fd-button--emphasized mean?"
• The user needs to create custom variants or understand modifier classes
• The user asks about the fd- prefix

---

What is BEM?

BEM stands for Block Element Modifier - a naming convention for CSS classes that makes code more readable, maintainable, and predictable.

BEM Structure

.block { }
.block__element { }
.block--modifier { }
.block__element--modifier { }

BEM in Fundamental Styles

All fundamental-styles components use the fd- prefix and follow strict BEM conventions:

.fd-{block}
.fd-{block}__{element}
.fd-{block}--{modifier}
.fd-{block}__{element}--{modifier}

---

The Three Parts of BEM

1. Block (Component)

The block is the top-level component - a standalone, meaningful entity.

Pattern: .fd-{block-name}

Examples:

• .fd-button - Button component
• .fd-input - Input component
• .fd-card - Card component
• .fd-table - Table component
• .fd-dialog - Dialog component

Rules:

• ✅ Use lowercase
• ✅ Use hyphens for multi-word blocks: .fd-message-strip
• ✅ Always prefix with fd-
• ❌ Don't nest block classes (.fd-button .fd-icon is two blocks, not nested)

---

2. Element (Sub-component)

An element is a part of a block that has no meaning outside its parent block. Uses double underscores __.

Pattern: .fd-{block}__{element-name}

Examples:

• .fd-button__text - Text inside a button
• .fd-table__cell - Cell inside a table
• .fd-table__row - Row inside a table
• .fd-dialog__header - Header inside a dialog
• .fd-dialog__body - Body inside a dialog
• .fd-dialog__footer - Footer inside a dialog
• .fd-card__header - Header inside a card
• .fd-input__addon - Addon inside an input group