Trucos CSS
CSS Trick

Avoid Universal Selector Resets

Why * { margin: 0 } hurts performance and what to use instead.

#css #performance #reset #best-practices

Browser Support

✓ Chrome 1+ ✓ Firefox 1+ ✓ Safari 1+ ✗ Edge

Avoid Universal Selector Resets

* applies to every DOM element including pseudo-elements, hurting performance.

/* ❌ Avoid */
* {
  margin: 0;
  padding: 0;
}


/* ✅ Better - target specific elements */
body, h1, h2, p, ul, ol {
  margin: 0;
}

Live Demo

Selector Performance
INFO
CSS Code
.reset-demo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
width: 100%;
max-width: 400px;
}
.reset-card {
padding: 1rem;
border-radius: 0.5rem;
}
.reset-bad {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.reset-good {
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
}
.reset-title {
margin: 0 0 0.5rem 0;
font-weight: 600;
font-size: 0.875rem;
}
.reset-bad .reset-title {
color: #ef4444;
}
.reset-good .reset-title {
color: #22c55e;
}
.reset-code {
font-size: 0.7rem;
display: block;
font-family: monospace;
}
.reset-desc {
margin: 0.5rem 0 0 0;
font-size: 0.7rem;
opacity: 0.7;
}

Exception: box-sizing: border-box on * is acceptable since it rarely needs to be overridden.

Comparte este CSS trick

Comentarios