O CSS tradicional está morrendo? #1863
Replies: 8 comments
-
|
Não acho que esteja morrendo não. Pelo contrário, está evoluindo da mesma forma que o JS teve seu boom após pré-processadores como CoffeeScript. O que acho que pode estar morrendo é o css tradicional padrão, mas o CSS vanilla tá evoluindo muito e vem bastante coisa interessante como Houdini e estruturar código css utilizando variáveis (que apesar de não ser tão novo, não vejo muita implementação), o que também muda a estrutura de como se codifica o css. Utilizar o css sem escopo também traz certas desvantagens nessa era de componentização em que estamos, e Web Components não se tornou satisfatório como solução viável e amplamente adotada até hoje. Logo é racional esse aumento na adoção de CSS-in-JS. E tanto faz ter um arquivo separado ou junto do js sendo que podemos deixar tal gerenciamento direto no bundler acaba sendo não um ganho, mas sim uma comodidade... principalmente na hora de interpolar variáveis JS dentro do CSS sem precisar gerar um arquivo estático com todas as possibilidades (que ressalto aqui, não é a melhor forma mas sim a mais cômoda, ainda vejo certos ganhos em gerar arquivo css estático como previsibilidade de estados facilitando testes de UI). |
Beta Was this translation helpful? Give feedback.
-
Concordo com sua opinião. |
Beta Was this translation helpful? Give feedback.
-
|
@ninetails, concordo com você. Houdini é fantástico e realmente tem muita coisa nova surgindo no CSS, como foi mostrado nessa talk. ✨ E também estou com você, @helderburato , nesse pensamento que as bibliotecas para lidarem com os problemas de estilos acabarão impulsionando novas features no CSS, assim como ocorreu com o CSS Vars, por exemplo. CSS-in-JS pra mim é animal e conseguir escrever CSS de uma maneira bem mais intuitiva e com menor probabilidade de falhas é fantástico. Porém, assim como muitos devs não sabem programar com JS Vanilla, já que já entram direto no mundo dos frameworks JS (como React), pode ser que o mesmo passará a acontecer com o CSS - ou seja, muitos devs podem acabar entrando direto no mundo do CSS-in-JS, por exemplo, e não conseguir lidar com o CSS Vanilla no futuro. Não sei até que ponto isso pode ser prejudicial, uma vez que há algumas diferenças entre esse mesmo aspecto quando visto do ponto do JS e do CSS separadamente. Mas eu torço para que, num futuro próximo, o CSS evolua ao ponto de não precisarmos mais de tantas bibliotecas para lidar com problemas complexos e antigos. Assim como aconteceu com o jQuery, que tem sido deixado cada vez mais para trás com as novas features do JS. |
Beta Was this translation helpful? Give feedback.
-
|
Tem diversas iniciativas de tooling pra melhorar o CSS, não apenas o CSS in JS, mas hoje em dia existe o PostCSS que é basicamente um babel pra CSS (muito mais poderoso que qualquer pré-processador), você tem plugins para aplicar transformação no seu código, desde de minifiers como o cssnano, uncss pra dead code elimination, autoprefixer pra melhorar o suporte a navegadores sem poluir seus estilos, e até escrever o CSS do futuro com o preset-env. Sobre o escopo do CSS, que é a questão do Cascading, você consegue sanar isso usando o CSS Modules, muita gente fala sobre linting de CSS in JS com Typescript também mas você consegue ter um resultado equivalente e bem mais abrangente com o Stylelint. (ps. dá pra usar stylelint com CSS in JS entretanto). Enfim, dá pra ganhar todas as features de CSS in JS com outros tipos de tooling, sem desviar do jeito clássico de escrever CSS. CSS in JS é uma ferramenta legal, mas tem alguns trade-offs pesados que poucos falam, como ser só aplicado em runtime (com excessão do linaria), CSS não é legível para humanos(um dos motivos de eu adorar a abordagem scoped do Vue, que usa data props nos elementos pra isolação), maior peso no bundle do JS (maior tempo pra first paint da página, já que é usado com SPAs, então é o tempo do browser baixar o JS, parsear, montar o DOM, e aplicar o CSS em runtime), entre outros. Esse artigo fala de alguns, e é do criador do JSS. E na minha opinião, no meio do CSS in JS existe bastante desonestidade intelectual¹ sobre CSS, sendo bem sincero, boa parte do movimento é liderado por pessoas que odeiam CSS com uma paixão enorme. Bem, CSS tradicional não vai morrer, longe disso. ¹ Esse artigo é do criador do styled-components, e não, não é responsabilidade dos componentes possuirem margin, eles devem desconhecer os elementos em volta deles, geralmente é responsabilidade de página (ou componente pai) alinhar os itens, e dá pra fazer em pouquissimas linhas com grid-layout e gap, usando seletores como lobotomized owl (*+*), e pseudo selectors como :nth-of-type(), etc. |
Beta Was this translation helpful? Give feedback.
-
|
CSS não está morrendo; pelo contrário: está mais vivo, mais atual e mais condizente às necessidades de dev modernas do que nunca! O título do artigo "CSS-in-JS e a morte do CSS tradicional" (e a pergunta da própria issue, na verdade) dá entender que existe somente 1 stack de tecnologia possível para todo e qualquer projeto Web... Talvez essa limitação de horizonte de consciência seja o problema. |
Beta Was this translation helpful? Give feedback.
-
|
Ótimo ponto de vista @onlurking ! Sim, existem diversas maneiras de se chegar ao mesmo resultado que temos com as tools baseadas em CSS-in-JS. Mas um ponto positivo que eu vejo é a questão de se ter tudo em um mesmo lugar, sem muita complexidade de configuração, o que com certeza influenciará no desenvolvimento de novas features do CSS, assim como ocorreu (e vem ocorrendo) com o pré-processadores CSS. Sobre os trade-offs, também concordo que é preciso entender bem o propósito de uma ferramenta a fim de analisar se realmente vale a pena a sua utilização e como a usar de maneira correta (afinal, toda ferramenta possui suas vantagens e desvantagens). Por exemplo, muitos dos trade-offs que o CSS-in-JS possui não faz parte de toda library que implementa ele. Então, também é necessário entender, por exemplo, qual é o problema que o Styled Components resolve e se ele é a melhor tool baseada em CSS-in-JS para se utilizar em um projeto específico. Assim como também vale gastar um tempo decidindo se a melhor opção não seria algo utilizando PostCSS ou mesmo CSS vanilla. Acho que esse é um procedimento padrão em nossa área de desenvolvimento (ou pelo menos deveria ser, rss). Essa questão das margins que você citou - e também os Spacer components citados no artigo que você compartilhou - é um bom exemplo de que é preciso entender o funcionando da ferramentas a fim de utilizá-lo da melhor maneira possível, pois o que ocorre muitas vezes é a utilização de maneira incorreta das tecnologias. (Lembra do problema de nesting envolvendo os pré-processadores?) O que eu vejo, na verdade, é que há uma iniciativa de tentar eliminar ao máximo os problemas nativos e antigos das CSS, mas há muito ainda pra acontecer. Vamos aguardar!! hehe |
Beta Was this translation helpful? Give feedback.
-
|
@tarciozemel Obrigado por coloborar com seu feedback, mas sugiro a você gastar um tempinho lendo o corpo da pergunta aqui da issue e também o artigo vinculado nela, pois a discussão vai muito além do título. 😉 Afinal, esse pré-julgamento com base em trechos específicos (ou mesmo apenas nos títulos das notícias) é o que está sendo um dos piores problemas dessa era da informação: as pessoas, talvez na pressa (ou por preguiça) leem apenas uma parte e acham que já são capazes de sair opinando sobre, quando na verdade nem fazem ideia do que se está sendo discutido de fato. |
Beta Was this translation helpful? Give feedback.
-
Eu li o título, o corpo e todas as respostas antes do meu comment. O que invalida toda a sua "resposta". Você fez uma pergunta direta e eu dei uma resposta direta. "CSS tradicional" não está morrendo e que pensa isso tem uma visão bastante limitada. Sem motivos para animosidade. #paz |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Após o boom dos pré-processadores CSS, o CSS-in-JS vem ganhando espaço e mudando a maneira como pensamos as estilizações e escrevemos o CSS por causa do surgimento de frameworks JS baseados em componentes (React, Vue, Angular...). Com isso, gostaria de saber o que você pensa a respeito da questão: O CSS tradicional está morrendo?
A arquitetura nativa do CSS, que faz jus ao seu nome "Cascading Style Sheets", não consegue resolver grande parte dos problemas que enfrentamos hoje para escalar e manter os nossos estilos, tais como: modularidade, especificidade, conflitos de nome de classes, escopo e muito mais. E por conta disso, bibliotecas CSS-in-JS, como a Style Components, se tornou tão popular nesses últimos tempos.
Ou seja, será que a maneira como o Vanilla CSS foi criado não corresponde mais às necessidades atuais e com isso sua morte já está destinada? Ou vocês acreditam que o tradicional CSS ainda tem espaço no mundo do desenvolvimento front-end atual?
Se você ainda não sabe o que é CSS-in-JS ou não está por dentro do que está acontecendo com a evolução do CSS, sugiro fortemente dar uma lida nesse artigo: CSS-in-JS e a morte do CSS tradicional.
Beta Was this translation helpful? Give feedback.
All reactions