Which of the following is a valid BEM class name?

• A. card-title--highlight
• B. card__title_highlight
• C. card__title--highlight
• D. Card__Title--Highlight

Answer: (C)

BEM naming uses the pattern Block__Element--Modifier, with all parts in lowercase. The valid class name card__title--highlight follows that exactly: block is card, element is title, and modifier is highlight, connected by the proper double underscores and double dash. This structure keeps styles predictable: the element title inside the card block can have a distinct appearance when the highlight modifier is applied.

The other forms break the convention in different ways. Using a hyphen to join block and element (card-title--highlight) isn’t the correct separator for BEM. Using a single underscore between the element and modifier (card__title_highlight) uses the wrong connector for the modifier. Capitalizing the names (Card__Title--Highlight) goes against the lowercase convention, which helps avoid case-related issues and keeps naming consistent across the codebase.