Afastando-me do Tailwind e aprendendo a estruturar meu CSS

Olá! Há 8 anos, escrevi com entusiasmo sobre a descoberta do Tailwind.

Naquela época eu realmente não tinha ideia de como estruturar meu código CSS e tendo a escolha entre uma pilha de caos completo e o Tailwind, fiquei muito feliz em escolher o Tailwind. Isso me ajudou a fazer muitos sites!

Passei a última semana migrando alguns sites do Tailwind para HTML + CSS vanilla mais semântico, e foi TÃO divertido e TÃO interessante, então aqui estão algumas coisas que aprendi!

Acontece que o Tailwind me ensinou muito

Quando comecei a pensar em estruturar CSS, a princípio fiquei intimidado: não sou muito bom em estruturar meu CSS! Mas então comecei a ler postagens de blog falando sobre como estruturar CSS (como Uma cascata inteira de camadas ou Como escrevo CSS em 2024) e percebi algumas coisas:

1. Cada base de código CSS tem um monte de coisas diferentes acontecendo (layouts! Fontes! Cores! Componentes comuns!)
2. É extremamente útil ter sistemas ou diretrizes para gerenciar cada uma dessas coisas, caso contrário as coisas cairão no caos
3. Tailwind tem sistemas para alguns deles, e eu já conheço esses sistemas! Talvez eu possa imitar os sistemas que gosto!

Por exemplo, Tailwind tem:

os sistemas sobre os quais vou falar

Vou falar sobre alguns aspectos da minha base de código CSS e minhas ideias até agora sobre que tipo de regras quero impor à base de código para cada um. Alguns deles são copiados do Tailwind e outros não.

1. reiniciar
2. componentes
3. cores
4. tamanhos de fonte
5. classes de utilidade
6. a base
7. espaçamento
8. design responsivo
9. o sistema de construção

1. redefinir

Acabei de copiar os “estilos de comprovação” do Tailwind entrando em tailwind.css e copiando as primeiras 200 linhas ou mais.

Percebi que desenvolvi um relacionamento com a redefinição de CSS do Tailwind ao longo do tempo, por exemplo, conjuntos do Tailwind box-sizing: border-box em cada elemento (o que significa que a largura de um elemento inclui seu preenchimento):

* { box-sizing: border-box; }

Acho que seria um ajuste real para mim passar a escrever CSS sem isso, e tenho certeza de que há muitas outras coisas na redefinição do Tailwind (como
html {line-height: 1.5;}) aos quais estou subconscientemente acostumado e nem percebo que existem.

2. componentes

A próxima parte é a maior parte do CSS!

A ideia aqui é organizar CSS por “componentes”, de uma forma que esteja espiritualmente relacionada aos componentes Vue ou React. (embora possa não haver nenhum Javascript no site)

Basicamente a ideia é que:

1. Cada “componente” possui uma classe única
2. O CSS de um componente nunca substitui o CSS de qualquer outro componente
3. Cada componente possui seu próprio arquivo CSS

Portanto, editar o CSS de um componente não quebrará misteriosamente algo em outro componente. E provavelmente 80% do CSS que eu realmente gostaria de alterar está em vários arquivos de componentes, então, se estou editando um componente de 100 linhas, só preciso pensar nessas 100 linhas. É muito mais fácil para mim pensar.

Por exemplo, este HTML pode ser o .zine “componente”.

E o CSS é mais ou menos assim, usando seletores aninhados:

.zine {
  ...
  &.horizontal {
    ...
  }
  &.vertical {
    ...
  }
  &:hover {
    ...
  }
}

Não fiz nada programático (como componentes web ou @scope) que garanta que os componentes não interfiram uns com os outros, mas apenas ter uma convenção e tentar o meu melhor já parece uma grande melhoria.

Próximo: convenções para manter alguma consistência em todo o site e manter esses componentes alinhados entre si!

3. cores

colours.css tem um monte de variáveis ​​como essa que posso usar conforme necessário. Cor é realmente difícil e eu não queria revisitar meu uso de cores neste refatorador, então deixei isso de lado.

A única diretriz que estou tentando impor aqui é que todas as cores usadas no site estejam listadas neste arquivo.

:root {
  --pink: #fea0c2;
  --pink-light: #F9B9B9;
  --red: #f91a55;
  --orange: rgb(222, 117, 31);
  ...
}

4. tamanhos de fonte

Uma coisa que gostei no Tailwind foi que se eu quisesse definir um tamanho de fonte, poderia apenas pensar “hm, quero que o texto seja grande”, escrever text-lge pronto! E talvez se não for grande o suficiente eu usaria xl ou 2xl em vez de. Não tente lembrar se estou usando em ou px ou rem.

Então defini um monte de variáveis, retiradas do Tailwind, assim:

  --size-xs: 0.75rem;
  --line-height-xs: 1rem;

  --size-sm: 0.875rem;
  --line-height-sm: 1.25rem;

Então, se eu quiser definir um tamanho de fonte, posso fazer assim. É um pouco mais detalhado que o Tailwind, mas estou feliz com isso por enquanto.

h3 {
  font-size: var(--size-lg);
  line-weight: var(--line-weight-lg);
}

5. utilidades

Existem algumas coisas como botões que aparecem em muitos componentes diferentes. Estou chamando isso de “utilitários”.

Copiei algumas classes utilitárias do Tailwind (como .sr-only para coisas que só deveriam aparecer para usuários de leitores de tela).

Esta seção é bem pequena e tento ter cuidado ao fazer alterações aqui.

6. a base

Estilos “base” são estilos que se aplicam a todo o site que eu mesmo escolhi. Tenho que manter esta seção bem pequena porque não estou confiante o suficiente para aplicar muitos estilos em todo o site. Esses são os únicos dois com os quais me sinto bem agora, e posso mudar o

/* put a 950px column in the middle of each 
 */
section {
  --inner-width: 950px;
  padding: 3rem max(1rem, (100% - var(--inner-width))/2);
}

a {
  color: var(--orange);
}

section > *+* {
  margin-top: 1rem;
}

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), max-content));
  justify-content: center;

@import "reset.css";
@import "typography.css";
@import "colors.css";

.page {
  h2 { ...}
}

esbuild style.css --bundle --loader:.svg=dataurl  --loader:.woff2=file --outfile=/tmp/out.css