Matcha.css: biblioteca de estilos semánticos drop-in implementada en CSS puro

 (matcha.mizu.sh)
4 puntos por GN⁺ 2024-05-25 | 1 comentarios | Compartir por WhatsApp
  • matcha.css da estilo a elementos HTML de inmediato, como una hoja de estilos predeterminada del navegador, y reduce el trabajo manual de CSS en prototipado rápido, HTML estático y documentos generados desde Markdown
  • Se aplica con una sola línea de ``, sin etapa de build, dependencias, JavaScript ni configuración; su tamaño gzip predeterminado es de aproximadamente 8.81 kB
  • Usa la estructura del documento y elementos semánticos para manejar solo con CSS comportamientos como submenús con ``, indicador * en campos obligatorios y colores de borde según el estado de validación de las entradas
  • Ofrece presets Default, Lite, Utility classes e Istanbul coverage, además de un custom builder; también permite cargar directamente directorios de estilos específicos
  • Es open source con licencia MIT; las clases utilitarias y funciones de layout son convenientes, pero al agregar clases al documento pueden alejarse del uso basado en semántica

CSS drop-in para dar estilo inmediato a documentos HTML

  • matcha.css es una biblioteca drop-in que da estilo a elementos HTML con CSS puro
  • Se enfoca en hacer que los elementos HTML se vean bien, de forma similar a la hoja de estilos predeterminada del navegador, sin que el usuario tenga que parchear el documento manualmente
  • Es adecuada para prototipado rápido, páginas HTML estáticas, documentos generados desde Markdown y desarrolladores que quieren aprovechar todo el rango de elementos HTML sin profundizar en los detalles de CSS
  • Esta misma página también está estilizada con matcha.css

Se adopta con una sola línea y se puede revertir fácilmente

  • Puede usarse sin etapa de build, dependencias, JavaScript, configuración ni refactorización del documento
  • El tamaño del build predeterminado en gzip es ~8.81 kB
  • Se aplica agregando la siguiente línea al `` del documento
  • Para quitarlo, basta con eliminar ese ``; está diseñado para no requerir refactorización ni limpieza del documento
  • Los assets están alojados en Vercel y también están disponibles en JSdelivr, un servicio CDN que distribuye paquetes npm
  • Todas las versiones públicas se ofrecen en el directorio /v/ y, de forma predeterminada, se sirve la rama main

Estilos que aprovechan la estructura semántica

  • matcha.css ajusta los estilos en función de la estructura del documento y la jerarquía de elementos

  • Ejemplos de comportamiento automático

    • Al anidar elementos `` crea submenús implícitos
    • Cuando se usa junto con, agrega automáticamente el indicador * de campo obligatorio
    • [data-color-scheme="light"] fuerza el modo claro, y [data-color-scheme="dark"] fuerza el modo oscuro
    • [data-color-scheme] puede aplicarse a elementos específicos para forzar selectivamente el esquema de color
    • :root configura variables CSS, y @media (prefers-color-scheme) establece el modo según las preferencias del usuario
    • No usa reglas !important, por lo que es fácil sobrescribir estilos cuando hace falta

Opciones de build y distribución

  • Además del build predeterminado, ofrece builds preset según el propósito
    • Default ~8.81 kB: todo el estilo semántico y funciones adicionales, excepto @istanbul-coverage
    • Lite ~5.59 kB: todo el estilo semántico, @break-words, @discrete-scrollbars
    • Utility classes ~3.43 kB: @root, @utilities
    • Istanbul coverage ~1.94 kB: @root, @syntax-highlighting, @istanbul-coverage
  • Para elegir solo las funciones necesarias se puede usar el custom builder
  • Para una personalización más compleja, también es posible hacer un fork y aplicar parches directamente
  • Cada subdirectorio de github.com/lowlighter/matcha/styles se sirve directamente desde el sitio web
    • Por ejemplo, si solo se quiere usar @syntax-highlighting, se puede incluir directamente su mod.css
    • Si no se proporcionan variables CSS propias, es muy probable que se necesite el paquete @root
    • Todos los archivos mod.css también se ofrecen como alias del directorio padre para mayor comodidad

Alcance de los elementos HTML estilizados

  • Estructura del documento

    • Da estilo a section, article, header, footer, aside, nav, menu, hgroup, elementos de título y otros
    • `` está diseñado para integrarse de forma natural cuando el contenedor padre tiene display: flex
    • dentro de se muestra como breadcrumb, y `` se muestra como lista de navegación

  • Texto y elementos inline

    • Proporciona estilos para , , , , , , , , , , , , , , , , , , `` y otros
    • Como no se puede dar estilo a los tooltips predeterminados del navegador, para tooltips CSS se recomienda usar el atributo [data-title] en lugar de [title]

  • Elementos de formulario

    • Da estilo a , , , , , , , y ``
    • Los elementos de entrada no realizan validaciones adicionales más allá de las que ejecuta el navegador
    • :user-valid aplica un borde --success, y :user-invalid aplica un borde --danger
    • Con el patrón se puede detectar automáticamente si es required, pero con el patrón no es posible

  • Tablas y medios

    • `` aplica border collapse y usa overflow automático si el padre tiene ancho
    • Puede envolverse en un contenedor .table-responsive
    • A , y `` se les aplica estilo de esquinas redondeadas

  • y

    • y también son objetivos de estilo predeterminados
    • El ::backdrop de `` se muestra al usar dialog.showModal()
    • Para que el navegador cierre el dialog al enviar, sin JavaScript, se recomienda usar ``

Conveniencia y costo de las funciones de layout

  • matcha.css también ofrece opciones de layout para documentos
  • Al agregar la clase .layout-simple a un elemento, se activa un layout simple
  • La estructura requerida incluye .layout-simple, header:first-of-type, main:only-of-type, aside, nav, footer:last-of-type, entre otros
  • La estructura cambia según las condiciones de medios
    • En pantallas básicas se organiza alrededor de header y main
    • Con min-width: 960px, se compone con aside y main
    • Con min-width: 1280px, usa una composición de dos aside y main
  • En pantallas pequeñas, aside:nth-of-type(1) se oculta, y puede volver a mostrarse con data-expand o hacerse plegable con data-expandable
  • Usar el layout puede requerir refactorizar el documento y, si más adelante se deja de usar matcha.css, puede requerir otra refactorización

Las clases utilitarias son más bien funciones auxiliares

  • matcha.css también ofrece algunas clases utilitarias por conveniencia
  • Las clases relacionadas con colores son las siguientes
    • .default, .muted, .accent, .active, .variant, .success, .attention, .severe, .danger
    • bd-* cambia el color del borde, bg-* el color de fondo y fg-* el estilo de primer plano
  • .flash crea un bloque llamativo y puede combinarse con clases de color
  • Ofrece utilidades relacionadas con texto, tamaño, posición, display, flex, overflow, cursor, selection, pointer-events, sizing, resize, shadow y fill/stroke de SVG
  • Los márgenes y paddings usan clases numeradas basadas en los valores 0, .125, .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 3, 4
  • Como las clases utilitarias requieren agregar clases al documento, pueden dificultar salir de matcha.css más adelante
  • Si las utilidades ofrecidas son insuficientes o limitadas, conviene considerar el uso de un framework CSS utility-first o migrar a uno
  • matcha.css no pretende convertirse en un framework CSS completo

Visualización de código, aspecto de editor y Shadow DOM

  • matcha.css ofrece clases de resaltado de sintaxis que siguen @media (prefers-color-scheme)
  • También incluye clases para crear una apariencia de editor de código
    • La estructura requerida es .editor, > textarea, > div.highlight
    • Este estilo adicional no realiza resaltado de sintaxis real, solo estiliza la apariencia de un editor de código
    • Para el resaltado real se necesita una biblioteca de resaltado de sintaxis como highlight.js
  • matcha.css también define variables CSS usando la pseudoclase :host, por lo que es compatible con Shadow DOM
  • Dentro de Shadow DOM se puede volver a importar matcha.css y aplicar custom styles separados, manteniéndolos aislados para que no entren en conflicto con el resto del documento

Compatibilidad con navegadores y licencia

  • matcha.css indica que está hecho para ser compatible con todos los navegadores modernos
  • La tabla de soporte incluye Chrome 92%, Edge 96%, Safari 94%, Firefox 95%, Opera 95%, Android Chrome 96%, iOS Safari 93%, Samsung Internet 96%, entre otros
  • Es open source y usa la MIT License
  • El repositorio está en github.com/lowlighter/matcha

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-05-25
Opiniones de Hacker News

  • Me gusta la idea de revivir HTML como la única fuente de verdad para el layout de documentos, y parece que podría ser productivo para documentos que no necesitan un diseño complejo.
    Aun así, las elecciones de diseño por defecto, especialmente los colores y los acabados, dejan algo que desear. No soy diseñador profesional, pero he recibido suficientes quejas de usuarios sobre software que hice como para detectar cuando algo se siente raro en comparación con lo que haría un buen diseñador con conocimientos de teoría del color, densidad de información y degradados.
    Si el autor está leyendo esto, me pregunto si ha considerado aprovechar la estética de otros proyectos FOSS como Bulma o Tailwind, o colaborar con un diseñador profesional. Tengo entendido que jgthms también anda por este sitio de vez en cuando.

    • Gracias por el feedback constructivo; de hecho me tomó un poco por sorpresa que esto llegara a HN antes de que yo publicara un Show HN.
      No soy desarrollador frontend ni diseñador, así que puede notarse mi falta de conocimiento sobre teoría del color, accesibilidad y elementos que a otros les pueden parecer obvios. Por eso creo que también tiene una sensación algo artesanal.
      Voy a investigar más sobre los puntos que mencionas. En cuanto a colaborar con un diseñador profesional, estoy abierto a recibir consejos, pero como es un proyecto paralelo no planeo contratar a nadie. Por ahora no creo que los profesionales sean el público principal; me parece que atraerá más a usuarios aficionados.
    • Yo también siento que hay algo raro, aunque también me ha pasado con cosas hechas por diseñadores. Aun así se ve bastante bien, como si lo hubiera hecho alguien con cierto sentido del diseño o un diseñador junior.
      Cuanto más lo miro, mejor se ve en conjunto, pero al mismo tiempo también se intensifica esa ligera sensación rara, lo cual es bastante curioso.
      Edición: probablemente el color de la taza de té es lo que se siente un poco extraño. Me gusta el logo en general, pero quizá cambiaría el color de la taza para que sea más cercano al color del fondo superior.
    • Estoy de acuerdo. Un ejemplo de algo que se siente raro es el estilo hover de los botones.
      Texto negro sobre un fondo oscuro no funciona bien ni estética ni accesiblemente. Si los valores por defecto estuvieran más pulidos, sería la cereza del pastel.
    • El sitio tiene una sección donde puedes crear un build personalizado directamente, así que puedes controlar hasta cierto punto las opciones del estilo por defecto.
      Dicho eso, si eres un diseñador que intenta ajustarlo al look de diseño de una empresa, podrías pasar horas en cosas como el espaciado, y esta herramienta no parece estar pensada para ese tipo de personas.

  • Me gustan estas bibliotecas pequeñas. Ahora uso pico.css, pero voy a revisar esta también. Creo que los elementos DOM estándar del navegador deberían verse así de entrada.
    Pero en la práctica no es así, por eso existen estas bibliotecas. Al ver el comentario de otro usuario, busqué qué significa “classless” en esta biblioteca y encontré una lista de bibliotecas similares.
    https://github.com/dbohdan/classless-css

    • Estoy de acuerdo con que “los elementos DOM estándar del navegador deberían verse así de entrada”, pero para quienes quieren crear sus propios estilos podría ser una pesadilla. Incluso los estilos por defecto actuales ya son un poco molestos en ese sentido.
      Desde hace mucho pienso que sería bueno tener una forma de alternar entre estilos de chrome y estilos de contenido. Barras de navegación, visualizaciones incrustadas y elementos interactivos podrían quedar en un modo chrome con estilos mínimos por defecto, mientras que el cuerpo del texto recibiría los estilos preferidos por el usuario.
    • También hay un sitio donde se pueden probar estas cosas directamente. El que conozco es https://www.cssbed.com/
    • Me gusta mucho pico.css. Es un punto medio rápido y fácil de aprender, pero con bastantes funcionalidades.
      La combinación Flask + HTMX + AlpineJS + PicoCSS es actualmente mi “All Python and HTML SPA”.

  • Se ve interesante, pero quitar el subrayado de los enlaces y depender solo del color antes del hover es muy malo desde el punto de vista de la accesibilidad.

    • Las personas con daltonismo pueden agregar una extensión CSS que subraye o destaque los enlaces.
      Las personas con discapacidad visual usan lectores de pantalla o pantallas braille, así que no necesitan subrayado. Entonces, ¿quién más necesita subrayados?

  • Se ve prometedor. He usado Simple.css: https://simplecss.org/
    A primera vista, matcha.css parece un poco más avanzado, así que pienso probarlo.

  • Quizá haga falta una herramienta para generar este tipo de frameworks CSS sin clases. Así cada quien podría ajustar finamente la paleta de colores, el padding, los tamaños de fuente, etc.

  • Durante 30 años usamos barras de desplazamiento proporcionales como controles estándar. Podíamos saber qué parte del documento estaba mostrando la ventana actual y hacer clic en la barra para movernos fácilmente a una posición proporcional al tamaño del documento.
    También podíamos usar los botones de flecha arriba y abajo de la barra, movernos a ella con Tab y operarla con el teclado. Si había limitaciones visuales o motrices, se podía aumentar el contraste o agrandarla desde la configuración del sistema operativo.
    Pero en la web de 2024, la gente rompe rutinariamente las barras de desplazamiento y las convierte en una pesadilla de experiencia de usuario. Es una vergüenza cómo la UI/UX del navegador se degradó al permitir que CSS arruine por completo controles estándar provistos por el sistema operativo que ya funcionaban bien.
    Por favor, no usen esto.

    • Estoy totalmente en desacuerdo.
      Los controles estándar provistos por el sistema operativo también han empeorado con el tiempo. Por ejemplo, las barras de desplazamiento que desaparecen de Apple y sus checkboxes redondeados.
      Esas cosas no se pueden cambiar fácilmente, pero con CSS al menos se pueden mejorar esos controles estándar.

  • Me gusta la función de vista previa que permite ver cómo se vería en otros sitios web. Es muy intuitiva y encaja muy bien en una página de CSS.

  • No puede faltar el repositorio Spark Joy de Swyx:
    https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...

  • ¿Por qué se siguen creando nuevos frameworks CSS? ¿Por qué esto no es ya un problema resuelto?

    • Esto no es un framework CSS, sino una hoja de estilos que usas cuando no quieres preocuparte por CSS o styling, pero quieres hacer un sitio que se vea decente.
    • Gran parte de CSS tiene que ver con arte y estética. El trabajo en CSS nunca va a “terminar”.
      Mientras los artistas quieran expresarse en el medio que es la web, seguirán apareciendo nuevas hojas de estilos y “frameworks”.