Front End Development CSS Architecture & Design Systems 2

Question 1

What does the acronym BEM stand for in CSS methodology?

Accepted Answer

Block Element Modifier

Answer

BEM stands for Block Element Modifier, a naming convention that structures CSS class names to create reusable, modular components with clear relationships.

Question 2

In BEM naming convention, how is a child element within a block written?

Accepted Answer

block__element

Answer

In BEM, an element inside a block is separated by two underscores (e.g., card__title), while a modifier uses two dashes (e.g., card--featured).

Question 3

What is the primary advantage of using a CSS preprocessor like Sass or Less?

Accepted Answer

It adds programming features like variables, nesting, and mixins that compile to standard CSS

Answer

CSS preprocessors like Sass add programming features including variables, nesting, mixins, and functions that don't exist in plain CSS, then compile output to standard CSS files.

Question 4

What are design tokens in the context of a design system?

Accepted Answer

Named, platform-agnostic entities that store design decisions like colors, spacing, and typography

Answer

Design tokens are named entities (e.g., --color-primary, --spacing-md) that store design decisions as reusable values, enabling consistency and easy updates across a product.

Question 5

How many rule categories does SMACSS (Scalable and Modular Architecture for CSS) define?

Accepted Answer

5

Answer

SMACSS defines 5 rule categories: Base, Layout, Module, State, and Theme, providing a structured approach to organizing CSS at scale.

Front End Development Practice Test

Front End Development Practice Test

Front End Development CSS Architecture & Design Systems 2