Exercise 1: What "Utility-First" Means, and Translating a BEM Class — Possible Solution ==================================================================== WHAT "UTILITY-FIRST" MEANS ------------------------------ Per this chapter, "utility-first means applying many small, single-purpose classes directly to an element, each doing exactly one thing... every class maps to one CSS declaration or a tightly related small group." Rather than writing one custom class name that bundles together several CSS declarations (padding, background, border-radius, box-shadow all under one .card rule), utility-first breaks each individual CSS declaration out into its own separate, reusable, single-purpose class, applied directly to the HTML element itself. TRANSLATING THE .card CLASS INTO UTILITY CLASSES ------------------------------ Per this chapter's own worked example, a BEM .card rule with: .card { display: flex; align-items: center; padding: 1rem; background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); } translates into individual utility classes, each one handling exactly one of those declarations: - display: flex -> flex - align-items: center -> items-center - padding: 1rem -> p-4 - background: white -> bg-white - border-radius: 0.5rem -> rounded-lg - box-shadow: ... -> shadow-md Applied together directly on the element:
Rather than one semantic class (.card) whose meaning has to be looked up in a separate stylesheet, the element's own class attribute directly lists every individual style decision that was made — the exact same visual result, reached through composing several small, pre-existing utility classes instead of one custom, purpose-built rule. WHY THIS WORKS AS AN ANSWER ------------------------------ It states the chapter's own class-per-declaration definition precisely, and performs the actual translation from the BEM example to utility classes property by property, matching the chapter's own worked example exactly rather than describing the transformation only abstractly.