Sobes.tech
Middle

How do you reset styles in your projects?

sobes.tech AI

Answer from AI

Most often I use normalize.css as a base. It brings element styles to a uniform, more predictable appearance across all browsers, while preserving useful default styles.

// Example part of normalize.css
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

main {
  display: block;
}

Sometimes I add my small reset or a set of basic styles on top of normalize.css for specific tasks or to reset margins and paddings of some elements.

// Additional styles
*,
*::before,
*::after {
  box-sizing: border-box; /* Makes sizing more predictable */
}

body {
  min-height: 100vh; /* Stretches body to full visible height */
  scroll-behavior: smooth; /* Smooth scrolling for anchors */
  text-rendering: optimizeSpeed; /* Prefers faster rendering */
}

a {
  text-decoration: none; /* Removes underline from links */
  color: inherit; /* Links inherit text color */
}

ul,
ol {
  list-style: none; /* Removes list markers */
  padding: 0;
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit; /* Form elements inherit font from parent */
}

img {
  max-width: 100%; /* Images do not overflow their container */
  display: block; /* Removes bottom margin from inline-blocks */
}

The choice of a specific approach depends on the project requirements and the framework used. Normalize.css is a good compromise between a full reset and default styles.