Cómo crear un sitio decente con el mínimo de CSS (2023)

(thecascade.dev)

6 puntos por GN⁺ 2025-10-07 | 1 comentarios | Compartir por WhatsApp

Muchos desarrolladores sufren problemas innecesarios por el exceso en el diseño de CSS
Con solo unos estilos globales mínimos, es posible crear páginas suficientemente limpias y responsivas
Limitar el tamaño y mostrar como bloque los elementos imagen, SVG y video puede resolver problemas básicos de layout
Usar la fuente system-ui, un interlineado adecuado y un límite en el ancho máximo de los párrafos puede mejorar la legibilidad
Para reflejar preferencias del entorno como el modo oscuro del sistema operativo, es necesario aplicar la propiedad color-scheme

Cómo crear un sitio decente con el mínimo de CSS

El problema del exceso de CSS y el enfoque propuesto

Muchas personas, al crear un sitio web, complican en exceso el diseño de CSS
Incluso con un CSS mínimo, es posible crear una página responsiva, suficientemente pulida y fiel a lo esencial

HTML básico y manejo de imágenes

Incluso escribiendo solo HTML básico, un sitio ya ofrece una respuesta adaptable básica
Como las imágenes pueden causar problemas de overflow en el layout, se aplica el siguiente CSS
```
img {
  max-width: 100%;
  display: block;
}
```
Si aparecen problemas similares con elementos SVG y video, se puede ampliar así
```
img,
svg,
video {
  max-width: 100%;
  display: block;
}
```

Mejora de la tipografía

La fuente predeterminada del navegador puede sentirse poco atractiva en términos de diseño
Usar system-ui como familia tipográfica permite aplicar la tipografía base adecuada para cada plataforma
Como el tamaño de fuente y el interlineado predeterminados tienden a ser un poco pequeños, se recomienda configurarlo así
```
body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}
```
Solo con esta configuración ya se puede lograr una gran mejora frente a los valores predeterminados del navegador

Soporte para modo oscuro

Como muchos usuarios prefieren el modo oscuro, resulta útil aplicar la propiedad color-scheme para seguir la configuración del sistema operativo
```
html {
  color-scheme: light dark;
}
```
Esta propiedad hace que los estilos del user agent reflejen automáticamente el tema preferido del sistema
También puede definirse como atributo en la etiqueta HTML
```
<html lang="en" color-scheme="light dark"></html>
```
Más allá de la preferencia del sistema, también es una buena best practice permitir que el usuario elija directamente el esquema de color

Limitación del ancho del contenido

La longitud de los párrafos de contenido es un factor importante que influye mucho en la legibilidad
En general, lo ideal es configurar el texto principal para que se muestre en líneas de 45 a 90 caracteres
Como se muestra a continuación, limitar el ancho máximo del elemento main permite mejorar la legibilidad de los párrafos
```
main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}
```
La función min() elige el valor más pequeño entre 70ch y 100% - 4rem
margin-inline: auto permite centrarlo horizontalmente
Según sea necesario, en lugar de main también se puede usar una clase .container o .wrapper

Ejemplo final de CSS mínimo

Si se reúne todo lo anterior, es posible construir un sitio estable con un conjunto mínimo de CSS como este

html {
  color-scheme: light dark;
}

body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

Cierre y escalabilidad

El ejemplo anterior puede usarse de inmediato como punto de partida liviano o para páginas pequeñas
En la mayoría de los casos, lo más conveniente es expandirlo agregando estilos adicionales sobre esta base

1 comentarios

GN⁺ 2025-10-07

Opiniones en Hacker News

Es un artículo viejo, pero resume por qué en algunas regiones todavía no se recomienda usar la familia tipográfica system-ui
https://infinnie.github.io/blog/2017/systemui.html
- El contenido del artículo me pareció interesante, pero la ligadura st de la fuente me parece tan fea que no quiero recibir consejos tipográficos de ese sitio web
La verdad no lo entiendo muy bien. Entiendo que quieren hacer una página minimalista y fácil de leer. ¿Pero no se supone que los métodos necesarios para eso ya son bastante conocidos? Me pregunto quién es el usuario objetivo que realmente batalla con esto. También me cuesta entender por qué esto es popular en HN
- Yo. Soy principalmente desarrollador backend, y a veces hago frontend para proyectos personales, pero casi no sé CSS. Para mí, estos métodos no son "conocidos". Cada vez se me hace difícil precisamente porque no sé CSS
- ¿Personas que batallan con una sola propiedad max-width? El público objetivo es cualquiera que esté haciendo una página personal

font-family: System UI;

Eso está mal. La sintaxis correcta es

font-family: system-ui;

El autor del artículo lo escribió bien en algunos ejemplos, pero en el primero está mal y eso puede causar confusión

Me pregunto si los nombres de fuentes de dos palabras deben ir entre comillas dobles. Por ejemplo

font-family: Times New Roman;

así. Como tanto times como Times New Roman funcionan bien sin comillas, no sé si es una excepción por ser una fuente antigua o si CSS hace una coincidencia de nombres bastante flexible

https://meyerweb.com/eric/tools/css/reset/
A esto nada más le quiero llamar dinero fácil
- Eric Meyer es una leyenda en el mundo de CSS. En 2002 no entendía el box model, y gracias a su explicación por fin lo entendí
  https://meyerweb.com/eric/books/
- Lo he visto seguido, pero por alguna razón me da una sensación rara que no termina de cuadrarme. No es lo suficientemente simple, ni moderno/minimalista. Además, el texto tampoco se me hace muy legible. Igual solo es cosa de mi gusto
- Las hojas de estilo de reset CSS son el punto de partida de la contaminación de estilos. El enfoque de Kevin Powell, que respeta los estilos predeterminados del navegador, es mejor. Sí hace falta probar en varios navegadores, pero llevamos casi 20 años tratando el reset CSS como si fuera obligatorio y encima apilándole frameworks, lo que solo aumenta la complejidad. Ahora, con CSS Grid moderno, variables y demás, ya podemos salirnos de esas prácticas viejas y trabajar de forma mucho más creativa. Antes odiaba CSS por todos los trucos y parches que había que hacer, pero ahora se siente como armar Lego que encaja perfecto. El reset CSS ya no es algo indispensable, sino una herramienta de apoyo para quitarse el miedo. Los preprocesadores CSS tampoco hacen tanta falta ya
Es una pregunta pidiendo recomendaciones de SSG (static site generator) para un sitio académico minimalista y simple. Las opciones eran Astro o Hugo, pero Astro se sintió demasiado complejo, y escribir html/css directamente resulta incómodo para el layout y la personalización. Además, casi no hay temas de Astro para blogs personales; la mayoría son corporativos o muy recargados. Al pensar en todo esto, vuelve a sorprenderme lo difícil que se ha vuelto diseñar un sitio web. Me pregunto cómo los desarrolladores web logran seguirle el paso a esta corriente de frameworks, componentes e innumerables dependencias
- Recomiendo Eleventy(https://11ty.dev/) o Zola(https://getzola.org/). Ambas son herramientas relativamente recientes y tienen bastantes usuarios muy capaces
- Es la complejidad natural de los sistemas web. La simplicidad no puede mantenerse. Aun así, agradezco los estándares abiertos y los frameworks que se pueden usar sin licencias. Hay tantas opciones que termina dándote parálisis por análisis
- Este tipo de discusión más bien oculta lo vergonzoso de la web moderna. Fuera de servicios web grandes como Facebook, casi no hay nada valioso, y eso da pena
- Tal vez no hacen falta más opciones, pero franklin.jl me resultó perfecto en matemáticas, manejo de código inline y limpieza
Este mismo sitio web usa muchísimo más CSS de lo que propone el artículo. Fácilmente más de 300 líneas. Aun así, sirve como una buena base
- Gracias por revisar eso en móvil. Ese dato reduce mi confianza en ese medio. Luego lo voy a verificar por mi cuenta. Aun así, espero que al menos hayan aplicado bien las técnicas que presentan
Al ver la propuesta de "limitar el ancho del contenido para mejorar la legibilidad", ojalá no hicieran eso. Sin importar lo que digan los estudios de usabilidad, a mí me gusta el ancho amplio. El ancho del contenido ya se puede controlar redimensionando el navegador
- Si redimensionas el navegador, en realidad reduces toda la ventana, así que termina siendo todavía más incómodo. Por ejemplo, si quieres mover al centro un texto de 80 columnas pegado al extremo izquierdo, tienes que seguir ajustando el tamaño del navegador, y eso es bastante fastidioso. A veces me resulta tan molesto que termino sobrescribiendo yo mismo la hoja de estilos del sitio. En ocasiones hasta siento que sería mejor ver texto plano. O simplemente cambio al reader mode para leer
- Casi toda la gente que conozco, sea de tecnología o no, siempre tiene montones de pestañas abiertas. La probabilidad de que todas esas pestañas consistan en una sola línea de texto es 0%. A veces siento que sería más práctico imprimirlo en una impresora de matriz de puntos y leerlo así, aunque lo digo medio en broma
- Para contenido en prosa, se prefiere limitar el ancho. En pantallas anchas cansa mucho estar moviendo los ojos de un extremo al otro para leer
- El hecho de que este comentario haya sido el más votado demuestra que no hay que tomarse demasiado en serio los consejos de HN
- Limitar el ancho del contenido en sí está bien. Lo que me molesta es el abuso de content-width, fuentes grandes y line-height amplio. Muchos sitios hoy usan fuentes demasiado grandes y mucho espacio entre líneas, así que acabas haciendo demasiado scroll. El tamaño de fuente predeterminado del navegador ya está bien ajustado al sistema, así que es mejor dejarlo como está y confiar en el zoom
Ni siquiera hace falta leer el artículo para saber la respuesta. La respuesta correcta es 0
- Los estilos predeterminados, sobre todo en cómo tratan las imágenes, son muy incómodos en móvil. Si lo que quieres es algo "bastante agradable de ver", como dice el artículo, no me parece que lograrlo con los valores por defecto sea precisamente fácil
- El valor predeterminado del navegador es serif
Incluso con CSS reset sigue haciendo falta cierto alineamiento básico. Si solo apuntas a navegadores de los últimos 5 años, basta con usar un reset popular, breve y bien pulido
- El punto clave no es unificar estilos, sino tener una base fácil de leer. Aunque se vea distinto entre plataformas o navegadores, con que sea legible basta. Es más práctico enfocarse en la usabilidad básica que en una perfección estética
- El reset está sobrevalorado. En algo minimalista como un blog personal, que el estilo varíe un poco entre plataformas no es un gran problema. Eso viene más bien de un impulso de diseñador que quiere empatarlo todo de forma obsesiva

img { max-width: 100%; }
Esta configuración debe usarse siempre junto con height: auto. Si no, la proporción de la imagen se rompe
img, svg, video { max-width: 100%; }
En Chrome 141, por un problema con width/height en elementos SVG anidados, el cálculo de auto sale mal. Por ahora hay que manejarlo con
svg:where(:not(svg svg))
La fuente system-ui no es simplemente un reemplazo de sans-serif. Si usas la fuente de UI del sistema para el cuerpo del contenido, en algunas combinaciones de sistema operativo e idioma puede volverse casi ilegible. Si necesitas sans-serif, lo correcto es usar sans-serif
El tamaño de fuente predeterminado es un poco pequeño, así que unos 18~20px (1.25rem) se sienten adecuados. Pero en pantallas pequeñas es mejor no pasar de 1rem
Se suele recomendar un line-height base de 1.5~1.7, pero 1.7 es demasiado amplio en pantallas pequeñas. Lo adecuado es 1.4~1.5, y según el tamaño de pantalla se puede ajustar entre 1.4~1.6
font-family: System UI;
Esto es un error de sintaxis clarísimo. Basta revisar la hoja de estilos para verlo enseguida
Separar el tema oscuro/claro del sistema del tema de la web es una buena idea. Firefox hace que el contenido siga el tema del sistema por defecto, y también permite ajustarlo aparte
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
Eso implica un margen mínimo de unos 2rem (o 2rem+8px si sumas el margin predeterminado de body). Es demasiado espacio, y además el lugar donde se aplica se siente raro. Si vas a aplicarlo a main, es más lógico usar padding, por ejemplo

main {
  max-width: 70ch;
  padding-inline: 2rem;
  margin-inline: auto;
}

Pero en la práctica también necesitas el mismo espacio lateral en header y footer, así que es mejor ajustar el margin de body

body {
  margin: 1rem;
}

main {
  max-width: 70ch;
  margin-inline: auto;
}

Así puedes reducir el espacio lateral de ~40px a algo cercano a 16px

En la práctica, la mayoría de los ajustes de layout y afinación fina se pueden resolver con media queries. En este caso, al final el código tampoco crece mucho en comparación con un CSS normal bien escrito

Cómo crear un sitio decente con el mínimo de CSS (2023)