Pico CSS – un framework CSS minimalista para HTML semántico

• Pico CSS aplica estilos directamente a las etiquetas HTML, minimizando el uso de clases
• Ofrece una experiencia de UI limpia usando solo CSS puro, sin bibliotecas externas ni JavaScript
• Soporta automáticamente pantallas responsivas en móviles y todo tipo de dispositivos
• Aplica automáticamente el modo claro/oscuro según la configuración del entorno del usuario
• Permite una personalización flexible con más de 130 variables CSS, varios temas personalizados y componentes

---

Introducción

Pico CSS es un framework CSS minimalista que maximiza la simplicidad y la semántica. Aplica estilos directamente a los elementos semánticos de HTML y reduce el uso total de clases a menos de 10, ofreciendo código fácil de leer y mantener. También ofrece una versión sin clases, ideal para quienes prefieren un enfoque purista de HTML.

Características principales

Class-light & Semantic

• Aplica estilos directamente a las etiquetas HTML, reduciendo de forma considerable la cantidad de clases CSS necesarias
• También soporta una versión sin clases (class-less), dando más libertad frente a un estilo basado en clases para cada elemento

Just CSS, No Dependencies

• Funciona sin bibliotecas externas, gestores de paquetes ni JavaScript
• Permite lograr estilos elegantes fácilmente solo con marcado HTML

Diseño responsivo

• Ajusta automáticamente el tamaño de fuente y los espacios según el tamaño de la pantalla, ofreciendo una experiencia de UI consistente y pulida en todos los dispositivos
• Se adapta automáticamente sin necesidad de clases adicionales ni configuración extra

Cambio automático entre modo claro y oscuro

• Incluye por defecto un tema claro y un tema oscuro
• Aplica automáticamente el tema de color según la configuración prefers-color-scheme del navegador o del sistema operativo
• Está implementado únicamente con CSS, sin usar JavaScript

Personalización sencilla

• Incluye más de 130 variables CSS para personalizar estilos de manera simple
• También soporta personalización avanzada usando SASS
• Ofrece 20 temas de color hechos a mano y más de 30 componentes modulares, lo que facilita extender la UI según cada marca

Rendimiento optimizado

• Mantiene el HTML ligero y conciso, reduciendo la sobrecarga de código innecesaria y el uso de memoria
• Ofrece tiempos de carga rápidos sin duplicación excesiva de CSS ni carga de JS

Conclusión

Pico CSS ofrece estilos de UI semánticos, responsivos y fáciles de personalizar sin dependencias innecesarias. Es ideal para entornos de desarrollo ágiles y una opción de framework eficiente para startups de TI y desarrolladores.

[joyfui]

Esto lo había visto hace tiempo, pero cambió mucho desde entonces.

[GN⁺]

Opiniones de Hacker News

• Quiero recomendar este sitio, cssbed.com, donde puedes cambiar y previsualizar fácilmente temas CSS sin clases

  • Me gusta este recurso, pero le falta un tema importante: github-markdown-css. Como hoy en día la mayoría de los desarrolladores leen con frecuencia Markdown de GitHub, me parece una buena opción como punto de partida para un sistema CSS. github-markdown-css
  • Tufte se siente realmente elegante
  • Si quieres más variedad de temas, también recomiendo dropin-minimal-css. Ahí también está incluido github-markdown-css, mencionado en el comentario de arriba

• Me encanta Pico. Lo uso como punto de partida por defecto en casi todos mis side projects. A veces también uso Neat, que es más pequeño y ligero (neat.joeldare.com)

  • Vaya, ese es mi proyecto. Gracias por mencionarlo. Yo también lo uso para casi todo. Ahora planeo tomar algunas ideas de Pico, pero manteniendo a Neat bien pequeño

• Uso Tailwind CSS principalmente en proyectos grandes, pero para casos más pequeños e independientes, Pico CSS encaja perfecto. La página de escenarios de uso de Pico CSS resume muy bien su propuesta. Yo también descubrí Pico CSS apenas la semana pasada, y resultó ser la opción ideal para un pequeño tema de Hugo (govanity, para ofrecer vanity URL de módulos/paquetes de Go: hugo-theme-govanity). Encontré Pico, leí la documentación y lo integré todo en dos horas. Otro punto que a veces se pasa por alto es el uso de variables CSS (css-variables) y colores (colors)

  • Ya actualicé la url

• Me encanta, de verdad de verdad, Pico. Es un excelente punto de partida y se puede personalizar fácilmente en muchas direcciones. Se siente como lo opuesto a Tailwind

• Estoy usando Pico en un proyecto nuevo junto con generación de código por LLM. Como los LLM tienden por defecto a producir Tailwind o estilos enterprise complejos, un buen tip es darles toda la documentación de Pico como contexto y guiarlos con prompts específicos (como CLAUDE.md) para que usen solo Pico

  • Me da curiosidad si usaste algún método especial para meter toda la documentación de Pico en el contexto. Vi que la documentación oficial está repartida en varias páginas, así que me pregunto si copiaste cada una para armar un documento de prompt grande. También busqué si existía una descarga de la documentación en formato de una sola página, pero no encontré nada

• Estoy usando picocss en mi sitio personal (g5t.de). Hace poco me cambié a plain html, y con vanilla js muy simple también puedes crear de inmediato un header y footer compartidos para todas las páginas. Igual necesitas el markup, así que pensé: ¿para qué escribirlo aparte? Mejor escribirlo directamente en html. Además, picocss ya trae modo oscuro por defecto, y eso me gusta más en lo personal

• Los botones y campos de formulario son demasiado grandes en comparación con los elementos clásicos de UI de escritorio

  • Sí. Tengo que reducir el zoom del navegador al 75% para que el texto se vea más o menos natural. Pero los widgets siguen viéndose grandes y raros. Me hace pensar si no habrá sido diseñado pensando solo en móvil

• Así es como se debería escribir CSS. No entiendo por qué en los materiales de aprendizaje siempre hay que repetir hasta el significado del elemento dentro del nombre de la clase

  • Siento que toda una generación se desvió por culpa del elemento div. Como tiene poca semántica y se usa en exceso, da la impresión de que en general se ha debilitado la confianza en la estructura semántica

• Totalmente de acuerdo. La desventaja es que solo usa unidades en píxeles, y no unidades físicas + relativas (pt/mm + em/ex/rem, etc.). Aun así, está muchísimo mejor que tailwind o bootstrap

• Soy súper fan de Pico… justo lanzamos el nuevo sitio oficial de raku.org usando Pico

  • ¡Felicidades por la renovación de raku.org! La combinación de HTMX/PicoCSS con Cro me parece especialmente interesante