Exercise 1: The Two Real Problems Frameworks Solve, and Why BEM Alone Doesn't Fully Solve Them — Possible Solution ==================================================================== THE TWO REAL PROBLEMS ------------------------------ Per this chapter, "as a CSS codebase grows across many developers and many pages, two real, recurring problems emerge. First, consistency — different developers reinventing slightly different spacing and color values, buttons that look almost-but-not-quite the same across a site. Second, naming and organization fatigue — BEM... solves naming and scoping, but doesn't solve the 'what values do I actually use' question, and doesn't prevent duplicate, near-identical CSS rules from accumulating over time." THE FIRST PROBLEM: CONSISTENCY ------------------------------ Without a shared system, one developer might use 12px padding on a card component while another developer, building a similar card elsewhere in the same codebase, uses 14px — not because either choice is wrong, but because there's no shared, agreed-upon reference either of them consulted. Over time, a codebase accumulates many small, unintentional inconsistencies like this, none individually serious, but collectively making the product look less polished and cohesive than intended. THE SECOND PROBLEM: NAMING/ORGANIZATION FATIGUE ------------------------------ Even with disciplined naming, a growing codebase can end up with many separate CSS rules that are nearly identical to each other (two slightly different "card" styles, three slightly different button variants that could have been one), because nothing in the naming system itself flags or prevents this duplication — it just makes each individual rule easier to name and scope correctly. WHY BEM ALONE DOESN'T FULLY SOLVE EITHER PROBLEM ------------------------------ BEM (Block-Element-Modifier), as previewed in css_intermediate_11, is fundamentally a NAMING CONVENTION — it establishes a consistent way to name and scope CSS classes so that a given class's own relationship to its component is clear and collision-free. But BEM says nothing about WHAT VALUES to actually use for spacing, color, or typography (the consistency problem), and it provides no built-in mechanism to detect or prevent two developers from independently creating two near-identical, differently-named BEM blocks that could have been one shared component (the organization-fatigue problem). BEM makes existing CSS rules easier to name well — it doesn't reduce how many rules get written, or ensure those rules pull from a shared, consistent set of values. WHY THIS WORKS AS AN ANSWER ------------------------------ It states both problems precisely using the chapter's own wording, and explains specifically what BEM DOES solve (naming/scoping) versus what it leaves unaddressed (shared values, duplicate rules) for each problem individually, rather than treating BEM as a general CSS- organization solution.