A IA escreve CSS,
mas é você quem pensa a solução.

Esse livro é pra você?

O que tem dentro

São 8 capítulos centrais, ligados por um fio condutor único, sobre os conceitos fundamentais de CSS. Cada um te dá o nome do que está acontecendo, e com o nome certo você pede à IA a correção certa em vez de mais um !important.

1. Cap. 2

   Cascata

   Quando várias regras disputam a mesma propriedade, quem vence? A Cascata responde em 7 passos numa ordem fixa.

2. Cap. 3

   Especificidade

   Quando os 4 primeiros passos empatam, a Especificidade decide, no 5º. Parece soma, mas é comparação parte a parte.

3. Cap. 4

   Herança

   Quando nenhuma regra declarou valor, a Herança entra depois da Cascata. Umas propriedades vêm do pai, outras não.

4. Cap. 5

   Box Model

   O contrato de como content, padding, border e margin formam o tamanho final, e por que margens colapsam.

5. Cap. 6

   Stacking Context

   O modelo que decide o que fica à frente no eixo Z, e por que subir o z-index nem sempre resolve.

6. Cap. 7

   Block Formatting Context

   O que isola o fluxo: a margem do filho não vaza para fora do pai e floats internos ficam contidos.

7. Cap. 8

   Algoritmos de Layout

   São 5 algoritmos lendo a mesma propriedade de jeitos diferentes. Trocar o algoritmo muda tudo no container.

8. Cap. 9

   CSS Containment

   Como dizer ao navegador “não recalcule nada fora daqui”: um trecho da página vira independente.

Sem esse fio condutor na cabeça, você fica nas mãos da IA. Com ele, você passa a dirigir a conversa.

O que você recebe

• O livro em PDF

  248 páginas sobre os 8 conceitos fundamentais de CSS, da Cascata ao CSS Containment, com um fio condutor que liga um ao outro.

• 31 exercícios resolvidos

  Cada capítulo termina com 3 ou 4 tarefas como a da amostra, todas com resposta comentada no Apêndice.

• Bônus: 2 skills para Claude Code

  Skill é um conjunto de instruções que você instala no Claude Code e chama por um comando. As duas põem os conceitos do livro para trabalhar no seu código:

  /cfcss-doctor diagnostica. Você cola um trecho de CSS que não funciona e pergunta “por que isso quebrou?”. Ela identifica o sintoma e responde citando o capítulo e o conceito do livro.

  Você

  /cfcss-doctor A IA pôs bg-red-600 no botão de excluir e ele continua azul. Por quê?

  <button class="btn bg-red-600">Excluir</button>

  @import "tailwindcss";
  
  .btn {
    background: var(--color-blue-600);
  }

  cfcss-doctor

  Diagnóstico: o .btn está fora de qualquer camada (cap. 2 — Cascata).

  Causa-raiz: no Tailwind v4, as utilities ficam dentro de @layer utilities. Estilo sem camada vence estilo em qualquer camada, e a Cascata decide isso antes de olhar a Especificidade: as duas classes empatam em Especificidade, mas o .btn já tinha vencido.

  Fix mínimo:

  @layer components {
    .btn {
      background: var(--color-blue-600);
    }
  }

  Por que funciona: a camada components vem antes de utilities, então a utility volta a vencer.

  /cfcss-smith moderniza. Você aponta código CSS e ela reescreve com padrões atuais, justificando cada mudança pelo capítulo do livro que a sustenta.

  Funcionam só no Claude Code. Se você usa outra ferramenta, o livro continua completo sem elas.

• Atualizações grátis

  Errata, novos exemplos e novas edições, sem custo adicional. Você baixa a versão nova na mesma página da compra.

Pagamento único, no PIX, no cartão (com parcelamento) ou no boleto. Sem assinatura, sem vídeo-aulas, sem mentoria: é livro.

Perguntas frequentes