Mi propio CSS Reset

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.

 

Partes de la 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

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

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.

Para las imágenes y demás elementos visuales las hacemos responsivas y salvamos los desbordamientos.

Aquí forzamos a los formularios a heredar las propiedades de fuente, ya que sino aplica sus propios tamaños y tipografías.

 

 

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada.