Naming conventions in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a CSS class using the BEM naming convention for a button block.

CSS

.button[1] { background-color: blue; color: white; padding: 1rem; }

Drag options to blanks, or click blank then click option'

A-primary

B--primary

C_primary

D__primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using single underscore or hyphen instead of double dash for modifiers.

Confusing element and modifier separators.

In BEM, modifiers use double dashes --. So .button--primary is correct.

2fill in blank

medium

Complete the code to define a BEM element for a button icon inside the button block.

CSS

.button[1] { width: 1.5rem; height: 1.5rem; }

Drag options to blanks, or click blank then click option'

A__icon

B-icon

C--icon

D_icon

Attempts:

3 left

💡 Hint

Common Mistakes

Using single dash or underscore instead of double underscore for elements.

Mixing element and modifier syntax.

In BEM, elements use double underscores __. So .button__icon is correct.

3fill in blank

hard

Fix the error in the BEM class name for a disabled button modifier.

CSS

.button[1] { opacity: 0.5; cursor: not-allowed; }

Drag options to blanks, or click blank then click option'

A--disabled

B__disabled

C-disabled

D_disabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using single dash or underscore for modifiers.

Confusing element and modifier separators.

Modifiers in BEM use double dashes --. So .button--disabled is correct.

4fill in blank

hard

Fill both blanks to create a BEM class for a button block with a disabled modifier and an icon element.

CSS

.button[1] { opacity: 0.5; }
.button[2] { width: 1.5rem; height: 1.5rem; }

Drag options to blanks, or click blank then click option'

A--disabled

B__icon

C-icon

D__disabled

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up element and modifier separators.

Using single dash or underscore instead of double.

The modifier uses --disabled and the element uses __icon in BEM.

5fill in blank

hard

Fill all three blanks to create a BEM class for a card block, its header element, and a highlighted modifier.

CSS

.card[1] { border: 1px solid #ccc; }
.card[2] { font-weight: bold; }
.card[3] { background-color: yellow; }

Drag options to blanks, or click blank then click option'

A--highlighted

B__header

C--highlight

D__footer

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing element and modifier separators.

Using incorrect modifier names.

The element is __header, and the modifier is --highlight or --highlighted. Here, --highlight is used for the first modifier and --highlighted for the last. The correct sequence is .card--highlight, .card__header, and .card--highlighted.