CSS, cascata e herança

[felipefialho]

Abri essa issue após resposta do @bernardodiasc (ótima como sempre) nessa issue #358

Faz muito tempo que estamos mudando a forma de trabalhar com CSS, deixando as coisas cada vez mais dentro de escopos para evitar dores de cabeça que podem ser causadas pela herança. Acho isso fantástico, sempre que necessário faço dessa forma.

Mas ao mesmo tempo, gosto muito da maneira que o Atomic CSS trata da estrutura do projeto.

Pois a ideia é justamente tratar da herança no CSS de um jeito inteligente e evitar que a gente crie componentes com moléculas e atomos repetidos, afinal se temos estruturas exatamente igual dentro de componentes diferentes, porque não reutiliza-las e apenas modifica-las se necessário?

Como vocês tem lidado com essa questão nessa coisa cada vez mais complexa, que é o desenvolvimento web atualmente? 👊

[raphaelfabeni]

Eu gosto muito do conceito do Atomic CSS e sempre tentei aplicá-lo no meu dia a dia. No entanto, com a crescente do design responsivo e desenvolvimento independente da plataforma/resolução, comecei a gostar também da idéia de se encapsular as coisas em componentes. Tendo em mente algo como, portar o componente para qualquer área, resolução, planeta e ele se comportar do jeito esperado. Claro que tudo que é em exagero faz mal (ditado da minha mãe), e acho que o meio termo entre ambos pode ser bacana. Mas não acredito em bala de prata, porque tudo vai variar do seu estilo, do seu time, do que se adequa melhor ao projeto, e por aí vai.
🤘

[matheusml]

Cara,

no projeto que estou trabalhando atualmente, resolvi dar uma chance pro CSS Modules.

Até o momento estou gostando bastante. O grande lance é que ele tem todas as vantagens do CSS, porque você escreve em .css, .less, .scss, ou que achar melhor, sem o grande problema do CSS: ser tudo global.

Eu relatei minha experiência nesse post aqui: Organizando uma aplicação com React

Valeu \o/

[furabio]

Quando vou desenvolver um projeto mais robusto faço o uso do conceito do Atomic Design :

- bósons
- átomos
- moléculas
- organismos
- templates
- páginas

E para projetos mais simples/mediano, uso o conceito do ITCSS :

- settings
- tools
- generic
- base
- objects
- components
- trumps

Em ambos aplico a metodologia RSCSS, onde a ideia principal é criar um componente pai, que irá governar os elementos internos a partir do child selector > , tornando assim meu código mais coeso e claro.

[bernardodiasc]

Opa! 😄 😊

Concordo com o @raphaelfabeni, especificamente na parte:

Mas não acredito em bala de prata, porque tudo vai variar do seu estilo, do seu time, do que se adequa melhor ao projeto, e por aí vai.

Aqui tive que repensar muito sobre arquitetura CSS quando percebi o quão comum é desenvolvedores de outras linguagens cutucando CSS. O famoso meme da cortina quebrada comparada ao CSS deixa de ser realista quando se adquire maior proficiência na linguagem. Mas isso não está necessariamente nos planos de todos, cada qual com a sua especialização, certo? Ainda assim vão querer resultados visuais imediatos...

Minha conclusão é que em grandes times, escrever CSS tem que ser fácil, poucas regras fáceis de entender e usar. Por causa disso comecei a focar em aproximar meu setup do CSS puro e ao mesmo tempo usar robôs para manter a ordem e automatizar a aplicação de conceitos.

Vamos lá, muito do que sei aprendi de outras fontes, em especial:

Pausa para agradecimento especial ao CSS Meetup em SP com apresentação do @fernandofleury sobre PostCSS que abriu a mente.

• http://ai.github.io/about-postcss/en/
• http://ai.github.io/postcss-way/
• https://ai.github.io/postcss-isolation/

São keynotes com conteúdo muito similar, mas cada qual com alguns pequenos detalhes diferentes que fazem diferença. Queria ter visto a apresentação desses keynotes, mas estuda-los sem audio foi suficiente.

Meu setup é bem peculiar, aproxima bastante do sugerido pelo Andrey Sitnik, mas com coisas a menos e coisas a mais. Espero encontrar tempo para colocar um demo online e quem sabe um textão, acho que está bem legal, tem sido divertido desenvolver nesse setup.

O melhor de tudo, não é excludente, nesse setup adotamos os conceitos mais relevantes de todos os mundos: ITCSS, BEM, Atomic, OOCSS, etc. Incluindo cascata e herança do CSS... errr, mas não global, esquece global, a vida fica mesmo melhor sem global, também fui resistente a isso - e não é sobre isso que se trata BEM? Com CSS Modules o trabalho de nomenclatura fica para o robô. 😉

[felipefialho]

@furabio Gosto da ideia do RSCSS, e por muito tempo usei algo parecido. Já que não gostava da nomenclatura carregada do BEM e etc.

Mas tem um problema, que com o tempo começou a me incomodar... ela não funciona com >= Organisms.

Imaginemos que eu tenha o organismo... .feature.

CSS

.feature 
  > .title 

HTML

.feature 
  h1.title Teste

Perfeito né?

Mas agora o feature vai ter um .container dentro...

HTML

.feature 
  .feature__container
    h1.title Teste

Já era... vai quebrar tudo.

---

Foi uma das principais motivações para eu estar usando BEM.
Deixa o código mais flexivel.

[fernandofleury]

eu tenho aquela opinião de que a metodologia é a base. eu mesmo diversas vezes me encontrei dentro do atomic usando BEM. O que importa é funcionar pra você, e estar documentado o suficiente pra que as pessoas consigam compreender isso (caso seja um projeto de equipe)