React e CSS

[akfzambrana]

Bom dia,

um colega ontem me mostrou isto aqui: https://github.com/styled-components/styled-components

Honestamente a primeira vista não gostei, pois sou old school, no entanto, como não tenho conhecimento suficiente para julgar, gostaria de saber se vocês já utilizaram algo do tipo e quais seriam as vantagens encima do padrão comum de CSS separado ou encima do CSS modules do React mesmo.

bjs!

[bernardodiasc]

Olá @akfzambrana, fiz uma boa pesquisa nesse assunto, alguns meses atrás comecei a usar React, o que significa desenvolver em sistemas quase inteiros baseados em JS, e no mesmo período comecei a usar PostCSS, e ja que tudo se compilava com Webpack, CSS Modules foi por onde comecei no que se trata de CSS.

Durante o processo muita dúvida sobre CSS-in-JS me ocorreu, então cheguei a conferir várias opções, nem recordo o nome de todas, mas acompanhei essa lista https://github.com/MicheleBertoli/css-in-js, os tops da categoria estão lá, inclusive styled-components. Também pude ler relatos de pessoas com casos de uso complexos e tudo mais.

Então, o que é mais comum encontrar nas libs de CSS-in-JS são coisas como mera tradução CSS-para-JSON, estilos inline (<p style="no:thanks">), e muita limitação comparando com todas funcionalidades do CSS. Os casos de usos que li diziam sobre as limitações, que não são facilmente identificadas logo de cara, as vezes o projeto precisa chegar em complexidade relativamente grande para começarem a surgir os "drawbacks".

Mas tudo muda com styled-components, esse é especial. Esse escreve CSS de verdade dentro do JS pq usa o template literals do ES2015, de modo que a mágica que todos pediram por anos foi realizada, permitindo nos usar tudo de bom do CSS com tudo de bom do JS. E pra ficar ainda mais loco, a forma com que o styled-components gera os estilos e classes é a mesma do CSS Modules (a terminologia é "interoperable css"), criando classes com nomes em hash, gerando o mesmo efeito do método BEM de modularização de estilos.

No entanto styled-components ainda tem limitações, como por exemplo, é feita para usar com React. Não sei se funciona em outros template renders. Mas o maneiro é que tem opções, como por exemplo https://github.com/joshwnj/cmz, que é basicamente css-modules + styled-components e React e Webpack são opcionais.

Minha particular opinião é que gosto bastante do CSS Modules + PostCSS, é uma combinação muito foda, e permite desenvolver framework CSS mais completo (ou complexo). Mas quando to fazendo coisas pequenas, tipo um site ou sistema bem simples, ou um protótipo, styled-components foi bem facil e rapido. Próximas chances quero tentar o CMZ.

[akfzambrana]

No caso atual em que estou trabalhando, é uma aplicação web bastante grande, ou seja, precisamos de um certo equilibrio entre manutenção e uso/implementação de novas features, então estamos procurando por algo q seja sustentável, e que não nos obrigue a ficar replicando codigo qdo tivermos "coisas visuais" repetidas como por exemplo, tamanho de fonte, line-height, espaçamentos padrão entre elementos, etc.

Você acha que essa combinação nos ajudaria?

[diessica]

"Honestamente a primeira vista não gostei, pois sou old school"

Uma pergunta, por curiosidade: O que significa ser "old school" e por que você se considera old school?

[bukinoshita]

"A big advantage of CSS in JS(X): One language (JS), not three (JS, HTML, CSS).
One linter. One code style. One type system. One test system."

Esse tweet do rauchg: https://twitter.com/rauchg/status/802328362341384192

[femontanha]

É um mindset diferente, isso vai muito além só do CSS e sim no jeito de você pensar e montar a arquitetura do seu projeto baseada em componentes.

Trabalhei um pouco com CSS Modules e me apaixonei, eu ainda acredito que ele é o equilíbrio do que era feito no passado com o mix do que é novo. Você consegue trabalhar com um arquivo externo que pode ser .css .scss .seupreprocessador, mas com escopo.

Então por exemplo, você tem um componente chamado Card, ele tem um titulo, descrição e foto.
O nome das classes não tem segredo:

.card, .title, .description, .photo

No final, o CSS modules vai pegar e acrescentar uma # (hash) com um ID baseado no seu componente e jogar no css global (Porque css é global)

Por outro lado temos que aceitar que programação/javascript está fazendo cada vez mais parte do ecossistema inteiro de front-end, pelo menos por agora. No meu trabalho adotaram essa solução aqui, que se encaixa no create-react-app que é o bolierplate que o Facebook criou para o React.

Glamor ==> https://github.com/threepointone/glamor

[rubenmarcus]

@bernardodiasc o cmz nao tem cache não é? li no git deles q vc postou, que eles geram o css no style no head. Isso é ruim porque nao usa cache certo?

Por exemplo.. num e-commerce, as pessoas costumam visitar a home, paginas de promoção e o funil de compra.. Então era bom ter cacheado o css dessas paginas ou nao?

[rubenmarcus]

Qual a vantagem para uma aplicação que ja tem 25mil linhas de css ,passar a adotar css in js?

[bernardodiasc]

@rubenmarcus o css é injetado no html pelo js, e o js pode ser cacheado, então deve funcionar.

[rubenmarcus]

vcs acham que isso vai ser uma tendencia agora? Pessoal falava que JQuery ia ser cada vez ser usado menos, e vejo bem o contrário a adoção ainda é muito grande..

Eu acho bem bacana o conceito de css modular e também js in css,mas no meu ver igual os pré processadores, quando começaram a ser usados pra mim só fazem sentidos em aplicações grandes.. ou médias.. pra pequenas não tem porque , o custo em ficar abrindo varios js, ou usar muitas ferramentas pra fazer algo simples não compensa..

[rubenmarcus]

https://wappalyzer.com/categories/javascript-frameworks JQuery 42% de market share.. acho dificil isso cair

[bernardodiasc]

Pois é, voce não precisa usar as coisas a todo custo, antes de adotar qualquer tecnologia voce precisa entender o que aquilo está solucionando, se é uma solução que voce precisa. Pois se voce nao estiver precisando dessa soluçao, ai vai entender como mera tendencia mesmo, voce nao vai conseguir enxergar valor real agregado.

[leonardoelias]

@rubenmarcus essas estáticas representam mais sites institucionais.

[bernardodiasc]

Qual a vantagem para uma aplicação que ja tem 25mil linhas de css ,passar a adotar css in js?

Essa pergunta não é tão facil de responder pois é muito vaga. Os benefícios vc consegue tirar de uma arquitetura melhor, css-in-js é uma das opções se o seu sistema for baseado em js e voce estiver gerando o html pelo js tambem. Independentemente, o lance é a construção modular das peças que compõem, e a organização dos arquivos em componentes.

Vários são os benefícios para casos extremos que chegam a 25 mil linhas de CSS. Um deles é com certeza o fato de serem componentes, então voce pode eliminar CSS durante a manutenção sem medo de efeitos colaterais inexplicáveis. Ja estive em cenários de 25 mil linhas de CSS, boa parte disso tudo é redundancia e código morto e ninguem quer encostar com medo de explodir a coisa toda. Quando voce tem um componente com estilo aplicado apenas no seu escopo, quando o componente sai do projeto voce remove o CSS junto com segurança. Além disso existem tecnicas de composição que permitem evitar redundancia de código (como o compose do CSS Modules por exemplo).

[rubenmarcus]

@bernardodiasc muito legal. Aqui na Printi tenho liberdade de adotar tecnologias, sugeri desde o começo Jade (Pug) , PostCss com rucksack e Css Next, e agora estamos usando o PostCss Ant para grid.

nossa aplicação usa angular 1.3, e não sei se nesse cenário converter css in js é uma boa medida.

O que te digo é que eu ja estou fazendo varias refatorações, e a construção do app aqui, foi no extreme go horse very extreme, então adoção de grid pra responsive, e outras tecnicas ficou pra agora quase 1 ano depois, porque eu entrei em Março passado e tinha 3 meses pra entregar quase 40 telas que tiveram mudanças visuais no processo.. Então foi construido bem sujo.. Mas agora vamos reduzir o layout e uma boa refatoração já está sendo feita, e a equipe aqui tem uma capacidade de aprendizado bem grande e de aceitação de tecnologias,

Não sei se co mAngular é viavel aplicar essa tecnica, mas por exemplo, aqui pra construir o layout pegamos os 6 ranges mais usados segundo o analytics, e como a equipe de design e marketing ia mudando muito os layouts, eu achei mais seguro jogar logo esses 6 ranges do que usar uma grid, e fui substituindo conforme o necessário.. agora estou num processo de jogar esses 6 ranges fora e usar grid pra tudo e 2 ranges só 1 mobile e um tablet + desktop

por enquanto estamos usando OOCSS e só ,ia gostar de usar BEM, mas tem muita coisa na aplicação que ta amarrada as classes de agora, mas aos poucos estamos restruturando tudo, tem partes do layouts que não estão semanticas e eu estou deixando o mais semantico possivel, etc etc.. então eu sempre paro aqui no forum e leio tudo que posso pra ver no que posso melhorar na parte de front da aplicação

[rubenmarcus]

Nosso arquivo final desminificado tem 26mil linhas, e o mobile mais 6mil

mas redudancia nao é algo normal? Por exemplo no código css do github no inspect element:

.markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre {
margin-top: 0;
margin-bottom: 16px;
}

frameworks-70aff62….css:5
p {
margin-top: 0;
margin-bottom: 10px;
}

Isso não é redudante, uma classe sobrescrever a propriedade de outro elemento? repeticao de propriedades em classes e elementos diferentes também não é um problema ou é?

se vc dar ctrl + f aqui no css do git vai acharu m monte de float:left, por exemplo.

Esse padrão de classes sobrescrever outras classes ou elementos eu vejo em quase todos os sites, Globo, Facebook, etc etc..

[akfzambrana]

@diessica meio que saindo da discussão da issue, mas respondendo a tua pergunta:

Uma pergunta, por curiosidade: O que significa ser "old school" e por que você se considera old school?

Eu me considero old school, pq sou velha kkkk, basicamente eu prefiro casa coisa no seu lugar, sou do tempo em que css era apenas layout, html era apenas "conteudo" e js apenas colocava e aprimorava o comportamento das coisas e por esse tipo de pensamento "old school" (ou pode chamar de ultrapassado) eu não sou muito fã dessa mistura de camadas, sem contar que me preocupa muito em como fica a acessibilidade para essas novas coisas desenvolvidas quase que 100% com JS.

Não me entenda mal, não sou contra, apenas tento ser mente aberta, só que ao mesmo tempo sou meio cética às vantagens e por isso vim pedir ajuda de quem já utiliza para poder levar em consideração isso na hora de investir meu esforço aprendendo e utilizando algo com o que não estou 100% de acordo.
Algo que levo para a minha vida sempre é que a minha opinião não é necessáriamente a melhor ou a correta então eu acredito que a opinião da comunidade deve contar na minha analise de qualquer coisa/tecnologia/tecnica/metodologia/etc. Sei que ao mesmo tempo de não gostar dessa mistura toda, também sei que a tendencia do mercado esta caminhando para esse tipo de aplicação, justamente por ser "uma aplicação" e não apenas um site ou portal informativo. Essa questão de que hoje fazemos "sistemas" e não mais apenas sites, já entrou na minha cabeça e estou abrindo mão dos meus preconceitos justamente porque é uma verdade/realidade.

Saca? 😄

btw: pra mim old school pode ser entendido por ultrapassado (se considerado negativo) ou algo que se prende as bases mais puras (se considerado positivo), eu costumo me chamar de old school apenas pq to quase nos 40 e realmente to ficando velha pra ir na pegada de vocês mais jovens e com a energia toda pra aprender/pesquisar.

[felipefialho]

@akfzambrana Te entendo com esse conceito de old-school, haha, também demoro um pouco para abstrair conceitos que fogem totalmente da minha "zona de conforto", mas faz parte da nossa profissão! haha

Quanto a issue, calhou em um bom momento pra mim, ontem comecei a brincar com um projetinho em React (ta ligado @raphaelfabeni?) e uma das maneiras que uso para estudar é dar uma olhada em diversos boilerplates. Tem até um site legal pra isso.

Boilerplate vai, boilerplate vem, e cheguei em um que utiliza justamente o Styled Components. Também observei essa similaridade com CSS Modules e por ser JavaScript a possibilidade de fazer diversas funcionalidades ali mesmo. Gostei.

[akfzambrana]

Disse tudo kkk é meu caso a maioria das vezes

demoro um pouco para abstrair conceitos que fogem totalmente da minha "zona de conforto"