Matcha.css – biblioteca de estilização semântica drop-in feita com CSS puro

 (matcha.mizu.sh)
4 pontos por GN⁺ 2024-05-25 | 1 comentários | Compartilhar no WhatsApp
  • matcha.css estiliza elementos HTML imediatamente, como uma folha de estilo padrão do navegador, reduzindo o trabalho manual com CSS em prototipagem rápida, HTML estático e documentação gerada a partir de Markdown
  • Pode ser aplicada com uma única linha link, sem etapa de build, dependências, JavaScript ou configuração, e o tamanho padrão em gzip é de cerca de 8.81kB
  • Aproveita a estrutura do documento e elementos semânticos para tratar apenas com CSS comportamentos como submenus em menu, marcação * de campos obrigatórios e cores de borda por estado de validação de entrada
  • Oferece presets Default, Lite, Utility classes, Istanbul coverage e um custom builder, além da possibilidade de importar diretamente diretórios de estilo específicos
  • É open source sob licença MIT, e embora classes utilitárias e recursos de layout sejam práticos, eles exigem adicionar classes ao documento, o que pode afastar o uso de uma abordagem baseada em semântica

CSS drop-in que estiliza documentos HTML imediatamente

  • matcha.css é uma biblioteca drop-in que estiliza elementos HTML com CSS puro
  • O foco é deixar os elementos HTML visualmente agradáveis, de forma parecida com a folha de estilo padrão do navegador, sem exigir que o usuário modifique manualmente o documento
  • É adequada para prototipagem rápida, páginas HTML estáticas, documentação gerada a partir de Markdown e para desenvolvedores que querem aproveitar toda a gama de elementos HTML sem mergulhar profundamente nos detalhes de CSS
  • Esta própria página também é estilizada com matcha.css

Pode ser adotada com uma linha e removida com facilidade

  • Pode ser usada sem etapa de build, dependências, JavaScript, configuração ou refatoração do documento
  • O tamanho do build padrão em gzip é ~8.81kB
  • Basta adicionar a linha abaixo em `` do documento
  • Para remover, também basta tirar esse ``; ela foi projetada para não exigir refatoração nem limpeza do documento
  • Os assets são hospedados na Vercel e também podem ser usados via JSdelivr, serviço de CDN que distribui o pacote npm
  • Todas as versões públicas estão disponíveis no diretório /v/, e por padrão o branch main é servido

Estilização baseada em estrutura semântica

  • matcha.css ajusta o estilo com base na estrutura do documento e na hierarquia dos elementos

  • Exemplos de comportamento automático

    • Aninhar elementos `` cria submenus implícitos
    • Quando é usado junto com, o marcador de campo obrigatório * é adicionado automaticamente
    • [data-color-scheme="light"] força o modo claro, e [data-color-scheme="dark"] força o modo escuro
    • [data-color-scheme] pode ser aplicado a elementos específicos para forçar seletivamente o esquema de cores
    • :root define variáveis CSS, e @media (prefers-color-scheme) define o modo de acordo com a preferência do usuário
    • Como não usa regras com !important, é fácil sobrescrever estilos quando necessário

Opções de build e distribuição

  • Além do build padrão, há builds em preset para diferentes objetivos
    • Default ~8.81kB: toda a estilização semântica e recursos adicionais, exceto @istanbul-coverage
    • Lite ~5.59kB: toda a estilização semântica, @break-words, @discrete-scrollbars
    • Utility classes ~3.43kB: @root, @utilities
    • Istanbul coverage ~1.94kB: @root, @syntax-highlighting, @istanbul-coverage
  • Para selecionar apenas os recursos necessários, é possível usar o custom builder
  • Para personalizações mais complexas, também é possível fazer um fork e aplicar patches diretamente
  • Cada subdiretório de github.com/lowlighter/matcha/styles é servido diretamente pelo site
    • Por exemplo, se quiser usar apenas @syntax-highlighting, é possível incluir diretamente o respectivo mod.css
    • Se ele não fornecer suas próprias variáveis CSS, é bem provável que o pacote @root seja necessário
    • Todos os arquivos mod.css também são oferecidos por aliases do diretório pai, por conveniência

Alcance dos elementos HTML estilizados

  • Estrutura do documento

    • Estiliza section, article, header, footer, aside, nav, menu, hgroup, elementos de título e outros
    • `` foi projetado para se integrar naturalmente quando o contêiner pai usa display: flex
    • dentro de é exibido como breadcrumb, e `` é exibido como lista de navegação

  • Texto e elementos inline

    • Fornece estilo para , , , , , , , , , , , , , , , , , , `` e outros
    • Como tooltips padrão do navegador não podem ser estilizados, recomenda usar o atributo [data-title] em vez de [title] para tooltips em CSS

  • Elementos de formulário

    • Estiliza , , , , , , , , ``
    • Os elementos de entrada não fazem validação adicional além da que o navegador já realiza
    • :user-valid aplica borda --success, e :user-invalid aplica borda --danger
    • Com o padrão , é possível detectar automaticamente se o campo é obrigatório, mas isso não é possível no padrão

  • Tabelas e mídia

    • `` aplica border collapse e usa overflow automático se o elemento pai tiver largura definida
    • Também pode ser envolvida em um contêiner .table-responsive
    • , , `` recebem estilo com cantos arredondados

  • e

    • e também fazem parte dos alvos de estilização padrão
    • O ::backdrop de `` é exibido quando se usa dialog.showModal()
    • Recomenda-se usar `` para que o navegador feche o dialog no envio sem JavaScript

Conveniência e custo dos recursos de layout

  • matcha.css também oferece opções de layout para o documento
  • Adicionar a classe .layout-simple a um elemento ativa um layout simples
  • A estrutura exigida inclui .layout-simple, header:first-of-type, main:only-of-type, aside, nav, footer:last-of-type e outros
  • A estrutura varia conforme as condições de mídia
    • Em telas padrão, a composição gira em torno de header e main
    • Em min-width: 960px, a composição passa a usar aside e main
    • Em min-width: 1280px, usa duas aside e main
  • Em telas pequenas, aside:nth-of-type(1) fica oculto, mas pode voltar a aparecer com data-expand ou se tornar recolhível com data-expandable
  • O uso de layout pode exigir refatoração do documento, e pode ser necessário refatorar novamente no futuro ao deixar de usar matcha.css

Classes utilitárias são mais um recurso auxiliar

  • matcha.css também oferece algumas classes utilitárias por conveniência
  • As classes relacionadas a cor são as seguintes
    • .default, .muted, .accent, .active, .variant, .success, .attention, .severe, .danger
    • bd-* altera a cor da borda, bg-* a cor de fundo e fg-* o estilo de primeiro plano
  • .flash cria um bloco que chama atenção e pode ser combinada com classes de cor
  • Há utilitários relacionados a texto, tamanho, posição, display, flex, overflow, cursor, selection, pointer-events, sizing, resize, shadow e fill/stroke de SVG
  • Margem e padding usam classes numéricas baseadas nos valores 0, .125, .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 3, 4
  • Como as classes utilitárias exigem adicionar classes ao documento, elas podem dificultar a saída de matcha.css no futuro
  • Se os utilitários oferecidos forem insuficientes ou limitados, pode valer considerar usar ou migrar para um framework CSS utility-first
  • O objetivo de matcha.css não é se tornar um framework CSS completo

Exibição de código, aparência de editor e Shadow DOM

  • matcha.css oferece classes de syntax highlighting que seguem @media (prefers-color-scheme)
  • Também inclui classes para criar aparência de editor de código
    • A estrutura exigida é .editor, > textarea, > div.highlight
    • Esses estilos adicionais não fazem syntax highlighting real, apenas estilizam a aparência de um editor
    • Para destaque real, é necessária uma biblioteca de syntax highlighting como highlight.js
  • matcha.css também define variáveis CSS com a pseudoclasse :host, então é compatível com Shadow DOM
  • Dentro de Shadow DOM, é possível importar matcha.css novamente e aplicar estilos customizados separados sem conflito com o restante do documento, graças ao isolamento

Suporte a navegadores e licença

  • matcha.css afirma ter sido criada para ser compatível com todos os navegadores modernos
  • A tabela de suporte inclui Chrome 92%, Edge 96%, Safari 94%, Firefox 95%, Opera 95%, Android Chrome 96%, iOS Safari 93%, Samsung Internet 96% e outros
  • Está disponível como open source sob a MIT License
  • O repositório está em github.com/lowlighter/matcha

Leituras relacionadas

1 comentários

 
GN⁺ 2024-05-25
Opiniões no Hacker News

  • Gosto da ideia de trazer o HTML de volta como fonte única da verdade para o layout de documentos, e isso parece poder ser produtivo para documentos que não precisam de um design complexo.
    Mas as escolhas de design padrão, especialmente cores e acabamento, deixam a desejar. Não sou designer profissional, mas já tive experiência suficiente com usuários reclamando de softwares que eu mesmo fiz para perceber quando algo soa estranho em comparação com algo criado por um bom designer com bagagem em teoria das cores, densidade de informação, gradientes etc.
    Se o autor estiver vendo isto, fico curioso se já considerou aproveitar a estética de outros projetos FOSS como Bulma ou Tailwind, ou colaborar com um designer profissional. Acho que o jgthms também aparece às vezes neste site.

    • Obrigado pelo feedback construtivo; na verdade, fiquei um pouco surpreso por isso ter aparecido no HN antes de eu mesmo publicar um Show HN.
      Não sou desenvolvedor front-end nem designer, então pode ficar evidente minha falta de conhecimento em teoria das cores, acessibilidade e elementos que podem parecer óbvios para outras pessoas. Por isso acho que também passa uma sensação artesanal.
      Vou pesquisar mais sobre os pontos mencionados. Quanto a colaborar com um designer profissional, estou aberto a receber conselhos, mas, por ser um projeto paralelo, não tenho planos de contratar alguém. Por ora, não vejo profissionais como o público principal; acho que deve atrair mais usuários hobistas.
    • Também sinto que há algo estranho, mas já senti isso em coisas feitas por designers. Ainda assim, parece bem decente, como algo feito por alguém com algum senso de design ou por um designer júnior.
      Quanto mais olho, melhor o conjunto parece, mas ao mesmo tempo a sensação levemente estranha também fica mais forte, o que é bem curioso.
      Edit: talvez a cor da xícara de chá seja o que pareça um pouco estranho. Gosto do logotipo como um todo, mas acho que talvez funcionasse mudar a cor da xícara para algo mais próximo da cor de fundo da parte superior.
    • Concordo. Um exemplo do que parece estranho é o estilo de hover dos botões.
      Texto preto sobre fundo escuro não funciona bem nem esteticamente nem em termos de acessibilidade. Se as configurações padrão fossem mais refinadas, seria perfeito.
    • O site tem uma seção onde é possível criar uma build customizada, então dá para controlar em certa medida as escolhas de estilo padrão.
      Mas, se for um designer tentando adequar ao visual de uma empresa, pode acabar gastando horas em coisas como espaçamento, e essa ferramenta não parece ser voltada para essas pessoas.

  • Gosto dessas bibliotecas pequenas. Hoje uso pico.css, mas vou dar uma olhada nesta também. Acho que os elementos DOM padrão do navegador deveriam ter essa aparência por padrão.
    Mas, na prática, não têm, e é por isso que bibliotecas assim existem. Depois de ver o comentário de outro usuário, fui procurar o que “classless” significa nesta biblioteca e encontrei uma lista de bibliotecas parecidas.
    https://github.com/dbohdan/classless-css

    • Concordo que “os elementos DOM padrão do navegador deveriam ter essa aparência”, mas isso também poderia ser um pesadelo para quem quer criar seus próprios estilos. Os estilos padrão atuais já são um pouco incômodos nesse sentido.
      Há muito tempo penso que seria bom haver uma forma de alternar entre estilos de chrome e estilos de conteúdo. Barras de navegação, visualizações incorporadas e elementos interativos poderiam ficar em um modo chrome, recebendo apenas estilos mínimos por padrão, enquanto o corpo do texto receberia o estilo preferido do usuário.
    • Também existe um site onde dá para testar essas coisas diretamente. O que conheço é https://www.cssbed.com/
    • Gosto muito do pico.css. É um meio-termo rápido e fácil de aprender, mas ainda assim bastante completo.
      Flask + HTMX + AlpineJS + PicoCSS é hoje minha “SPA toda em Python e HTML”.

  • Parece interessante, mas remover o sublinhado dos links e depender apenas da cor antes do hover é bem ruim em termos de acessibilidade.

    • Pessoas com daltonismo podem adicionar uma extensão CSS que sublinhe ou destaque links.
      Pessoas com deficiência visual usam leitores de tela ou displays braille, então não precisam de sublinhado. Então quem mais precisa de sublinhado?

  • Parece promissor. Eu vinha usando Simple.css: https://simplecss.org/
    Olhando por alto, o matcha.css parece um pouco mais avançado, então pretendo experimentá-lo.

  • Talvez seja preciso uma ferramenta para gerar esse tipo de framework CSS sem classes. Assim cada um poderia ajustar finamente a paleta de cores, padding, tamanho de fonte etc.

  • Durante 30 anos, usamos barras de rolagem proporcionais como controles padrão. Dava para saber que proporção do documento a janela atual estava exibindo, e era fácil clicar na barra de rolagem para ir a uma posição proporcional ao tamanho do documento.
    Também dava para usar os botões de seta acima e abaixo da barra de rolagem, navegar até ela com Tab e operá-la pelo teclado. Se você tivesse limitações visuais ou motoras, podia aumentar o contraste ou deixá-la maior nas configurações do sistema operacional.
    Mas, na web de 2024, as pessoas rotineiramente quebram as barras de rolagem e as transformam em um pesadelo de experiência do usuário. É vergonhoso que a UI/UX dos navegadores tenha se degradado a ponto de o CSS permitir destruir completamente controles padrão fornecidos pelo sistema operacional que funcionavam bem.
    Por favor, não usem isso.

    • Discordo fortemente.
      Os controles padrão fornecidos pelo sistema operacional também pioraram com o tempo. Exemplos disso são as barras de rolagem que desaparecem da Apple e as caixas de seleção arredondadas.
      Não dá para mudá-las facilmente, mas com CSS pelo menos é possível melhorar esses controles padrão.

  • Gostei da função de pré-visualização, que permite ver como ficaria em outros sites. É realmente intuitiva e combina bem com uma página de CSS.

  • O repositório Spark Joy da Swyx não pode ficar de fora:
    https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...

  • Por que ainda continuam criando novos frameworks CSS? Por que isso ainda não é um problema resolvido?

    • Isto não é um framework CSS, mas uma folha de estilos para usar quando você não quer se preocupar com CSS ou estilização, mas quer criar um site com aparência razoável.
    • Grande parte do CSS tem a ver com arte e senso estético. O trabalho com CSS nunca vai “acabar”.
      Enquanto artistas quiserem se expressar no meio que é a web, novas folhas de estilo e “frameworks” continuarão surgindo.