Introdução
Creio que todo desenvolvedor seja back-end ou front-end tem aquele "receio" de mexer com o CSS. Faz uma estilização em uma parte específica da aplicação e os estilos adicionados acabam "vazando" para outros elementos. As classnames em CSS são altamente utilizadas para poder separar a estilização e também utilizada como seletor e muita das vezes não tomamos o cuidado necessário ao escolher nomes semâticos para nossas classes, que consequentemente podem ocorrer esse "vazamento" de estilos.
O modelo BEM
Este modelo BEM, vejo como sendo bem importante na separação de pequenas partes da aplicação em componentes. Sendo assim, quando pensamos em componentes, temos aquela ideia de algo que faz parte de um contexto específico e que pode ser dinâmico. Nesse modelo a letra B significa "Block", a letra E significa "Element" e por último temos a letra M que significa "Modifiers". Para ficar mais claro, vamos partir para o código e ver como isso se aplica na prática.
Aplicação demo
A aplicação que será utilizada contém apenas um textfield para simplificar. As tecnologias utilizadas são: React, Typescript e node-sass. Temos um simples componente de TextField. Analisando este componente, podemos perceber que ele já é um bloco, ou seja...
Link do post original: https://andersonnsilva.site/post/boas-praticas-na-nomeacao-de-classname-no-css
Top comments (0)