Which of the following is a correct BEM naming pattern?

• A. Block-Element-Modifier
• B. Block__Element--Modifier; Example: card__title--highlight.
• C. Block__Element-Modifier
• D. Block__Element__Modifier

Answer: (B)

BEM naming uses a Block__Element--Modifier pattern. The block is a standalone component, the element is a part of that block, and the modifier describes a variation or state. The correct form shows the block name, two underscores, the element name, two dashes, and the modifier. For example, card__title--highlight means the title element of a card with the highlight variation. This structure keeps CSS organized and predictable, clarifying which piece of a component you’re styling and which variant you want.

Other patterns don’t fit BEM: some use a single dash to separate parts, some use two underscores for the modifier, which isn’t how modifiers are expressed in BEM. The chosen pattern cleanly distinguishes block, element, and modifier, aligning with the standard convention.