Customization

Global Styles

Normalize browser and preset global styles for more concise-style programming.

The official @master/normal.css is a ~600B lightweight CSS package, is similar to modern-normalize and normalize.css you are familiar with but better:

Keep element styles consistent across browsers.
Remove browser default styles for a better start.
Support responsive media and better text rendering.
and more...

npm install @master/normal.css

Just import it into a global CSS file.

@import '@master/normal.css';

Copy-paste the CDN or import on-demand through

<link href="https://cdn.master.co/normal.css" rel="stylesheet">

Or import on-demand:

@import '@master/normal.css/better-text-appearance.css';
@import '@master/normal.css/eliminate-click-delays.css';
@import '@master/normal.css/improve-user-recognition.css';
@import '@master/normal.css/intuitive-sizing-control.css';
@import '@master/normal.css/readable-tab-size.css';
@import '@master/normal.css/responsive-media-elements.css';
 
/* consistent */
@import '@master/normal.css/consistent-abbreviation-styles.css';
@import '@master/normal.css/consistent-bold-styles.css';
@import '@master/normal.css/consistent-code-styles.css';
@import '@master/normal.css/consistent-control-styles.css';
@import '@master/normal.css/consistent-horizontal-lines.css';
@import '@master/normal.css/consistent-small-styles.css';
@import '@master/normal.css/consistent-superscript-subscript.css';
@import '@master/normal.css/consistent-table-styles.css';
 
/* remove */
@import '@master/normal.css/remove-anchor-styles.css';
@import '@master/normal.css/remove-control-styles.css';
@import '@master/normal.css/remove-default-borders.css';
@import '@master/normal.css/remove-default-spacing.css';
@import '@master/normal.css/remove-tap-highlight.css';
@import '@master/normal.css/remove-list-styles.css';
@import '@master/normal.css/remove-heading-styles.css';

In most cases, you won't have CSS files, except for normalizing global styles.

Style descendant elements

Customize your fonts, foreground color, etc., add syntax in <body class="…"> and rely on native inheritance behavior or use CSS selectors to preset global styles.

Use zero specificity :where() to select elements and preset styles.

<body class="font:sans font:mono_:where(code,pre)">…</body>

Otherwise, you risk falling into !important hell with :is() and _ descendant selectors.

You can also add @preset to lower it to the preset layer to make it even lower in priority.

Global Styles

Use official package

Style descendant elements