Inheritance and the Cascade
Some CSS properties naturally inherit from parent elements, while others do not. Typography properties such as color and font-family commonly inherit, whereas properties such as margin, padding, and border generally do not.
The cascade resolves conflicts by considering origin and importance, specificity, scoping rules, and source order. Modern CSS also introduces layers through @layer, providing an explicit mechanism for organizing cascade precedence.
Cascade Resolution
Cascade Layers
@layer reset, base, components, utilities;
@layer base {
body {
font-family: system-ui, sans-serif;
}
}
@layer utilities {
.hidden {
display: none;
}
}💡 Cascade layers allow authors to define a predictable order between groups of styles.
Key Takeaways
- Inheritance passes certain properties from parent to child.
- Cascade layers can make large CSS systems more predictable.
Knowledge Check
Which property commonly inherits from a parent?