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.

Practice

1. Which of the following is the best practice for naming CSS classes?

easy

A. Use camelCase, like mainHeader.

B. Use uppercase letters and underscores, like Main_Header.

C. Use lowercase letters and hyphens to separate words, like main-header.

D. Use spaces between words, like main header.

Solution

1. Step 1: Understand common CSS naming styles

   CSS classes should be easy to read and consistent. Lowercase with hyphens is widely accepted.

2. Step 2: Compare options

   Use lowercase letters and hyphens to separate words, like main-header. uses lowercase and hyphens, which is recommended. Options B and C use uppercase or camelCase, less common in CSS. Use spaces between words, like main header. uses spaces, which is invalid in class names.

3. Final Answer:

   Use lowercase letters and hyphens to separate words, like main-header. -> Option C

4. Quick Check:

   Lowercase + hyphens = best CSS naming [OK]

Hint: Use lowercase and hyphens for CSS classes [OK]

Common Mistakes:

• Using spaces in class names
• Using uppercase letters
• Using camelCase instead of hyphens

2. Which CSS class name follows the BEM naming convention?

easy

A. button--primary

B. button_primary

C. buttonPrimary

D. button primary

Solution

1. Step 1: Recall BEM naming rules

   BEM uses block__element--modifier format. Double hyphens separate modifiers.

2. Step 2: Identify correct format

   button--primary uses double hyphens for modifier --primary, matching BEM. Options A and B use camelCase or underscores, not BEM. button primary uses space, invalid in class names.

3. Final Answer:

   button--primary -> Option A

4. Quick Check:

   BEM modifier uses double hyphens [OK]

Hint: BEM modifiers use double hyphens (--modifier) [OK]

Common Mistakes:

• Using underscores instead of hyphens
• Using camelCase for BEM
• Using spaces in class names

3. Given this CSS class name: card__title--large, what does it represent in BEM?

medium

A. Block: card, Modifier: title, Element: large

B. Modifier: card, Block: title, Element: large

C. Element: card, Block: title, Modifier: large

D. Block: card, Element: title, Modifier: large

Solution

1. Step 1: Break down the BEM parts

   In card__title--large, card is the block, title is the element (after double underscore), and large is the modifier (after double hyphen).

2. Step 2: Match parts to options

   Block: card, Element: title, Modifier: large correctly identifies block, element, and modifier. Other options mix these parts incorrectly.

3. Final Answer:

   Block: card, Element: title, Modifier: large -> Option D

4. Quick Check:

   BEM = block__element--modifier [OK]

Hint: BEM: block__element--modifier order [OK]

Common Mistakes:

• Confusing element and modifier positions
• Mixing block and element names
• Ignoring double underscores and hyphens

4. Identify the error in this CSS class name: nav__item_active

medium

A. Class name is too long

B. Underscore used instead of double hyphen for modifier

C. Spaces are used instead of underscores

D. Double underscore missing between block and element

Solution

1. Step 1: Check BEM syntax

   BEM requires modifiers to be separated by double hyphens --, not underscores.

2. Step 2: Analyze the class name

   The class nav__item_active uses a single underscore for the modifier, which is incorrect. It should be nav__item--active.

3. Final Answer:

   Underscore used instead of double hyphen for modifier -> Option B

4. Quick Check:

   Modifier separator = double hyphen [OK]

Hint: Modifiers need double hyphens, not underscores [OK]

Common Mistakes:

• Using single underscore for modifiers
• Forgetting double underscore between block and element
• Using spaces in class names

5. You want to create CSS classes for a card component with a title and a highlighted state using BEM. Which naming set is correct?

hard

A. card, card__title, card--highlighted

B. card, card_title, card_highlighted

C. card, card-title, card-highlighted

D. card, card__title--highlighted, card__highlighted

Solution

1. Step 1: Understand BEM structure for blocks, elements, and modifiers

   Block is card. Element is card__title. Modifier on block is card--highlighted.

2. Step 2: Evaluate options

   card, card__title, card--highlighted correctly uses BEM naming. card, card_title, card_highlighted uses underscores, not BEM. card, card-title, card-highlighted uses hyphens but not BEM format. card, card__title--highlighted, card__highlighted incorrectly applies modifier to element and duplicates modifier.

3. Final Answer:

   card, card__title, card--highlighted -> Option A

4. Quick Check:

   BEM block, element, modifier naming [OK]

Hint: BEM: block, block__element, block--modifier [OK]

Common Mistakes:

• Using underscores instead of BEM separators
• Applying modifiers to elements incorrectly
• Mixing hyphen and underscore styles