Readme

Convenções de CSS seguindo os mesmos princípios do resto do guia: classes nomeadas pelo papel que o elemento cumpre, seletores de peso baixo, os valores do design guardados em variáveis e o estilo da tela pequena escrito primeiro.

→ Referência rápida: nomes, ordem das propriedades e tokens

Code style

Tópico	Conceitos
Nomes em CSS	BEM, kebab-case, nome pelo papel e especificidade baixa
Variáveis	Propriedades customizadas, tokens semânticos e escopo
Formatação	Ordem das propriedades e agrupamento por responsabilidade
Layout responsivo	Tela pequena primeiro, `min-width` e larguras de corte nomeadas
Densidade visual	Respiro entre blocos, grupos de propriedades, `@media` e aninhamento
Valor ausente	Valor de reserva no `var()`, `@property` e as palavras de reset
Performance	Recálculo de layout, `transform`, `will-change` e `contain`
Referência rápida	Nomes, ordem das propriedades e tokens

Frameworks

Framework	Conceitos
Tailwind	Extrair o componente com `@layer`, e registrar os tokens no config
Bootstrap	Trocar a variável em vez do seletor, e compor sobre a classe base
shadcn/ui	Tokens semânticos, variantes com `cva`, o `cn()`, estender e forkar
Lucide	Import por nome, cor herdada, nome acessível no botão só com ícone

Princípios

Nomeação: semântica, hierarquia e especificidade

Princípio	Descrição
Nomes semânticos	A classe descreve o papel do elemento na interface
BEM	Bloco__Elemento--Modificador, com a hierarquia dentro do nome
Especificidade baixa	Uma classe por seletor, sem id e sem `!important`

Estilo e layout: propriedades, tokens e responsividade

Princípio	Descrição
Variáveis	O valor do design guardado num nome que diz para que ele serve
Ordem das propriedades	Posição, caixa, texto e acabamento, nesta ordem
Tela pequena primeiro	A base é o celular, e o `min-width` acrescenta nas telas maiores

DoDocs v3.7.0 · Desenvolvido por @thiagocajadev · Baseado no trabalho de pmndrs/docs · Poimandres.