A descendant selector uses a space to match an element anywhere inside a matching ancestor. For example, `.page-header .dropdown` targets a dropdown within a page header, even if other elements sit between them. section 9.1.3
That selector can solve an immediate styling problem, but it ties the dropdown’s appearance to its location. A dark dropdown needed elsewhere would require another selector or duplicated styles. Repeated context-dependent rules also raise specificity and make styles harder to find and change. A modifier class on the dropdown expresses the variation without requiring a particular ancestor. section 9.1.3
A space changes the target
Inside a `.modal` nesting block, `.is-open` produces `.modal .is-open`: an element inside the modal with the `is-open` class. To style the modal itself when it has that class, use `&.is-open`, which produces `.modal.is-open` with no space. section 8.4.1
Not every relationship needs to appear in a selector. A module subelement named `.media__image` can be styled by its class alone. Where structure is intentional, `.media__body > h4` targets an immediate child heading; unlike a space, `>` does not match headings deeper inside the body. This choice also fixes the title to an `h4`, so use a class if the heading level must vary. section 9.1.4
