# CSS Audit — Eliminar Código Morto

CSS morto aumenta o parse time do browser e contribui diretamente para o TBT (Total Blocking Time).

---

## Como auditar

### Passo 1: Extrair classes definidas no `<style>`

Buscar todos os seletores `.classe` no bloco `<style>`:

```
Grep: \.([a-z][a-z0-9\-]+)\s*\{
```

Resultado: lista de todas as classes definidas.

### Passo 2: Extrair classes usadas no HTML

Buscar todos os atributos `class="..."` no HTML:

```
Grep: class="([^"]+)"
```

Expandir cada valor separando por espaços → lista de classes usadas.

### Passo 3: Diferença = CSS morto

Classes que estão no `<style>` mas NÃO aparecem em nenhum `class="..."` → deletar.

**Atenção**: Classes adicionadas via JS (ex: `classList.add('oap-btn-loading')`) devem ser mantidas. Verificar nos `<script>` antes de deletar.

---

## Classes que podem parecer mortas mas não são

| Classe | Por que manter |
|--------|---------------|
| `oap-btn-loading` | Adicionada via JS no submit do form |
| `oap-animate-spin` | Adicionada via JS (spinner) |
| `oap-animate-pulse` | Pode ser usada em múltiplos elementos |
| `::placeholder`, `:focus`, `:hover` | Pseudo-seletores — verificar se o elemento base existe |
| Classes dentro de `@media` | Verificar se o HTML usa a classe em qualquer breakpoint |

---

## Minificação do CSS restante

Após remover as classes mortas, minificar:

1. **Uma regra por linha** (facilita diff mas economiza espaço)
2. **Sem espaços desnecessários** antes/depois de `:`, `;`, `{`, `}`
3. **Valores abreviados**: `0.5` → `.5`, `rgba(0,0,0,0)` → `transparent`
4. **Cores**: `#FFFFFF` → `#fff`, `#FFB900` mantém (não tem versão curta)
5. **Media queries**: agrupar seletores relacionados na mesma `@media` quando possível

**Antes:**
```css
.oap-card {
    background: rgba(15, 58, 58, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid #004F4F;
    border-radius: 0.75rem;
    padding: 2rem;
}
```

**Depois:**
```css
.oap-card{background:rgba(15,58,58,.85);border:1px solid rgba(255,255,255,.1);border-top:2px solid #004F4F;border-radius:.75rem;padding:2rem}
```

---

## Meta de redução

| CSS total inicial | Meta após audit |
|------------------|-----------------|
| > 500 linhas | < 150 linhas |
| > 300 linhas | < 100 linhas |
| < 300 linhas | < 80 linhas |

Redução de 60-80% é típica em páginas criadas com Tailwind-like utility classes onde muitas utilitárias nunca são usadas.

---

## Checklist CSS Audit

- [ ] Listou todas as classes definidas no `<style>`
- [ ] Listou todas as classes usadas nos atributos `class="..."`
- [ ] Verificou classes adicionadas via `classList.add()` nos scripts
- [ ] Verificou pseudo-seletores (`:hover`, `:focus`, `::placeholder`)
- [ ] Deletou apenas as classes confirmadamente não-usadas
- [ ] Minificou o CSS restante
- [ ] Testou visualmente que nada quebrou após a remoção
