CSS Reset For Modern Web Development – normal.css

normal.css is a super tiny (~600kb) CSS reset library that provides a consistent, cross-browser foundation for your CSS styles. It eliminates the need to write repetitive reset rules and allows you to focus on writing your own styles without worrying about browser inconsistencies.

normal.css offers several enhancements over traditional CSS reset libraries like normalize.css, such as better support for responsive media, improved text rendering, and a more comprehensive set of reset rules. These features make it easier to build modern, responsive web applications with beautiful typography and consistent styling across all devices.

How

to use it:

1. Install the normal.css with NPM.

# NPM
$ npm install @master/normal.css

2. Import the normal.css into your project.

// All in one
@import '@master/normal.css';

// 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-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';

3. Or load the normal.css from a CDN.

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

Changelog:

v3.2.0 (04/19/2025)

• Consistent device view height

v3.1.0 (06/09/2024)

• Remove heading styles
• Buttons and links should not be pointer

v3.0.2 (05/08/2024)

• Bugfixes

v3.0.0 (05/02/2024)

• Add @layer base to lower the precedence for all rules

v2.1.1 (03/12/2024)

• Merge rules by same selecto

The post CSS Reset For Modern Web Development – normal.css appeared first on CSS Script.