Eu <3 cascade!
Tags: css, webdev, portugues
Published: 2023-12-03 22:15:17

_**Nota:** apenas traduzi o texto abaixo e postei aqui._

Muitos desenvolvedores, principalmente aqueles que aprenderam JavaScript primeiro, odeiam `cascade`.

Cascade, se você não conhece, é o `C` em **CSS** (_Cascading Style Sheets_). Em CSS, os estilos são padronizados para a janela e são transmitidos em cascata para os elementos filhos.

```css
/**
 * Isso se aplicará a todos os buttons no UI inteira
 */
button {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}
```

Para desenvolvedores de JavaScript que estão acostumados a definir o escopo de variáveis, functions e assim por diante em um component, isso parece um bug.

Mas, na realidade, cascade é uma feature.

Cascade me permite manter minhas stylesheets pequenas, enxutas e com bom desempenho. Isso significa que não preciso declarar novamente estilos para o mesmo elemento repetidamente para cada component em que o incluo.

Imagine ter que reescrever os mesmos estilos de botões usados para enviar seu `contact form`, botões usados para se inscrever em sua `newsletter` e botões para uma `call-to-action box`.

```css
/**
 * Button styles para o contact form
 */
.contact button {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}

/**
 * Button styles para o newsletter form
 */
.newsletter button {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}

/**
 * Button styles para o calls-to-action
 */
button.call-to-action {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}
```

E sim, você poderia combiná-los assim.

```css
.contact button,
.newsletter button,
button.call-to-action {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}
```

Mas não é um absurdo quando você pode simplesmente estilizar um button uma vez e seguir com sua vida?

```css
button {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}
```

E toda essa conversa sobre como o CSS está quebrado, mas o JavaScript faz muito mais sentido, ignora a montanha de hacks que existem no JavaScript também.

JS também é global por padrão. Usamos IIFEs e wrapper functions para adicionar escopo.

```javascript
// Isso é uma variável global
var myName = 'Chris';

// Encapsulando ela em uma function, dá escopo para ela
(function () {
    var myName = 'Chris';
})();
```

E apesar de toda essa conversa sobre o CSS ser global, você pode definir o escopo dos estilos quando precisar. É mais ou menos a mesma maneira que você faz em JavaScript.

Digamos que você usou um estilo de botão global, mas deseja substituir determinados botões para ter uma background color diferente. Talvez `blue` em vez de `purple`.

Você pode fazer isso.

```css
/**
 * Isso se aplicará a todos os buttons no UI inteira
 */
button {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}

/**
 * Isso subscreve os estilos default do button para os .callout components
 */
.callout button {
    background-color: blue;
}
```

Em vez de reescrever todos os estilos de qualquer component específico, você ajusta apenas os estilos necessários.

Cascade é uma coisa linda!

## Fonte

Newsletter de [Go Make Things](https://gomakethings.com/)