Naming conventions in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a naming convention in CSS?

A naming convention is a set of rules to name CSS classes and IDs clearly and consistently so that the code is easy to read and maintain.

beginner

Why use the BEM naming convention?

BEM (Block Element Modifier) helps organize CSS by naming classes to show their role and relationship, making styles easier to understand and avoid conflicts.

intermediate

Example of a BEM class name for a button inside a header block with a modifier for a large size?

header__button--large

beginner

What is the benefit of using lowercase and hyphens in CSS class names?

Using lowercase letters and hyphens makes class names easy to read and type, and it avoids errors caused by case sensitivity.

beginner

What should you avoid when naming CSS classes?

Avoid using vague names, spaces, special characters, or names that are too long or too short. Names should be meaningful and consistent.

Which of these is a correct BEM class name for a modifier?

A buttonActive

B button--active

C button_active

D button.active

BEM uses double hyphens for modifiers, like 'button--active'.

Why is it important to follow naming conventions in CSS?

A To increase file size

B To make code harder to read

C To keep code consistent and easy to maintain

D To avoid using classes

Consistent naming helps everyone understand and maintain the CSS code easily.

Which is a good practice for CSS class names?

A Use lowercase letters and hyphens

B Use uppercase letters randomly

C Use special characters like @ or #

D Use spaces in class names

Lowercase letters and hyphens improve readability and avoid errors.

In BEM, what does the 'Element' part represent?

A A CSS property

B A standalone block

C A modifier state

D A part inside a block

Elements are parts inside a block, separated by double underscores.

Which of these is NOT recommended for CSS class names?

A Very long and complicated names

B Meaningful names

C Consistent style

D Using hyphens to separate words

Very long names make code harder to read and maintain.

Explain the BEM naming convention and why it helps in CSS.

Think about how BEM breaks down parts of a component.

List three best practices for naming CSS classes.

Focus on readability and avoiding errors.