Naming conventions in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding BEM Naming Convention

Which of the following CSS class names correctly follows the BEM (Block Element Modifier) naming convention for a button component with a disabled state?

A button_disabled

B button--disabled

C button__disabled

D button-disabled

💡 Hint

BEM uses double hyphens for modifiers and double underscores for elements.

In BEM, modifiers use double hyphens --. So button--disabled is correct for a disabled modifier of the button block.

📝 Syntax

intermediate

Valid CSS Class Name Syntax

Which of these CSS class names is invalid according to CSS naming rules?

A 2nd-section

B footer_nav

C _header-main

D contentArea

💡 Hint

CSS class names cannot start with a digit.

CSS class names cannot start with a number. Option A starts with '2', so it is invalid.

❓ selector

advanced

Selector Specificity with Naming Conventions

Given these CSS classes, which selector has the highest specificity?

CSS

.nav__item { color: blue; }
.nav--active .nav__item { color: red; }
.nav__item--highlighted { color: green; }

A .nav--active .nav__item

B .nav__item, .nav--active

C .nav__item--highlighted

D .nav__item

💡 Hint

More class selectors in a selector increase specificity.

Option A has two class selectors combined, so it has higher specificity than the single-class selectors in A and C.

❓ layout

advanced

Naming Conventions Impact on CSS Grid Layout

If you have a CSS Grid container named grid-container and grid items named grid-item--large and grid-item--small, which CSS rule correctly applies a larger grid area to the large item using these class names?

A .grid-container .grid-item-large { grid-area: 1 / 1 / 3 / 3; }

B .grid-item_large { grid-area: 1 / 1 / 3 / 3; }

C .grid-item--small { grid-area: 1 / 1 / 3 / 3; }

D .grid-item--large { grid-area: 1 / 1 / 3 / 3; }

💡 Hint

Match the exact class name with correct syntax.

Option D uses the exact class name grid-item--large with correct CSS syntax to assign the grid area.

❓ accessibility

expert

Naming Conventions and Accessibility in CSS

Which naming convention practice best supports accessibility when styling components for screen readers and keyboard navigation?

A Use only IDs for styling to ensure uniqueness and avoid confusion.

B Use short, generic class names like <code>a1</code>, <code>b2</code> to keep CSS file size small.

C Use descriptive class names that reflect the component role, like <code>btn-submit</code> or <code>nav-link</code>.

D Avoid naming conventions and rely on inline styles for accessibility.

💡 Hint

Good naming helps assistive technologies understand page structure.

Descriptive class names help developers and assistive tools understand the purpose of elements, improving accessibility.