Olá Rafael!
De fato usar a app vtex.css-handles
ou usar CSS modules quando criando um componente novo vai te dar resultados praticamente iguais. As vantagens de se usar CSS Handles são relacionadas a facilidade em lidar com modificadores de classe, como a prop blockClass
, que todos os blocos suportam, e valores dinâmicos usando a função applyModifiers
. Se você usar CSS modules, vai precisar suportar esses modificadores por conta, sendo que a app já lida com eles pra você.
CSS Handles também foi uma forma mais declarativa de definir as classes css que consideramos API dos componentes no SF. Pra você saber facilmente quais os handles que estão disponíveis pra um dado componente/bloco, basta olhar o array de handles que ele definine. Outra coisa, como a app inteira vtex.css-handles
está em TypeScript, quando você está desenvolvendo um componente usando os hooks que ela exporta, sua IDE vai te ajudar, porque ela vai saber o tipo do retorno de useCssHandles
.
Outro caso de uso que pode ficar complicado sem usar o vtex.css-handles
. Quando você cria um componente React que vai estar em um app vendor.app1
, mas importa e renderiza um componente que vem de outra app vendor.app2
. Nesse caso, como você espera que os seletores renderizados dentro do componente da app 2 sejam? Com o contexto e o hook de vtex.css-handles
, você que escolhe .
E por fim, uma vantagem que nos levou a considerar CSS Handles como parte da API dos nossos componentes, e sempre incentivar todo mundo a colocar handles em todas as tags HTML dentro de um componente, é que esses handles são imutáveis. E com eles conseguimos evitar que você tenha que escrever CSS no tema da loja usando seletores que estão atrelados à estrutura do HTML. Assim, mudar uma <div>
pra um <span>
por exemplo, não é uma breaking-change, porque a API de CSS Handles do componente continuaria a mesma.