"The new button has higher specificity than the global rule, so it overrides it." CSS specificity is:
Specificity is calculated as a score: inline styles (1-0-0-0) > IDs (0-1-0-0) > classes/attributes/pseudo-classes (0-0-1-0) > elements/pseudo-elements (0-0-0-1). When specificity is equal, the rule that appears last in the stylesheet wins (the cascade). !important overrides all, but should be used sparingly.
2 / 5
"We follow BEM naming conventions." BEM stands for:
BEM (Block Element Modifier) is a naming convention: .card (block), .card__title (element), .card--featured (modifier). It avoids specificity wars and makes styles self-documenting. Example: .btn__icon--small. Alternative methodologies: SMACSS, OOCSS, Utility-first (Tailwind).
3 / 5
Complete the sentence: "We define our brand colours once as _____ so that every component inherits them and a theme change updates everything automatically."
CSS custom properties (also called CSS variables) are defined with a double-dash prefix: --color-primary: #2563eb; and consumed with var(--color-primary). Unlike Sass variables, they are live — they respond to media queries, JavaScript changes, and cascade normally. Defined on :root for global scope.
4 / 5
"Use Flexbox for this nav bar, but Grid for the page layout." When is Grid the better choice?
Flexbox is one-dimensional: great for distributing space along a row or column (nav bars, button groups, centering). CSS Grid is two-dimensional: ideal for page-level layouts where both rows and columns matter. Practical rule: Flex for components, Grid for layouts — though they combine well.
5 / 5
"The component broke because we changed a utility class in the global stylesheet." A utility class is:
A utility class (or atomic class) encapsulates a single style rule. Example: .flex { display: flex }, .gap-4 { gap: 1rem }. Frameworks like Tailwind CSS are built entirely on utility classes. They promote composability and reduce specificity issues, but can make HTML verbose. The opposite approach is semantic/component-based CSS (BEM, CSS Modules).