CSS Modules

[felipefialho]

Fala pessoas, tenho lido alguns artigos no CSS Tricks sobre uma técnica chamada CSS Modules.

Inclusive vão começar com uma série sobre o assunto. O primeiro artigo chama What are CSS Modules and why do we need them?.

Basicamente usa-se JavaScript para criar escopos únicos de CSS (tanto no HTML quanto no CSS em sí).

Alguém conhece ou já tentou fazer algo do tipo?

[icaromh]

Não conheço, mas sei que o Instagram faz algum tipo de uglify nas classes deles e provê módulos.

<style type="text/css" data-isostyle-id="is5d373b86">/**
 * @providesModule ExploreIcon
 */

._bddja {
}
</style>

Será que é uma tecnica parecida? Ou só algum plugin do Webpack?

[kazzkiq]

Não sei se conta exatamente como CSS Modules, mas já tive uma certa experiência com esse tipo de abordagem trabalhando com GWT (Projeto que permite compilar código Java para JavaScript/HTML). Por padrão, este framework também usava um esquema parecido para "ofuscar" o nome das classes.

Eles possuíam uma Interface chamada CssResource, que permitia usar o CSS criado por lá de forma mais dinâmica (imagine algo no estilo PostCSS). Inserindo, modificando e mesclando classes e propriedades CSS diretamente no código Java. A ideia era até boa, mas a forma como foi implementada tirava demais a produtividade dos devs.

Só pra ter uma ideia. Toda classe CSS que você escrevesse, caso não tivesse uma flag @external, iria renderizar nomes totalmente ofuscados em produção. Exemplo:

.minha-classe {
    color: red;
}

@external outra-classe;
.outra-classe {
    color: blue;
}

Output:

/* Sem @external, ofuscada */
.A84JD9W2D {
    color: red;
}

/* Com @external, não ofusca */
.outra-classe {
    color: blue;
}

Não é atoa que muita gente preferia desabilitar essa funcionalidade em troca de mais produtividade nos projetos.

Mas voltando ao tópico principal, ao meu ver o problema é que classes ofuscadas são difíceis de debugar. Você quer bater o olho no DOM e saber exatamente qual é aquele elemento e qual classe ele está utilizando no seu código fonte. Você pode até argumentar que ainda dá pra debugar usando Sourcemaps e tal, mas na prática vai estar apenas adicionando mais um passo no seu debug e uma barreira extra na sua produtividade.

Fora isso eu acho os argumentos dessa abordagem muito fracos. O objetivo é prevenir conflitos entre os nomes? BEM, RSCSS e Scoped CSS são algumas das várias soluções disponíveis para este problema. Na minha opinião, se você possui muitos conflitos de classes em um projeto, o problema está muito mais na arquitetura ou nos devs responsáveis, do que do fato de ofuscar ou não suas classes.

Por conta disso tudo, e com base nos meus quase dois anos de sangue, suor e lagrimas tendo que escrever CSS em projetos GWT, na minha opinião não vale nem um pouco a pena usar este tipo de metodologia.

Enfim, meus two cents. (em forma de textão) 😄

[fernahh]

Eu escrevi um post no início do ano sobre componentes CSS, onde eu falo sobre CSS Modules. Acho que o primeiro ponto é: CSS Modules não depende de JavaScript, ele depende de uma tarefa de build, assim como temos quando usamos pré-processadores.

Uma das vantagens dessa abordagem em relação aos pré-processadores, é justamente isolar estilo com o componente JavaScript. No caso do Instagram, citado pelo @icaromh, provavelmente eles usam algo parecido ou Inline Styles. O React incoraja isso. Usando BEM, SMACSS ou qualquer outra metodologia de escrita é muito frágil e totalmente burlável, tanto pelos desenvolvedores quanto pela própria herança do CSS.

O segundo ponto é que, assim como transpiladores JavaScript, não vejo como um problema usar sourcemaps. Caso contrário dependeríamos da atualização dos browsers pra utilizar novas tecnologias em produção.

@kazzkiq Nunca usei CssResource (graças a deus, heuahieha), mas acho que tem uma diferença gigante entre ele e CSS Modules, quando o primeiro é Java, o segundo é CSS . :)

[felipefialho]

Carario @kazzkiq que coisa maluca.

@fernahh Ja chegou a usar em projetos reais?

[fernahh]

@felipefialho Estou usando. Mas acho que é preciso de um pouco mais de tempo pra saber se há um grande ganho com eles, que na minha opinião, é escalabidade.

[felipefialho]

Vai postando suas impressões, e possíveis problemas =)

Também tenho esse sonho, haha.

[bernardodiasc]

Vi isso aqui hoje https://github.com/joshwnj/cmify, parece legal. Ainda não usei, mas poder injetar CSS Modules em templates no server, tipo Jade por exemplo, soa uma ótima ideia.

@fernahh voce comentou que não precisa de JS pra usar CSS Modules, não entendi direito isso. Como exatamente você compila e inclui as classes no seu template? Vlw!

[fernahh]

@bernardodiasc Eu quis dizer que você não precisa de JavaScript no cliente pra fazer load do CSS gerado pelo CSS Modules. E sim, o "compilador" é escrito em JavaScript, mas poderia ser feito em qualquer outra linguagem. O template pode ser injetado através do Webpack, mas você pode entregar isso através do servidor. :)

[bernardodiasc]

Ah! Boa, saquei. Realmente o Webpack vai bem além de componentes React. :)