Introdução de 5 minutos aos componentes com estilo

CSS é estranho. Você pode aprender o básico em 15 minutos. Mas pode levar anos até você descobrir uma boa maneira de organizar seus estilos.

Parte disso se deve apenas às peculiaridades da própria linguagem. Fora da caixa, o CSS é bastante limitado, sem variáveis, loops ou funções. Ao mesmo tempo, é bastante permissivo que você possa estilizar elementos, classes, IDs ou qualquer combinação deles.

Folhas de estilo caótico

Como você provavelmente já experimentou, isso geralmente é uma receita para o caos. E enquanto pré-processadores como SASS e LESS adicionam muitos recursos úteis, eles realmente não fazem muito para impedir a anarquia de CSS.

Esse trabalho organizacional foi deixado para metodologias como o BEM, que - embora útil - é totalmente opcional e não pode ser aplicado no nível do idioma ou das ferramentas.

A nova onda de CSS

Avancemos alguns anos e uma nova onda de ferramentas baseadas em JavaScript está tentando resolver esses problemas na raiz, alterando a maneira como você escreve CSS.

A Styled Components é uma dessas bibliotecas e rapidamente atraiu muita atenção devido à sua mistura de inovação e familiaridade. Portanto, se você usar o React (e não o fizer, confira meu plano de estudo sobre JavaScript e minha introdução ao React), definitivamente vale a pena dar uma olhada nesta nova alternativa de CSS.

Recentemente, usei-o para redesenhar meu site pessoal e hoje queria compartilhar algumas coisas que aprendi no processo.

Componentes com estilo

A principal coisa que você precisa entender sobre os Componentes com estilo é que seu nome deve ser tomado literalmente. Você não está mais estilizando elementos ou componentes HTML com base em sua classe ou elemento HTML:

Olá mundo

h1.title {
  tamanho da fonte: 1.5em;
  cor roxa;
}

Em vez disso, você está definindo componentes estilizados que possuem seus próprios estilos encapsulados. Então você as usa livremente em toda a sua base de código:

importar estilos de 'componentes estilizados';
const Título = denominado.h1`
  tamanho da fonte: 1.5em;
  cor roxa;
`;
 Olá Mundo 

Isso pode parecer uma pequena diferença e, de fato, ambas as sintaxes são muito semelhantes. Mas a principal diferença é que os estilos agora fazem parte de seus componentes.

Em outras palavras, estamos nos livrando das classes CSS como uma etapa intermediária entre o componente e seus estilos.

Como o co-criador de componentes de estilo Max Stoiber diz:

"A idéia básica dos componentes estilizados é impor as melhores práticas, removendo o mapeamento entre estilos e componentes".

Complexidade de descarregamento

A princípio, isso parecerá contra-intuitivo, já que o objetivo de usar CSS em vez de estilizar diretamente elementos HTML (lembra-se da tag ?) É desacoplar estilos e marcação introduzindo essa camada de classe intermediária.

Mas essa dissociação também cria muita complexidade, e há um argumento a ser feito que, comparado ao CSS, uma linguagem de programação "real" como o JavaScript está muito melhor equipada para lidar com essa complexidade.

Props Over Classes

De acordo com essa filosofia sem classes, os componentes denominados usam adereços sobre as classes quando se trata de personalizar o comportamento de um componente. Então, em vez de:

Olá Mundo

// ficará azul
h1.title {
  tamanho da fonte: 1.5em;
  cor roxa;
  
  & .primary {
    cor azul;
  }
}

Você escreveria:

const Título = denominado.h1`
  tamanho da fonte: 1.5em;
  color: $ {props => props.primary? 'azul': 'roxo'};
`;
 Hello World  // ficará azul

Como você pode ver, os componentes com estilo permitem limpar seus componentes do React mantendo todos os detalhes de implementação relacionados a CSS e HTML.

Dito isto, o CSS de componentes com estilo ainda é CSS. Portanto, coisas assim também são um código totalmente válido (embora um pouco não idiomático):

const Título = denominado.h1`
  tamanho da fonte: 1.5em;
  cor roxa;
  
  & .primary {
    cor azul;
  }
`;
 Olá Mundo  // ficará azul

Esse é um recurso que facilita muito a entrada de componentes estilizados: quando houver dúvida, você sempre pode voltar ao que sabe!

Ressalvas

Também é importante mencionar que os componentes com estilo ainda são um projeto jovem e que alguns recursos ainda não são totalmente suportados. Por exemplo, se você deseja estilizar um componente filho de um pai, precisará contar com o uso de classes CSS por enquanto (pelo menos até que os componentes com estilo v2 sejam lançados).

Também não existe uma maneira "oficial" de pré-renderizar seu CSS no servidor, embora seja definitivamente possível injetar os estilos manualmente.

E o fato de os componentes estilizados gerarem seus próprios nomes de classe aleatórios pode dificultar o uso das ferramentas de desenvolvimento do seu navegador para descobrir onde seus estilos foram originalmente definidos.

Mas o que é muito encorajador é que a equipe principal de componentes estilizados esteja ciente de todos esses problemas e trabalhe duro para corrigi-los um por um. A versão 2 será lançada em breve e estou realmente ansiosa por isso!

Saber mais

Meu objetivo aqui não é explicar em detalhes como os componentes com estilo funcionam, mas mais para dar uma pequena olhada para que você possa decidir por si mesmo se vale a pena conferir.

Se eu consegui deixar você curioso, aqui estão alguns lugares onde você pode aprender mais sobre componentes estilizados:

  • Max Stoiber escreveu recentemente um artigo sobre o motivo dos componentes estilizados da Smashing Magazine.
  • O repositório de componentes com estilo possui uma documentação extensa.
  • Este artigo de Jamie Dixon descreve alguns benefícios da mudança para componentes estilizados.
  • Se você quiser saber mais sobre como a biblioteca é realmente implementada, confira este artigo por Max.

E se você quiser ir ainda mais longe, também pode conferir o Glamour, uma visão diferente do CSS de nova onda!

Tempo de autopromoção: procuramos colaboradores de código aberto para ajudar com o Nova, a maneira mais fácil de criar aplicativos React e GraphQL de pilha completa, completos com formulários, carregamento de dados e contas de usuário. Ainda não usamos componentes com estilo, mas você pode ser o primeiro a implementá-los!