CSS declares how elements should appear under particular conditions. A selector identifies elements; a declaration supplies a property and value, such as `color: black`. The browser determines which rules apply and renders the page. That simple syntax can become difficult to predict when several rules affect the same element. section 1.0 section 1.1
Why didn’t the heading use that font?
Suppose a heading matches `h1`, `#page-title`, and `.title`, each assigning a different `font-family`. The ID selector wins, so the heading renders in sans serif. When a declaration appears to have no effect, check the other rules targeting the element rather than treating each rule in isolation. section 1.1
Listing 1.2 Conflicting declarations
h1 { #1
font-family: serif;
}
#page-title { #2
font-family: sans-serif;
}
.title { #3
font-family: monospace;
}
Compare the three matching selectors and their conflicting font declarations. section 1.1
Predictable CSS depends on more than making a selector win today. A general link rule may outrank a simpler button class even when the button style better expresses your intent. Consider what will happen when markup changes or the stylesheet is reused on another page. section 8.1 section 1.1
Two other constraints shape practical stylesheets:
- The final page is assembled after content and styles are authored. A stylesheet can serve many pages, while users can change font size or browser-window size; avoid assuming a fixed canvas. section 2.1
- For reusable interfaces, divide styles into modules responsible for small sets of elements. Aim for changes to one component not to produce unexpected effects in another. section 9.1
- For a newer selector, give it a separate ruleset from a supported fallback. If one selector in a combined list is unsupported or invalid, the browser ignores the whole ruleset. section 1.5.2
