Modern CSS Reset Under 1KB for Clean Code – defaults.css

defaults.css is a lightweight CSS reset library that combines normalization and reset functionality into a single, modern stylesheet weighing less than 1KB.

Key Features

• Baseline compatibility: Uses modern CSS features supported across all current browsers
• Dual functionality: Combines CSS reset and normalization in one pass
• Cascade layer integration: Uses @layer for proper CSS organization and specificity management
Sponsored
• Optional configuration: Provides custom property hooks for vertical rhythm, shape margins, and scroll behavior
• DevTools optimization: Gates browser-specific rules behind @supports to reduce development noise

Use Cases

• Starting new projects: Provides a clean, consistent baseline across all browsers without the overhead of multiple reset files
• Modern web applications: Takes advantage of current CSS features like logical properties and cascade layers for better maintainability
• Performance-conscious projects: The sub-1KB size makes it ideal for projects where every byte matters

How to use it:

1. Install defaults.css and import it with NPM.

# NPM
$ npm install @csswizardry/defaults.css

@import "@csswizardry/defaults.css";

2. Or include it in your HTML:

<link rel=”stylesheet” href=”/path/to/defaults.css”>

3. defaults.css provides three optional configuration points through CSS custom properties:

Vertical Rhythm Configuration. This setting applies consistent bottom margins to typographical elements (headings, paragraphs, lists, etc.) to establish a baseline grid.

:root {
  --defaults-margin-bottom: 1.5rem;
}

Shape Margins for Floated Images. When you float images and want text to wrap around their shape rather than their rectangular box, this property defines the margin around the shape.

:root {
  --defaults-shape-margin: 1rem;
}

Scroll Margin for Targeted Elements. This creates comfortable spacing when users navigate to anchored elements via fragment identifiers, particularly useful when you have fixed headers.

:root {
  --defaults-scroll-margin: 4rem;
}

4. If you’re using cascade layers in your project, include defaults.css in your layer order. The library automatically wraps its styles in @layer defaults.css, so your subsequent layers will take precedence without specificity conflicts.

@layer defaults, elements, components, utilities;

Alternatives:

• normalize.css: The established standard for CSS normalization. Normalize.css focuses purely on making browsers render elements consistently rather than removing default styles. You might prefer normalize.css if you want to preserve more browser defaults or if you’re working with legacy browser support requirements.
• modern-normalize: A modern take on normalize.css that drops legacy browser support. It provides similar cross-browser consistency but doesn’t include the reset functionality that defaults.css offers. Choose modern-normalize if you specifically want normalization without any reset behavior.
• reset.css (Eric Meyer): The classic CSS reset that aggressively removes all default styles. While thorough, it requires more work to rebuild styling from scratch. Eric Meyer’s reset might be preferable if you want maximum control and don’t mind rebuilding basic typography and spacing from the ground up.

FAQs

Q: Do I have to use Cascade Layers in my project to use this?
A: No. In fact, it works perfectly if you don’t use layers at all. Your regular, un-layered styles will always override the styles in defaults.css because of how the cascade works.

Q: What does “Baseline compatible” mean?
A: It means the library is designed and tested for modern browsers that support a common set of web platform features. You don’t have to worry about hacks for very old browsers like IE11.

Q: Why does it set font-family: serif on the html element?
A: This is a normalization step. Some browsers, particularly Firefox for Android, default to sans-serif. Setting a consistent serif base makes the starting point more predictable across all browsers before you apply your own font choices.

Q: How is this different from just using Normalize.css?
A: Normalize.css preserves useful defaults and corrects bugs. defaults.css does that too, but it also removes more default styles (like all margins and padding) to provide a cleaner slate, similar to a traditional reset. It’s a hybrid that uses more modern CSS features to stay lightweight and configurable.

Q: Is defaults.css compatible with CSS-in-JS solutions?
A: Yes, but you’ll need to ensure proper loading order. Include defaults.css before your CSS-in-JS styles execute, typically by importing it in your main CSS file or including it as a separate stylesheet link. The cascade layer system will handle precedence correctly.

Q: What’s the difference between using defaults.css and just writing my own reset?
A: defaults.css provides battle-tested cross-browser consistency that would take significant time to research and implement yourself. The library handles edge cases like nested heading sizing in WebKit, super/subscript positioning, and browser-specific text adjustment properties that are easy to overlook in custom implementations.

Related Resources:

• 20+ Modern CSS Reset Libraries

The post Modern CSS Reset Under 1KB for Clean Code – defaults.css appeared first on CSS Script.