Skip to content
Alebat

Reset CSS

  • El Reset CSS es una técnica utilizada en desarrollo web para eliminar o restablecer los estilos predeterminados de los navegadores, permitiendo así tener un punto de partida uniforme para el diseño de sitios web. Cada navegador tiene su propio conjunto de estilos predeterminados para elementos HTML, lo que puede llevar a inconsistencias en la apariencia de un sitio web cuando se visualiza en diferentes navegadores. El Reset CSS busca mitigar estos problemas al establecer un conjunto de estilos básicos y uniformes para todos los elementos HTML, asegurando así que el diseño se vea consistente en todos los navegadores [0].

  • Para crear un Reset CSS, se seleccionan todas las etiquetas HTML y se les asignan estilos predeterminados, como eliminar márgenes, rellenos (padding), bordes, y establecer el tamaño de fuente al 100%. Además, se pueden definir estilos específicos para elementos HTML5, como establecer la propiedad de visualización en “block” para ciertos elementos, eliminar el estilo de lista predeterminado de las listas desordenadas (ul, ol), y ajustar la alineación vertical de elementos como imágenes y tablas [0].

  • Para utilizar un Reset CSS en un proyecto web, se debe incluir antes de cualquier otro archivo CSS. Esto se hace generalmente mediante la etiqueta <link> en el <head> del documento HTML, apuntando al archivo CSS que contiene el Reset CSS. Por ejemplo: <link rel="stylesheet" href="reset.css">. Al incluir el Reset CSS al inicio, se asegura que los estilos predeterminados del navegador se eliminen, permitiendo aplicar estilos personalizados sin interferencias de los estilos predeterminados del navegador [0].

  • En resumen, el Reset CSS es una herramienta esencial en el desarrollo web que ayuda a garantizar la consistencia visual de los sitios web en diferentes navegadores, permitiendo a los desarrolladores centrarse en la creación de un diseño personalizado sin preocuparse por las variaciones en los estilos predeterminados de los navegadores.

Ejemplo de reset

/* Reseteamos los margin y paddings de todas las etiquetas */
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


/* Evitamos problemas con las imagenes */
img,
picture,
video,
iframe,
figure {
  max-width: 100%;
  width: 100%;
  height: 100%;
  max-height: inherit;
  /* opcional */
  object-fit: cover;
  /* opcional */
  object-position: center center;
}


/* Reseteamos los enlaces para funcionar como cajas... */
a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: map-get($map: $font-size, $key: fs-small);
  font-family: map-get($map: $fonts, $key: f-font-book);


  @include responsive() {
    font-size: map-get($map: $font-size, $key: fs-extra-small);
  }
}


/* ... excepto los que se encuentran en párrafos */
p a {
  display: inline;
  font-size: map-get($map: $font-size, $key: fs-small);
  font-family: map-get($map: $fonts, $key: f-font-book);
  text-wrap: pretty;


  @include responsive() {
    font-size: map-get($map: $font-size, $key: fs-extra-small);
  }
}


/* Quitamos los puntos de los <li> */
li {
  list-style-type: none;
  font-size: map-get($map: $font-size, $key: fs-small);
  font-family: map-get($map: $fonts, $key: f-font-book);


  @include responsive() {
    font-size: map-get($map: $font-size, $key: fs-extra-small);
  }
}


/* Configuramos anclas suaves */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-size: 100%;
}


/* Desactivamos estilos por defecto de las principales etiquetas de texto */
h1 {
  font-size: map-get($map: $font-size, $key: fs-extra-big);
  font-family: map-get($map: $fonts, $key: f-font-light);
  text-wrap: balance;
  @include responsive() {
    font-size: map-get($map: $font-size, $key: fs-medium);
  }
}
h2 {
  font-size: map-get($map: $font-size, $key: fs-big);
  font-family: map-get($map: $fonts, $key: f-font-thin);
  text-wrap: balance;


  @include responsive() {
    font-size: map-get($map: $font-size, $key: fs-medium);
  }
}
h3 {
  font-size: map-get($map: $font-size, $key: fs-small);
  font-family: map-get($map: $fonts, $key: f-font-bold);
  text-wrap: balance;
}
h4,
h5,
h6,
p,
span,
a,
blockquote,
i,
b,
u,
em {
  font-weight: inherit;
  font-style: inherit;
  text-decoration: none;
  hyphens: none;
}


/* Estilos predeterminados de los parrafos */
p {
  font-size: map-get($map: $font-size, $key: fs-small);
  font-family: map-get($map: $fonts, $key: f-font-book);
  text-wrap: pretty;


  @include responsive() {
    font-size: map-get($map: $font-size, $key: fs-extra-small);
  }
}


/* Evitamos problemas con los pseudoelementos de quotes */
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}


/* Nivelamos problemas de tipografías y colocación de formularios */
form,
input,
textarea,
select,
button,
label {
  font-family: inherit;
  font-size: inherit;
  hyphens: auto;
  background-color: transparent;
  color: inherit;
  display: block;
  /* opcional */
  appearance: none;
}


/* Reseteamos las tablas */
table,
tr,
td {
  border-collapse: collapse;
  border-spacing: 0;
}


/* Evitamos problemas con los SVG */
svg {
  width: 100%;
  display: block;
  fill: currentColor;
}


/* Configuramos la tipografía para toda la web */
body {
  overflow-x: hidden;
  max-width: map-get($map: $sizes, $key: s-body);
  margin: auto;
  background-color: map-get($map: $colors, $key: c-black);
  font-family: map-get($map: $fonts, $key: f-font-book);
  color: map-get($map: $colors, $key: c-white);
  min-height: 100vh;
  font-size: 100%;
  /* opcional */
  hyphens: auto;
}


/** Barra Scroll **/


::-webkit-scrollbar {
  width: 0.4375em;
  height: auto;
  border-radius: 0.25em;
  background-color: map-get($map: $colors, $key: c-black);
  @media (max-width: 53.625em) {
    width: 0;
  }
}


::-webkit-scrollbar-thumb {
  width: 100%;
  background: map-get($map: $colors, $key: c-principal-color);
  border-radius: 0.25em;


  @media (max-width: 53.625em) {
    width: 0;
  }
}


.margin-top {
  margin: map-get($map: $sizes, $key: s-margin-top);
}


.margin-top-banner {
  margin: map-get($map: $sizes, $key: s-margin-top-banner);
}


.margin-blocks {
  margin: map-get($map: $sizes, $key: s-margin-blocks);
}


.outstanding {
  font-size: map-get($map: $font-size, $key: fs-extra-big);
  font-family: map-get($map: $fonts, $key: f-font-bold);
  @include responsive() {
    font-size: map-get($map: $font-size, $key: fs-big);
  }
}


.underscore {
  font-size: map-get($map: $font-size, $key: fs-big);
  font-family: map-get($map: $fonts, $key: f-font-book);
  @include responsive() {
    font-size: map-get($map: $font-size, $key: fs-medium);
  }
}


.call-to-action {
  font-size: map-get($map: $font-size, $key: fs-small);
  font-family: map-get($map: $fonts, $key: f-font-bold);
}
.call-to-action-small {
  font-size: map-get($map: $font-size, $key: fs-extra-small);
  font-family: map-get($map: $fonts, $key: f-font-bold);
}


.detail-paragraph {
  font-size: map-get($map: $font-size, $key: fs-detail-paragraph);
  font-family: map-get($map: $fonts, $key: f-font-book);
}
.modal-enter-active,
.modal-leave-active {
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}
.modal-enter-from,
.modal-leave-to {
  transform: translateY(200em);
  visibility: hidden;
  opacity: 0;
}