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

Browser Element Modifier

Answer

Basic Event Model

Answer

Block Event Manager

Question 2

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

Accepted Answer

block__element

Answer

block-element

Answer

block--element

Answer

block.element

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

It automatically optimizes images embedded in CSS

Answer

It converts CSS animations to JavaScript for better performance

Answer

It automatically tests stylesheets across different browsers

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

Authentication keys used to access design tools and asset libraries

Answer

JavaScript functions that dynamically generate CSS at runtime

Answer

SVG icons and visual assets stored in a centralized repository

Question 5

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

Accepted Answer

5

Answer

3

Answer

7

Answer

9

Question 6

What is a Sass mixin and how is it used?

Accepted Answer

A reusable block of CSS declarations defined with @mixin and included with @include, optionally accepting arguments

Answer

A way to import partial Sass files into a main stylesheet

Answer

A Sass function that returns a calculated value for use in properties

Answer

A selector that targets multiple elements matching different criteria

Question 7

What is the role of the 'cascade' algorithm in CSS?

Accepted Answer

It resolves conflicts between competing CSS rules by weighing origin, specificity, and source order

Answer

It creates visual waterfall animation effects for page elements

Answer

It converts Sass and Less preprocessor syntax into standard CSS

Answer

It determines the order in which external stylesheets are downloaded