Front End Development CSS Architecture & Design Systems 2 — Questions and Answers
Question 1: What does the acronym BEM stand for in CSS methodology?
- Browser Element Modifier
- Block Element Modifier (Correct answer)
- Basic Event Model
- Block Event Manager
Correct answer: Block Element Modifier
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?
- block-element
- block__element (Correct answer)
- block--element
- block.element
Correct answer: block__element
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?
- It automatically optimizes images embedded in CSS
- It adds programming features like variables, nesting, and mixins that compile to standard CSS (Correct answer)
- It converts CSS animations to JavaScript for better performance
- It automatically tests stylesheets across different browsers
Correct answer: It adds programming features like variables, nesting, and mixins that compile to standard CSS
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?
- Authentication keys used to access design tools and asset libraries
- Named, platform-agnostic entities that store design decisions like colors, spacing, and typography (Correct answer)
- JavaScript functions that dynamically generate CSS at runtime
- SVG icons and visual assets stored in a centralized repository
Correct answer: Named, platform-agnostic entities that store design decisions like colors, spacing, and typography
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?
- 3
- 5 (Correct answer)
- 7
- 9
Correct answer: 5
SMACSS defines 5 rule categories: Base, Layout, Module, State, and Theme, providing a structured approach to organizing CSS at scale.
Question 6: What is a Sass mixin and how is it used?
- A way to import partial Sass files into a main stylesheet
- A reusable block of CSS declarations defined with @mixin and included with @include, optionally accepting arguments (Correct answer)
- A Sass function that returns a calculated value for use in properties
- A selector that targets multiple elements matching different criteria
Correct answer: A reusable block of CSS declarations defined with @mixin and included with @include, optionally accepting arguments
A Sass mixin is a reusable block of styles defined with @mixin and inserted anywhere with @include, and can accept arguments to produce varied output.
Question 7: What is the role of the 'cascade' algorithm in CSS?
- It creates visual waterfall animation effects for page elements
- It resolves conflicts between competing CSS rules by weighing origin, specificity, and source order (Correct answer)
- It converts Sass and Less preprocessor syntax into standard CSS
- It determines the order in which external stylesheets are downloaded
Correct answer: It resolves conflicts between competing CSS rules by weighing origin, specificity, and source order
The cascade is CSS's conflict-resolution algorithm that determines which rule applies by weighing factors including stylesheet origin, selector specificity, and source order.
Front End Development CSS Architecture & Design Systems 2
What does the acronym BEM stand for in CSS methodology?