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.

Practice

1. What does the __ double underscore represent in BEM naming?

easy

A. It separates a block from its element

B. It separates a modifier from a block

C. It is used to join two blocks

D. It indicates a CSS property

Solution

1. Step 1: Understand BEM structure

   BEM uses blocks, elements, and modifiers. Elements are parts of blocks.

2. Step 2: Identify the role of double underscore

   The double underscore __ connects a block to its element, e.g., block__element.

3. Final Answer:

   It separates a block from its element -> Option A

4. Quick Check:

   BEM element separator = __ [OK]

Hint: Double underscore links block and element in BEM [OK]

Common Mistakes:

• Confusing __ with modifier separator --
• Thinking __ joins two blocks
• Using __ as a CSS property

2. Which of the following is the correct SASS nesting syntax for a BEM modifier block--active inside .block?

easy

A. &__active { color: red; }

B. .block--active { color: red; }

C. &--active { color: red; }

D. --active { color: red; }

Solution

1. Step 1: Understand SASS nesting with &

   The ampersand & represents the parent selector inside nesting.

2. Step 2: Apply modifier syntax

   For modifier block--active, use &--active inside .block nesting.

3. Final Answer:

   &--active { color: red; } -> Option C

4. Quick Check:

   SASS & + --modifier = &--modifier [OK]

Hint: Use & before --modifier inside block nesting [OK]

Common Mistakes:

• Writing full class name inside nesting
• Using __ instead of -- for modifiers
• Omitting & causing invalid selector

3. Given this SASS code, what CSS selector will be generated for the nested element?

.card {
  &__title {
    font-weight: bold;
  }
}

medium

A. .card__title { font-weight: bold; }

B. .card &__title { font-weight: bold; }

C. .card__title { font-weight: normal; }

D. .card-title { font-weight: bold; }

Solution

1. Step 1: Understand & usage in SASS

   The & represents the parent selector .card.

2. Step 2: Combine & with __title

   Combining .card and __title forms .card__title.

3. Final Answer:

   .card__title { font-weight: bold; } -> Option A

4. Quick Check:

   SASS & + __element = block__element [OK]

Hint: & plus __element creates block__element selector [OK]

Common Mistakes:

• Thinking & is literal text in output
• Confusing __title with -title
• Ignoring font-weight value changes

4. Identify the error in this SASS code using BEM nesting:

.menu {
  &__item {
    color: blue;
  }
  &--active {
    color: red;
  }
  &__item--active {
    font-weight: bold;
  }
  &-extra {
    padding: 10px;
  }
}

medium

A. Using &--active inside block is invalid

B. Missing nesting for &__item--active

C. No errors, code is correct

D. Incorrect use of &-extra for a modifier

Solution

1. Step 1: Check each nested selector

   &__item, &--active, and &__item--active follow BEM rules correctly.

2. Step 2: Analyze &-extra

   &-extra is invalid because BEM modifiers use double hyphen --, not single hyphen.

3. Final Answer:

   Incorrect use of &-extra for a modifier -> Option D

4. Quick Check:

   BEM modifiers need --, not - [OK]

Hint: Modifiers use --, not single - after & [OK]

Common Mistakes:

• Using single hyphen for modifiers
• Thinking &--active is invalid
• Missing nesting for combined element-modifier

5. You want to style a BEM block .form with an element __input and a modifier --error on the element. Which SASS nesting code correctly applies red border only when the input has the error modifier?

hard

A. .form {
&--error {
&__input {
border-color: red;
}
}
}

B. .form {
&__input {
border: 1px solid black;
&--error {
border-color: red;
}
}
}

C. .form {
&__input-error {
border-color: red;
}
}

D. .form-input {
&--error {
border-color: red;
}
}

Solution

1. Step 1: Nest element inside block

   The element __input is nested inside .form using &__input.

2. Step 2: Nest modifier inside element

   The modifier --error applies to the element, so inside &__input nest &--error.

3. Step 3: Confirm correct CSS output

   This produces .form__input--error selector with red border, applying only when input has error modifier.

4. Final Answer:

   Correct nesting with &__input then &--error inside -> Option B

5. Quick Check:

   Modifier nested inside element = &__element { &--modifier } [OK]

Hint: Nest modifier inside element nesting for element modifiers [OK]

Common Mistakes:

• Placing modifier outside element nesting
• Using block--modifier for element modifier
• Not nesting modifier with & inside element