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.