Aqui na Alice, n\u00f3s usamos o Vue<\/a> e durante algumas semanas no nosso chapter de frontend, discutimos qual seria o padr\u00e3o que ir\u00edamos adotar. Antes de tomar uma decis\u00e3o, n\u00f3s testamos as op\u00e7\u00f5es mais comuns e algumas obscuras que a comunidade ainda n\u00e3o est\u00e1 usando tanto. Como o nosso chapter de frontends n\u00e3o \u00e9 muito grande, \u00e9 importante para n\u00f3s termos um padr\u00e3o bem definido {j\u00e1 que cada pessoa est\u00e1 em um time diferente}<\/em> e que seja f\u00e1cil para quem n\u00e3o trabalha com frontend {j\u00e1 que nem todo time tem algu\u00e9m com esse\u00a0foco}<\/em>.<\/p>\n No decorrer desse artigo, junto com os pontos que levantamos, tem algumas implementa\u00e7\u00f5es b\u00e1sicas de um componente de bot\u00e3o {que chamei ele de base-button}<\/em> que tem algumas propriedades: tamanho<\/em>, \u00edcone<\/em> e loading <\/em>que s\u00e3o as respons\u00e1veis por mudar o comportamento\/CSS.<\/p>\n Ent\u00e3o aperte o cinto que vamos seguir numa jornada do que n\u00f3s encontramos em cada uma das possibilidades \u2728<\/p>\n Para quem nunca trabalhou com o Vue antes, \u00e9 poss\u00edvel criar componentes usando arquivos\u00a0.vue<\/em>, que possuem o HTML dentro do <template>, o JS dentro de <script> e o CSS dentro de\u00a0<style>.<\/p>\n Focando no assunto desse post, na parte de CSS n\u00f3s temos algumas alternativas: escrever o CSS puro {assim como vemos da linha 16 a 18}<\/em>, ou escrever com algum pr\u00e9-processador.<\/p>\n Escolhendo a segunda o op\u00e7\u00e3o, tudo que n\u00f3s precisamos fazer \u00e9 adicionar um atributo lang<\/em> na linha 15 com o nome da “linguagem”<\/em> que queremos {Aqui na Alice n\u00f3s usamos o <\/em>SASS<\/em><\/a> com a sintaxe scss, ent\u00e3o a maioria dos exemplos daqui pra frente ter\u00e3o o CSS escrito dessa\u00a0forma}<\/em>.<\/p>\n Sabendo disso vamos come\u00e7ar falando de uma das nossas op\u00e7\u00f5es de escrever CSS, que n\u00e3o depende de estar usando ou n\u00e3o um pr\u00e9-processador:<\/p>\n Acredito que essa seja uma das formas mais comum de escrever CSS. Por ser uma metodologia, n\u00e3o tem grandes segredos, mas n\u00e3o significa que seja f\u00e1cil. Pensar no nome das coisas provavelmente \u00e9 a parte mais dif\u00edcil do desenvolvimento de software {risos}<\/em>, e com o BEM<\/a> \u00e9 preciso pensar com carinho no nome das classes para que a estrutura fa\u00e7a\u00a0sentido.<\/p>\n Para quem nunca trabalhou com a metodologia antes, vamos a uma explica\u00e7\u00e3o r\u00e1pida:<\/p>\n N\u00f3s basicamente dividimos uma classe em tr\u00eas\u00a0peda\u00e7os:<\/p>\n Isso significa que em uma classe eu posso ter dois elements<\/em>? Ou dois modifiers<\/em>? N\u00e3o. A estrutura do BEM espera que voc\u00ea tenha um de cada, por isso para pessoas que n\u00e3o est\u00e3o familiarizadas com a metologia, pode ser bem confuso como criar uma classe nova. {<\/em>Nesse artigo<\/em><\/a> tem uma explica\u00e7\u00e3o detalhada do uso do BEM e erros comuns, vale a leitura!}<\/em><\/p>\n De qualquer forma, se usado corretamente v\u00e1rios problemas de CSS s\u00e3o resolvidos, al\u00e9m de termos uma boa organiza\u00e7\u00e3o.<\/p>\n\n Agora vamos para a aplica\u00e7\u00e3o dessa metologia no\u00a0Vue.<\/p>\n Come\u00e7ando pelas linhas 4, 5, 6, 7\u200a\u2014\u200aaqui n\u00f3s temos classes condicionais baseadas em alguns atributos {que no nosso exemplo s\u00e3o props declaradas nas linhas 28 e 29}<\/em>, uma coisa que podemos ver \u00e9 que por serem condicionais, usamos o modifier<\/em> para alterar visualmente o layout de cada uma delas {j\u00e1 que elas representam um estado do nosso\u00a0bot\u00e3o}<\/em>.<\/p>\n Na linha 12, temos uma classe com um element<\/em>, pois esse componente de icone representa um elemento no nosso bloco {que nesse exemplo \u00e9 o\u00a0bot\u00e3o}<\/em>.<\/p>\n Por fim, na linha 34 temos a declara\u00e7\u00e3o da lang, que como \u00e9 importante dizer que s\u00f3 vai funcionar se o projeto est\u00e1 preparado para o pr\u00e9-processador declarado. Se voc\u00ea come\u00e7ar um projeto usando o Vue CLI<\/a> \u00e9 uma das coisas que voc\u00ea pode ou n\u00e3o escolher. Se voc\u00ea quiser mudar o lang, na documenta\u00e7\u00e3o do Vue<\/a> tem um passo-a-passo.<\/p>\n Voc\u00ea pode se perguntar: por qu\u00ea exatamente eu preciso do BEM? N\u00e3o \u00e9 s\u00f3 sair espalhando minhas classes por ai e tudo\u00a0bem?<\/p>\n Conforme voc\u00ea vai escrevendo o seu CSS, no final das contas o Vue vai pegar o CSS de todos os componentes sendo usados naquela p\u00e1gina e jogar ele no <head>. O que significa que qualquer componente vai ser afetado por qualquer regra definida em um componente. O BEM tenta resolver isso tendo classes especificas que n\u00e3o v\u00e3o afetar outro componente t\u00e3o facilmente.<\/p>\nMas antes, uma leve introdu\u00e7\u00e3o ao vue\u00a0file<\/h2>\n
BEM<\/h3>\n
![\"\"](\"https:\/\/cdn-images-1.medium.com\/max\/670\/1*2obrsDtnpAfExJALr3ROpQ.png\")
\n
Scoped CSS<\/h3>\n