CSS Architecture & Design Systems Flashcards
7 cards from real Front End Development practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.
Read the first 7 CSS Architecture & Design Systems flashcards as text
What does the acronym BEM stand for in CSS methodology?
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.
In BEM naming convention, how is a child element within a block written?
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).
What is the primary advantage of using a CSS preprocessor like Sass or Less?
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.
What are design tokens in the context of a design system?
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.
How many rule categories does SMACSS (Scalable and Modular Architecture for CSS) define?
Answer: 5
SMACSS defines 5 rule categories: Base, Layout, Module, State, and Theme, providing a structured approach to organizing CSS at scale.
What is a Sass mixin and how is it used?
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.
What is the role of the 'cascade' algorithm in CSS?
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.
How this page was made: written with AI tools and published by Nathan Beja, founder of Practice Test Geeks, who is responsible for its content. We have not yet matched this exam's facts to an official source, so confirm fees, dates and rules with the exam body. Not reviewed by a subject-matter expert. Editorial policy