BEM naming with SASS nesting - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does BEM stand for in CSS naming?

BEM stands for Block, Element, Modifier. It is a way to name CSS classes to keep code organized and clear.

beginner

How does SASS nesting help when using BEM naming?

SASS nesting lets you write CSS inside other CSS rules. This matches BEM’s structure, making code shorter and easier to read.

beginner

In BEM, what is a 'Block'?

A Block is a standalone component that can be reused, like a button or a menu.

beginner

What is the correct BEM class name for a button element inside a form block?

If the block is 'form' and the element is 'button', the class name is 'form__button'.

beginner

How do you write a modifier for a block in BEM?

Add two dashes and the modifier name after the block, like 'button--primary' to show a primary style.

What is the purpose of BEM naming in CSS?

A To reduce the size of CSS files

B To organize CSS classes clearly and avoid conflicts

C To make CSS run faster

D To automatically generate CSS animations

BEM helps keep CSS organized and prevents class name conflicts by using a clear naming pattern.

In BEM, how do you name an element inside a block?

A block__element

B block-element

C block--element

D element__block

Elements are named by adding two underscores after the block name, like 'block__element'.

How does SASS nesting improve writing BEM styles?

A It compiles CSS faster

B It automatically renames classes

C It lets you write element styles inside the block style for clarity

D It removes the need for modifiers

Nesting lets you write element styles inside the block’s CSS rule, matching BEM’s structure and making code easier to read.

What does a BEM modifier class look like?

A modifier--block

B block__modifier

C block_modifier

D block--modifier

Modifiers use two dashes after the block or element name, like 'block--modifier'.

Which SASS code snippet correctly nests BEM styles for a block 'card' with element 'title'?

A .card { &__title { color: blue; } }

B .card { .title { color: blue; } }

C .card__title { color: blue; }

D .card-title { color: blue; }

Using '&__title' inside '.card' nests the element style correctly following BEM naming.

Explain how BEM naming works and why it is useful in CSS.

Think about how you name parts of a car: car (block), car__wheel (element), car--red (modifier).

Describe how you use SASS nesting to write BEM styles more easily.

Imagine putting smaller boxes inside a bigger box to keep things tidy.