Cómo estilizo mis sitios web con mis restablecimientos CSS favoritos

Foto de Lauren Mancke en Unsplash

Muchos desarrolladores frontend comienzan a diseñar sus sitios web con Normalize. Algunos desarrolladores tienen preferencias personales que agregan a Normalize.css. Yo también tengo mis preferencias.

En este artículo, quiero compartir estas preferencias con usted, mi reinicio personal de CSS (que uso además de Normalize.css).

Clasifico los restablecimientos en 8 categorías:

1. Dimensionamiento de la caja

2. Eliminar márgenes y rellenos

3. Listas

4. Formas y botones

5. Imágenes e incrustaciones

6. Tablas

7. El atributo oculto

8. Noscript

Tamaño de caja

La propiedad de tamaño de caja cambia la forma en que funciona el modelo CSS Box. Cambia cómo se calculan las propiedades de ancho, alto, relleno, borde y margen.

La configuración predeterminada para el tamaño del cuadro es content-box. Prefiero cambiar esto a border-box porque me resulta más fácil diseñar el relleno y el ancho.

Para obtener más información sobre el tamaño del cuadro, puede estar interesado en "Entender el tamaño del cuadro".

html {
  tamaño de la caja: border-box;
}
*,
*::antes de,
*::después {
  tamaño de caja: heredar;
}

Eliminar márgenes y rellenos

Los navegadores establecen diferentes márgenes y rellenos para diferentes elementos. Esta configuración predeterminada me desalienta cuando no estoy al tanto. Cuando codifico, prefiero configurar todos los márgenes y rellenos yo mismo.

/ * Restablecer márgenes y rellenos en la mayoría de los elementos * /
cuerpo,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
pags,
pre,
blockquote,
figura,
h {
  margen: 0;
  relleno: 0;
}

Liza

Utilizo listas desordenadas en muchas situaciones y no necesito un estilo de disco en la mayoría de ellas. Aquí establezco list-style en none. Cuando necesito el estilo del disco, lo configuro manualmente en el

    específico.

    / * Elimina discos de ul * /
    ul {
      estilo de lista: ninguno;
    }

    Formas y botones

    Los navegadores no heredan la tipografía para formularios y botones. Establecen la fuente en 400 11px system-ui. Esto me parece alucinante y extraño. Siempre tengo que hacer que hereden de los elementos ancestrales manualmente.

    entrada,
    textarea,
    seleccionar,
    botón {
      color: heredar;
      fuente: heredar;
      espacio entre letras: heredar;
    }

    Diferentes navegadores han diseñado los bordes de los elementos y botones de los formularios de manera diferente. No me gustan estos estilos predeterminados, y preferiría establecerlos en 1px gris sólido.

    entrada,
    textarea,
    botón {
      borde: 1px gris sólido;
    }

    Hice algunos ajustes más a los botones:

    1. Establezca el relleno del botón en 0.75em y 1em porque parecen ser valores predeterminados razonables desde mi experiencia.
    2. Se eliminó el radio de borde predeterminado que se aplica a los botones.
    3. Color de fondo forzado para ser transparente
    botón {
      radio de borde: 0;
      relleno: 0.75em 1em;
      color de fondo: transparente;
    }

    Finalmente, configuro eventos de puntero: ninguno a elementos dentro de un botón. Esto se usa principalmente para la interacción de JavaScript.

    (Cuando los usuarios hacen clic en algo en un botón, event.target es lo que hicieron clic, no el botón. Este estilo hace que sea más fácil trabajar con eventos de clic si hay elementos HTML dentro de un botón).

    `` `css
    botón * {
      eventos de puntero: ninguno;
    }

    Los elementos multimedia incluyen imágenes, videos, objetos, marcos flotantes e incrustaciones. Tiendo a permitir que estos elementos se ajusten al ancho de sus contenedores.

    También configuré estos elementos para mostrar: block porque inline-block crea espacios en blanco no deseados en la parte inferior del elemento.

    empotrar,
    iframe
    img,
    objeto,
    video {
      bloqueo de pantalla;
      ancho máximo: 100%;
    }

    Mesas

    Raramente uso tablas, pero a veces pueden ser útiles. Estos son los estilos predeterminados con los que comenzaré:

    mesa {
      diseño de tabla: fijo;
      ancho: 100%;
    }

    Cuando un elemento tiene un atributo oculto, debe ocultarse de la vista. Normalize.css ya hace esto por nosotros.

    [oculto] {
      pantalla: ninguno;
    }

    El problema con este estilo es su baja especificidad.

    A menudo agrego elementos ocultos a otros elementos que estilo con una clase. La especificidad de una clase es alta que un atributo, y la pantalla: ninguna propiedad no funciona.

    Es por eso que opto por aumentar la especificidad [oculta] con! Important.

    [oculto] {
      pantalla: ninguno! importante;
    }

    Noscript

    Si un componente requiere JavaScript para funcionar, agregaré una etiqueta

    Esto crea estilos predeterminados para la etiqueta

    / * estilos noscript * /
    noscript {
      bloqueo de pantalla;
      margen inferior: 1em;
      margen superior: 1em;
    }

    Terminando

    Todos comienzan sus proyectos de manera diferente. Por favor, siéntase libre de usar cualquiera de estos estilos que mencioné. Aquí hay un repositorio Github de mis Restablecimientos CSS personales.

    ¿Tiene alguna recomendación que pueda ayudar a mejorar este archivo de Restablecimiento CSS? Si lo haces, ¡no dudes en comunicarte y avisarme!

    Gracias por leer. ¿Te ayudó este artículo? Si lo hizo, espero que consideres compartirlo. Podrías ayudar a alguien más. ¡Muchas gracias!

    Este artículo fue publicado originalmente en mi blog.
    Suscríbete a mi boletín si quieres más artículos para ayudarte a convertirte en un mejor desarrollador frontend.