Skip to content

Adopt :where(h1) in the scaffold theme normalization for better CSS specificity #443

@yhatt

Description

@yhatt

ref: marp-team/marp-vscode#549

When user tried to reset margin of all elements through the universal selector *, the Marpit's scaffold style for section h1 normalization will override user style with CSS specificity (0-0-1 section * vs 0-0-2 section h1).

/* Scaffold: Normalization of `h1` (0-0-1: WIN) */
h1 {
  margin-block: 0.67em;
}

/* ---------- */

/* User theme: Reset margin by `*` (0-0-0: LOSE) */
* {
  margin: 0;
}

By adopting :where(h1), the CSS specificity for the scaffold style will become 0-0-0 and user would become to override it by * because of the CSS cascade (the order).

/* 0-0-0 */
:where(h1) {
  margin-block: 0.67em;
}

/* 0-0-0: The CSS cascade will follow the order of appearance, and can override the prior margin-block */
* {
  margin: 0;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions