Los CSS reset son archivos CSS, que limpian todas las propiedades de CSS, que aplican por defecto los navegadores web y que además son diferentes en cada uno de ellos. De esta manera nuestra CSS, será lo más homogénea posible en todos los navegadores web que existen.
El pionero en compartir un achivo de este tipo fue Nicolas Gallagher , creando una hoja de estilos llamada normalize.css, publicada en GitHub.
En la maquetación CSS actual, la tendencia es dejar de utilizar este tipo de archivos. Una de las razones es que las compatibilidades CSS de los navegadores, han mejorado notablemente estos últimos años, por lo que este tipo de archivos son demasiado extensos y contienen reglas innecesarias y le faltan otras más actuales.
Un reset personalizado
Una de las partes de mi jornada laboral la dedico a impartir formación en CSS, y siempre resulta cómodo tener un archivo base CSS, para comenzar ejercicios o pequeños proyectos. Por eso me surgió la necesidad de crear mi propio CCS Reset, personalizado y adaptado a las últimas tendencias. Y como siempre, fiel a mi filosofía lo quiero compartir.
[css]
/*
Raúl Pérez CSS Reset
*/
*, *::before, *::after {
box-sizing: border-box;
}
*{
margin: 0;
padding: 0;
}
.clearfix::after {
content: “”;
clear: both;
display: table;
}
html{
font-size: 62.5%;
}
body {
min-height: 100vh;
scroll-behavior: smooth;
line-height: 1.5;
font-size: 1.6rem;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
[/css]
Partes de la CSS
[css]
*, *::before, *::after {
box-sizing: border-box;
}
*{
margin: 0;
padding: 0;
}
[/css]
En esta parte aplicamos box-sizing: border-box; para que en las dimesiones de los elementos no nos añada los bordes y rellenos. Con margin:0 y padding:0; limpiamos todos los márgenes y rellenos que aplican los navegadores por defecto
[css]
html{
font-size: 62.5%;
}
[/css]
Aquí aplicamos este % de tamaño de fuente, para posteriormente trabajar con la unidad relativa rem y que la equivalencia con los px sea 1rem = 10px
[css]
body {
min-height: 100vh;
scroll-behavior: smooth;
line-height: 1.5;
font-size: 1.6rem;
}
[/css]
Para el body, aplicamos el min-height: 100vh; para que si no hay contenido suficiente el body tenga la altura del alto de la pantalla y el scroll-behavior: smooth; para suavizar los movimientos entre anclas.
[css]
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
[/css]
Para las imágenes y demás elementos visuales las hacemos responsivas y salvamos los desbordamientos.
[css]
input, button, textarea, select {
font: inherit;
}
[/css]
Aquí forzamos a los formularios a heredar las propiedades de fuente, ya que sino aplica sus propios tamaños y tipografías.