Customization

Global Styles

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

Use official package

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:

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.

Getting Started
Introduction to Master CSS

The CSS language and framework for rapidly building modern and high-performance websites.

© Aoyue Design LLC.