# CSS Blocks: introdução à API

> Conheça CSS Blocks da LinkedIn: otimizador revolucionário que reescreve CSS para máxima performance. Introdução à API e casos de uso práticos. Otimize!

URL: https://dpw.dev/css/css-blocks-api-introducao/  
Publicado em: 2018-04-28  
Categoria: css  
Tags: analise, ferramentas, performance, series  
Autor: Tárcio Zemel

![CSS Blocks logo](/images/blog/css-blocks-api-introducao/wordmark-animated.012177e4.svg)

[No primeiro artigo sobre CSS Blocks](/css/css-blocks-linkedin-otimizador-css/) (o primeiro brasuca, aliás!) apresentamos o otimizador de CSS da LinkedIn, explicando um pouco sobre o porquê de sua existência e seus princípios-base. Agora, vamos a mais algumas explicações de código para entender melhor o que **CSS Blocks** é capaz de fazer.

Como uma breve recapitulação, [CSS Blocks](http://css-blocks.com/) é um compilador inspirado em CSS Modules, BEM e Atomic CSS que, usando o [OptiCSS](https://github.com/linkedin/opticss), promete entregar estilos bem mais enxutos e performáticos. No momento da publicação deste artigo, é possível usá-lo nas templating languages [JSX/React](https://github.com/linkedin/css-blocks/blob/master/packages/@css-blocks/jsx) e [Glimmer](https://github.com/linkedin/css-blocks/blob/master/packages/@css-blocks/glimmer) (com [Webpack](https://github.com/linkedin/css-blocks/blob/master/packages/@css-blocks/webpack), [Broccoli](https://github.com/linkedin/css-blocks/blob/master/packages/@css-blocks/broccoli) ou [Ember-CLI](https://github.com/linkedin/css-blocks/blob/master/packages/@css-blocks/ember-cli)) -- [por se tratar de um projeto open source](https://github.com/linkedin/css-blocks), a tendência é que mais e mais opções surjam bem rapidamente.

## O que é um "Bloco"?

O nome da coisa é **CSS Blocks**, "Blocos CSS"; mas, segundo a metáfora de desenvolvimento escolhida, o que seria um "Bloco"?

Um **Bloco** é uma folha de estilo isolada, escrita em seu próprio arquivo, que contém todos os conjuntos de regras para quaisquer elementos e seus vários modos e estados de interação para uma unidade discreta de estilo -- como um componente, por exemplo.

Normalmente, um único bloco conterá estilos para um componente ou conceito específico, mas é totalmente natural -- e incentivado -- um template usar vários Blocos e os compor juntos na marcação.

Um Bloco pode conter:

- Seletor `:scope`
- Seletores de classe
- Seletores de estado
- Seletores de sub-estado

## Seletor `:scope`

O conjunto de regras de escopo contém estilos aplicados à raiz da sub-árvore de estilo com escopo. Trocando em miúdos, todos os outros elementos atribuídos a estilos de um Bloco devem estar contidos na sub-árvore do documento de um elemento atribuído ao escopo desse Bloco. Usa-se a [pseudo-classe :scope](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope) para representar esses estilos.

O seletor `:scope` pode conter a propriedade especial `block-name` que torna possível fornecer um nome específico para o Bloco para um debugging mais fácil e respectiva geração de classe BEM. Se nenhum nome de bloco for fornecido, infere-se o nome do bloco a partir do nome do arquivo.

> **Dica:** Sim, você leu corretamente: a compilação final de CSS Blocks gera nomes de classes seguindo a metodologia BEM!

Por exemplo:

```scss
:scope { 
  block-name: custom-block-name; 
  /* ? opcional! */
  /* ... mais estilos ... */
}

```

## Seletores de classe

Blocos podem conter outras classes que podem ser aplicadas a elementos dentro da sub-árvore de estilo escopada. São apenas seletores de classe comuns, mas são locais para esse Bloco e isolados de todas as outras classes com nomes iguais em outros Blocos.

```
.sub-element 

.other-sub-element 

```

Juntos, o seletor `:scope` e todos os seletores de classe (`.class`) declarados definem a interface completa dos elementos estilizados disponíveis para quem vai usar um Bloco.

## Seletores de Estado

**Estados** representam um modo ou estado de interação no qual `:scope` ou uma classe -- denominada **Elemento Originário do Estado** -- pode estar. Os Estados são gravados como seletores de atributos com o namespace especial `state`.

```
:scope 
:scope[state|enabled] 

.sub-element 
.sub-element[state|is-active] 

```

## Seletores de sub-estado

Estados no seletor `:scope` ou um seletor de classe podem conter sub-estados para um estilo mais granular. **Os sub-estados de um Estado são mutuamente exclusivos**, ou seja, um elemento só pode estar em um sub-estado de um Estado por vez.

```
:scope 
:scope[state|theme="inverse"] 

.sub-element 

/* Aplicado a *qualquer* valor de `color` (incluindo valor nenhum) */
.sub-element[state|color] 

/* Aplicado a valores *específicos* de `color` */
.sub-element[state|color="red"] 
.sub-element[state|color="blue"] 
.sub-element[state|color="yellow"] 

```

## Restrições na API de CSS Blocks

**CSS Blocks implementa um subconjunto estrito de CSS**. Isso significa que alguns dos recursos que normalmente poderiam ser usados em um arquivo em um arquivo de Bloco foram intencionalmente restringidos para garantir que a compilação final possa gerar estilos da maneira mais otimizada possível.

> **Dica:** A equipe principal de desenvolvimento do CSS Blocks já planeja melhorias neste sentido; em breve, estas restrições serão bem menores.

Para ficar claro:

- Permitido:
    - `::before`, `::after`, e todos os outros [pseudo-elementos](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
    - `:hover`, `:active`, e todas as outras [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
    - `@media`, `@breakpoint`, e todas as outras [@at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule)
    - Especificidade de cascata e de seletor
- Proibido (por enquanto):
    - `!important` (você já deveria tê-lo banido, de qualquer maneira)
    - `tag`, `[attribute]` que não seja de Estado, `#id` e seletores `*`
    - Os [Combinadores Lógicos](https://www.w3.org/TR/selectors-4/#logical-combination) `:matches()`, `:not()`, `:something()` e `:has()`
    - **Importante**: seletores devem se manter rasos (_shallow_)

No contexto de CSS Blocks, "seletores rasos" significa:

### Apenas 1 [combinador](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors) por seletor

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml