Reset and standardize

Reset vs. Normalization

CSS reset and normalization are two common strategies in front-end development for handling browser default style differences. Their goal is to eliminate inconsistencies between different browsers, but their implementation methods and philosophies differ.

What is CSS Reset

CSS reset refers to completely clearing the browser's default styles through a set of rules, zeroing out the styles of all elements. This approach allows developers to build styles from scratch, avoiding interference from browser defaults.

/* Classic CSS reset example */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

The advantage of CSS reset is that it provides a completely consistent foundation, but the downside is that it requires redefining styles for every element, which can be labor-intensive.

What is CSS Normalization

CSS normalization does not completely remove default styles but selectively adjusts browser defaults to ensure consistent behavior across browsers while preserving useful default values.

/* Normalization CSS example */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

a {
  background-color: transparent;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

Normalization CSS retains semantic default styles, such as heading size relationships and list indentation, but adjusts specific values to ensure consistency.

Comparison Between Reset and Normalization

1. CSS Reset:

   • Completely clears all default styles
   • Requires building all styles from scratch
   • Suitable for highly customized designs
   • May cause accessibility issues

2. CSS Normalization:

   • Preserves useful default styles
   • Only fixes inconsistent parts
   • Reduces repetitive work
   • Provides a better accessibility foundation

Hybrid Approach in Modern Practices

Modern front-end development often adopts a hybrid approach, combining the advantages of reset and normalization:

/* Example of a modern hybrid approach */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --light-gray: #f5f5f5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: var(--text-color);
  background-color: white;
}

/* Preserve some semantic styles */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

p {
  margin-bottom: 1em;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Normalize form elements */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

Common Reset/Normalization Libraries

1. CSS Reset Libraries:

   • Eric Meyer's Reset CSS
   • CSS Reset by Richard Clark

2. CSS Normalization Libraries:

   • Normalize.css
   • Sanitize.css
   • Reboot (Bootstrap's foundation)

/* Example using Normalize.css */
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');

/* Then add custom styles */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

Performance Considerations

The impact of reset and normalization CSS on performance mainly includes:

1. File Size: Reset CSS is usually smaller than normalization CSS
2. Rendering Performance: Wildcard selectors (*) may affect performance
3. Maintenance Cost: Normalization CSS is generally easier to maintain

/* Example of performance-optimized reset */
/* Avoid wildcard selectors */
html, body, div, span, h1, h2, h3, p, a, img, ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* Only reset necessary elements */

Accessibility Impact

Normalization CSS is generally more accessibility-friendly because it:

1. Preserves semantic default styles
2. Maintains reasonable text size and contrast
3. Keeps form elements in accessible states

/* Example of accessibility-friendly normalization */
:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Responsive Design Considerations

When resetting or normalizing, consider responsive design:

/* Example of responsive reset */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive tables */
table {
  width: 100%;
  border-collapse: collapse;
}

/* Responsive media elements */
iframe, embed, object {
  max-width: 100%;
}

Application in Real Projects

In real projects, it is common to:

1. Choose a base library (Normalize.css or Reset)
2. Add project-specific reset rules
3. Define design system variables and base styles

/* Example of project base styles */
:root {
  --spacing-unit: 8px;
  --border-radius: 4px;
  --transition-duration: 0.2s;
}

/* Spacing system */
.mt-1 { margin-top: var(--spacing-unit); }
.mt-2 { margin-top: calc(var(--spacing-unit) * 2); }
/* ...other spacing classes */

/* Typography system */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
/* ...other font size classes */

Framework Approaches

Modern CSS frameworks handle reset/normalization in the following ways:

1. Bootstrap: Uses Reboot, an extension based on Normalize.css
2. Tailwind CSS: Uses a modern reset method
3. Foundation: Has its own normalization approach

/* Example of Tailwind's base styles */
@tailwind base; /* Includes modern reset */

/* Custom base styles */
@layer base {
  h1 {
    @apply text-3xl font-bold mb-4;
  }
  /* ...other base styles */
}

Version Control and Updates

When using third-party reset/normalization libraries:

1. Lock specific versions
2. Regularly check for updates
3. Consider forking and maintaining your own version

// Example package.json
{
  "dependencies": {
    "normalize.css": "^8.0.1"
  }
}

Best Practices for Custom Resets

When creating custom resets:

1. Start with an existing solution
2. Only add rules the project needs
3. Comment thoroughly
4. Review regularly

/**
 * Custom Reset CSS
 * Extended from Normalize.css v8.0.1
 */

/* Unified box model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dd, ol, ul,
figure, hr, fieldset, legend {
  margin: 0;
  padding: 0;
}

/* Basic typography settings */
body {
  line-height: 1.5;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Image handling */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Form element reset */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

Testing Strategies

After implementing reset or normalization, test:

1. Cross-browser consistency
2. Accessibility
3. Performance impact
4. Design system compatibility

// Simple browser feature test example
function testResetStyles() {
  const testElement = document.createElement('div');
  document.body.appendChild(testElement);
  
  // Test box model
  testElement.style.width = '100px';
  testElement.style.padding = '10px';
  const actualWidth = testElement.offsetWidth;
  
  if (actualWidth !== 100) {
    console.warn('Box model reset may not be applied correctly');
  }
  
  document.body.removeChild(testElement);
}

// Run test
testResetStyles();

Team Collaboration Standards

In team projects:

1. Clearly document the reset/normalization method used
2. Establish override rules
3. Define extension standards

# CSS Base Standards

## Reset Method
We use a custom reset based on Normalize.css, including:
- Unified box model
- Basic margin reset
- Typography foundation

## Prohibited
- Directly modifying reset files
- Adding global wildcard rules
- Overriding !important declarations in resets

## Extension Method
To add global reset rules:
1. Create `reset-additions.css`
2. Add detailed comments
3. Submit for team review

Historical Evolution

The development of CSS reset/normalization methods:

1. Early Days: Simple, brute-force wildcard resets
2. Mid-2000s: Eric Meyer's Reset CSS
3. 2010s: Rise of Normalize.css
4. Modern Era: Design system-oriented approaches

/* Typical 2004 reset */
* {
  margin: 0;
  padding: 0;
}

/* Improved 2010 reset */
html, body, div, span, h1, h2, h3, p, a, img, ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* Modern CSS variable integration */
:root {
  --reset-margin: 0;
  --reset-padding: 0;
}

* {
  margin: var(--reset-margin);
  padding: var(--reset-padding);
}

Future Trends

Possible future directions for CSS reset/normalization:

1. Tighter integration with design systems
2. Dynamic resets based on CSS variables
3. Normalization for new features (e.g., container queries)

/* Example of possible future CSS reset */
@custom-media --motionOK (prefers-reduced-motion: no-preference);

:root {
  --reset-margin: 0;
  --reset-padding: 0;
  --reset-box-sizing: border-box;
}

* {
  margin: var(--reset-margin);
  padding: var(--reset-padding);
  box-sizing: var(--reset-box-sizing);
}

@media (--motionOK) {
  * {
    scroll-behavior: smooth;
  }
}