How deeply does D3.js in Action, Third Edition cover cascade?

Demonstrates precedence with a three-way SVG fill example but does not work through the full cascade algorithm.

Cascade

As explained in D3.js in Action, Third Edition

The CSS cascade is the algorithm that resolves competing declarations by considering their origin, importance, specificity, and source order.

The CSS cascade resolves competing declarations by weighing their origin, importance, specificity, and source order. For SVG, styles can come from attributes, inline styles, or external stylesheets. section 2.6 section 1.2.4

When the same SVG property is declared in several places:

An inline style overrides the same property from an external stylesheet. section 2.6 section 1.2.4
An external stylesheet declaration overrides the corresponding presentation attribute. section 2.6
Separating JavaScript behavior from CSS presentation makes large projects easier to maintain and keeps styling architecture deliberate. section 1.2.4

Three competing fills

A rectangle receives fill="turquoise" as an attribute, style("fill", "plum") as an inline style, and fill: orange from main.css. The visible result is plum because the inline declaration wins. section 2.6

How D3.js in Action, Third Edition covers it

liveBook manning.com

Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

CSS in Depth, Second EditionThe CSS cascade is the process that selects a property value from competing declarations according to their applicability, origin, importance, specificity, and source order.
liveBook manning.com

WordPress Power Toolkit: Harness AI to build next-level websitesThe CSS cascade is the rule-resolution process that determines which CSS declarations apply when multiple declarations match an element.
liveBook manning.com

Web Design Playground, Second EditionThe CSS cascade is the algorithm that resolves competing style rules from different sources to determine the style applied to an element.
liveBook manning.com

Web Design PlaygroundThe CSS conflict-resolution mechanism that determines which style rule applies when multiple style sources overlap.

Compare how 5 books explain cascade →

Related concepts

inheritancecontrasts with · Inheritance is a mechanism by which a child type or element receives properties, values, or behavior from a parent, subject to system rules and possible overrides.
CSSpart of · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
specificityuses · CSS specificity is the priority assigned to a selector that helps determine which matching declaration takes precedence in the cascade when styles conflict.
style attributehas part · The style attribute is an HTML or SVG attribute whose value contains CSS declarations applied directly to that element.
cascaded valueproduces · A cascaded value is the property value selected by the CSS cascade for a particular element and property.
CSS source orderconfigured by · CSS source order is the relative ordering of declarations that determines which declaration prevails when competing declarations have equal cascade precedence.

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.