css-protips

CSS Protips

Una colección de consejos para ayudarte a llevar tus habilidades CSS al siguiente nivel. Cada entrada es un patrón autónomo: aplica el que mejor se adapte al problema que tengas delante.

Usa un Reset CSS

Los resets CSS ayudan a garantizar la consistencia de estilos entre diferentes navegadores, proporcionando una base limpia para estilizar elementos. Hay muchos patrones de reset, o puedes usar un enfoque más simplificado:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Ahora los elementos estarán libres de márgenes y rellenos, y box-sizing te permite gestionar diseños con el modelo de caja CSS.

Demo

[!TIP] Si sigues el consejo Heredar box-sizing a continuación, quizás optes por no incluir la propiedad box-sizing en tu reset CSS.

Heredar box-sizing

Permite que box-sizing se herede de html:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Esto facilita cambiar box-sizing en plugins u otros componentes que aprovechen otro comportamiento.

Demo

Usa all: unset con Cuidado para Resets de Componentes

Al restablecer las propiedades de un elemento, puedes restablecer cada propiedad individualmente:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

O usar la abreviatura all con unset. all: unset restablece casi todas las propiedades (excepto unicode-bidi, direction y propiedades personalizadas): las propiedades heredadas revierten a heredar, las demás al valor inicial. Un <button> se convierte en display: inline y pierde su caja nativa, por lo que siempre debes restaurar el diseño y el foco después de deshacer.

button.reset {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

button.reset:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.15em;
}

[!TIP] Para restaurar la hoja de estilo del agente de usuario en lugar de una pizarra en blanco, usa all: revert; consulta Intención de reset: unset vs revert en la sección de CSS moderno.

Usa :not() para Aplicar/Quitar Bordes en Navegación

En lugar de poner el borde...

/* añadir borde */
.nav li {
  border-right: 1px solid #666;
}

...y luego quitarlo del último elemento...

/* quitar borde */
.nav li:last-child {
  border-right: none;
}

...usa la pseudoclase :not() para aplicarlo solo a los elementos que deseas:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Aquí, el selector CSS se lee como un humano lo describiría.

Demo

Verifica si una Fuente Está Instalada Localmente

Puedes verificar si una fuente está instalada localmente antes de obtenerla de forma remota, lo cual también es un buen consejo de rendimiento.

@font-face {
  font-family: "Dank Mono";
  src:
    /* Nombre completo */ local("Dank Mono"), /* Nombre Postscript */ local("Dank Mono"),
    /* ¡De lo contrario, descárgala! */ url("//...a.server/fonts/DankMono.woff");
}

code {
  font-family: "Dank Mono", system-ui-monospace;
}

Gracias a Adam Argyle por compartir este consejo y demo.

Añade line-height a body

No necesitas añadir line-height a cada <p>, <h*>, et al. por separado. En su lugar, añádelo a body:

body {
  line-height: 1.5;
}

De esta manera, los elementos textuales pueden heredarlo fácilmente de body.

Demo

Establece :focus para Elementos de Formulario

Los usuarios de teclado con visión dependen del foco para determinar dónde van los eventos del teclado en la página. Haz que el foco de los elementos del formulario sea destacado y consistente en comparación con la implementación predeterminada del navegador:

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: 0.05em;
}

Demo

[!TIP] En código moderno, prefiere :focus-visible para que los usuarios de teclado mantengan un anillo de foco claro sin mostrar estilos de foco en cada clic del ratón.

Centrar Verticalmente Cualquier Elemento

Prefiere Grid con una unidad de viewport dinámica en dispositivos móviles: 100vh se asigna al viewport grande y puede comportarse mal cuando las barras de herramientas del navegador se muestran/ocultan. Con propiedades lógicas, usa 100dvb (bloque dinámico de viewport).

.center-page {
  min-block-size: 100dvb;
  display: grid;
  place-items: center;
}

Flexbox funciona de la misma manera una vez que el padre tiene un tamaño de bloque definido:

html,
body {
  min-block-size: 100%;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
}

[!NOTE] Patrón heredado: height: 100vh + place-items: center todavía aparece en tutoriales antiguos. Prefiere dvh/dvb/svh/lvh para diseños de viewport completo en dispositivos móviles; consulta MDN sobre longitudes relativas al viewport.

[!TIP] ¿Quieres centrar otra cosa? CSS-Tricks tiene un buen artículo sobre cómo hacerlo.

Demo

Usa aspect-ratio en Lugar de Alto/Ancho

La propiedad aspect-ratio te permite dimensionar elementos fácilmente y mantener una relación ancho-alto constante. Esto es increíblemente útil en el diseño web responsivo para evitar el cambio de diseño. Usa object-fit junto con ella para evitar interrumpir el diseño si los valores de alto/ancho de las imágenes cambian.

img {
  aspect-ratio: 16 / 9; /* ancho / alto */
  object-fit: cover;
}

Aprende más sobre la propiedad aspect-ratio en este artículo de web.dev.

Demo

Listas Separadas por Comas

Haz que los elementos de la lista parezcan una lista real separada por comas:

ul > li:not(:last-child)::after {
  content: ",";
}

Usa la pseudoclase :not() y no se añadirá ninguna coma al último elemento.

[!NOTE] Este consejo puede no ser ideal para la accesibilidad, especialmente para lectores de pantalla. Además, copiar/pegar desde el navegador no funciona con contenido generado por CSS. Procede con precaución.

Seleccionar Elementos Usando nth-child Negativa

Usa nth-child negativa en CSS para seleccionar elementos del 1 al n.

li {
  display: none;
}

/* selecciona los elementos 1 al 3 y muéstralos */
li:nth-child(-n + 3) {
  display: block;
}

O, ya que has aprendido un poco sobre usar :not(), prueba:

/* selecciona todos los elementos excepto los 3 primeros y muéstralos */
li:not(:nth-child(-n + 3)) {
  display: block;
}

Demo

Usa SVG para Iconos

No hay razón para no usar SVG para iconos:

.logo {
  background: url("logo.svg");
}

SVG se escala bien para todo tipo de resoluciones y es compatible con todos los navegadores desde IE9. Abandona tus archivos .png, .jpg o .gif-jif-lo-que-sea.

[!NOTE] Si tienes botones de solo icono SVG para usuarios videntes y el SVG no se carga, esto ayudará a mantener la accesibilidad:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

Usa el Selector "Búho Trepanado"

Puede tener un nombre extraño, pero usar el selector universal (*) con el selector de hermano adyacente (+) puede proporcionar una potente capacidad CSS:

* + * {
  margin-top: 1.5em;
}

En este ejemplo, todos los elementos en el flujo del documento que siguen a otros elementos recibirán margin-top: 1.5em.

[!TIP] Para más información sobre el selector "búho trepanado", lee el artículo de Heydon Pickering en A List Apart.

Demo

Usa max-height para Sliders de Solo CSS

Implementa sliders de solo CSS usando max-height con overflow oculto:

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

El elemento se expande al valor de max-height al pasar el ratón y el slider se muestra como resultado del desbordamiento.

Celdas de Tabla de Igual Ancho

Las tablas pueden ser difíciles de manejar. Prueba usar table-layout: fixed para mantener las celdas con el mismo ancho:

.calendar {
  table-layout: fixed;
}

Diseños de tabla sin dolor.

Demo

Deshazte de los Hacks de Margen con Flexbox

Al trabajar con medianiles de columna, puedes deshacerte de los hacks con nth-, first- y last-child usando la propiedad space-between de flexbox:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Ahora los medianiles de columna siempre aparecen espaciados uniformemente.

Usa Selectores de Atributo con Enlaces Vacíos

Muestra enlaces cuando el elemento <a> no tiene valor de texto pero el atributo href tiene un enlace:

a[href^="http"]:empty::before {
  content: attr(href);
}

Eso es realmente conveniente.

Demo

[!NOTE] Este consejo puede no ser ideal para la accesibilidad, especialmente para lectores de pantalla. Además, copiar/pegar desde el navegador no funciona con contenido generado por CSS. Procede con precaución.

Controla Mejor la Especificidad con :is()

La pseudoclase :is() se usa para apuntar a múltiples selectores a la vez, reduciendo la redundancia y mejorando la legibilidad del código. Esto es increíblemente útil para escribir selectores grandes de forma más compacta.

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: green;
}

La regla anterior es equivalente a las siguientes reglas de selector numerado...

section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
aside h1,
aside h2,
aside h3,
aside h4,
aside h5,
aside h6,
nav h1,
nav h2,
nav h3,
nav h4,
nav h5,
nav h6 {
  color: green;
}

Demo

Estiliza Enlaces "Predeterminados"

Añade un estilo para enlaces "predeterminados":

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Ahora los enlaces insertados a través de un CMS, que normalmente no tienen un atributo class, tendrán una distinción sin afectar genéricamente la cascada.

Cajas de Relación Intrínseca (respaldo heredado)

[!NOTE] Solo heredado. Prefiere aspect-ratio (Baseline ampliamente disponible) para código nuevo. Mantén este hack de padding solo cuando debas soportar navegadores muy antiguos o necesites un patrón que preceda a aspect-ratio.

Para crear una caja con una relación intrínseca, aplica padding superior o inferior a un div:

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Usar 20% para el padding hace que la altura de la caja sea igual al 20% de su ancho. Sin importar el ancho del viewport, el div hijo mantendrá su relación de aspecto (100% / 20% = 5:1).

Demo

Estiliza Imágenes Rotas

Haz que las imágenes rotas sean más agradables estéticamente con un poco de CSS:

img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Ahora añade reglas de pseudoelementos para mostrar un mensaje de usuario y la referencia URL de la imagen rota:

img::before {
  content: "Lo sentimos, la imagen a continuación está rota :(";
  display: block;
  margin-bottom: 10px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

[!TIP] Aprende más sobre cómo estilizar este patrón en el artículo de Ire Aderinokun.

Usa rem para Tamaños Globales; Usa em para Tamaños Locales

Después de establecer el tamaño de fuente base en la raíz (html { font-size: 100%; }), establece el tamaño de fuente para los elementos textuales a em:

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Luego establece el tamaño de fuente para los módulos a rem:

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: 0.9rem;
}

Ahora cada módulo se vuelve compartimentado y más fácil de estilizar, más mantenible y flexible.

Oculta Videos con Reproducción Automática que No Estén Silenciados

Este es un gran truco para una hoja de estilo de usuario personalizada. Evita sobrecargar a un usuario con sonido de un video que se reproduce automáticamente cuando se carga la página. Si el sonido no está silenciado, no muestres el video:

video[autoplay]:not([muted]) {
  display: none;
}

Una vez más, estamos aprovechando el uso de la pseudoclase :not().

Usa :root para Tipografía Flexible

El tamaño de fuente tipográfico en un diseño responsivo debe poder ajustarse con cada viewport. Puedes calcular el tamaño de fuente basado en la altura y el ancho del viewport usando :root:

:root {
  font-size: calc(1vw + 1vh + 0.5vmin);
}

Ahora puedes utilizar la unidad root em basada en el valor calculado por :root:

body {
  font: 1rem/1.6 sans-serif;
}

Demo

Establece font-size en Elementos de Formulario para una Mejor Experiencia Móvil

Para evitar que los navegadores móviles hagan zoom en los elementos del formulario cuando se seleccionan, añade font-size:

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

Prefiere :focus-visible en Lugar de :focus

:focus-visible aplica un anillo de foco solo cuando el navegador determina que es necesario (por ejemplo, navegación por teclado), evitando anillos de foco en clics del ratón:

button:focus-visible {
  outline: 2px solid blue;
}

Usa Propiedades Lógicas para Soporte Multidireccional

Las propiedades lógicas (por ejemplo, margin-inline-start en lugar de margin-left) respetan automáticamente la dirección del texto y el modo de escritura. Esto es esencial para diseños internacionales:

.card {
  margin-inline: auto;
  padding-block: 1rem;
  border-inline-start: 4px solid hotpink;
}

Intención de Reset: unset vs revert

• unset: restablece una propiedad a su valor heredado (si es heredable) o a su valor inicial (si no lo es).
• revert: restablece una propiedad al valor que tendría en la hoja de estilo del agente de usuario (navegador).

Usa all: revert si deseas eliminar tus estilos personalizados pero conservar el estilo nativo del navegador.