Curso gratuito Vue.js 3 INTRO #14 - Scoped e global CSS

e olha jovem Thiago Matos aqui Nesta aula a gente vai aprender duas formas de trabalhar com CSS junto com vídeo é esse e a segunda é a minha preferida Então vem comigo jovem é um pressa aula Vamos criar um arquivo novo né num componente novo ia ser componente eu vou chamar de base tarde. É bem comum a gente tem componente de tarde né você vai ver aqui eu vou puxar o meu tempo antes vou colocar um ativo vou colocar um texto aqui Lips on perfeito e aqui galera eu vou jogar uma classe E aí essa

componente eu vou injetar aqui no meu componente principal para gente utilizar ele certo vezes tarde pronto você já utilizei emenda é automaticamente em cortou aqui se a sua ideia não fizesse automaticamente você tem que importar e declarar aqui componentes Tá certo eu esqueci até de falar você deve estar se perguntando porque esse arroba aqui cara você poderia fazer dessa forma aqui né como o base Card está dentro de componentes você poderia fazer o caminho relativo. É compõe é isso e base cards aí Se tiver dentro de outra pasta você tinha que tiver que voltar você

vai ter que fazer o caminho relativo paz certo para fazer tudo isso é mas para evitar isso ouviu klea adiciona aí esse a Elias né que é um apelido é um é como se fosse um apelido é como se fosse uma p E o arroba significa que você tá dentro do src né é um caminho curto para chegar lá então algumas alguns desenvolvedores gostam mais de do tio eu acho que o tio também funciona aqui vamos ver o tio não funciona acho que eu tenho não está configurado mas o arroba está configurado Olha lá é

o teu sistema que o tio tá configurado e se eu colocar o caminho relativo como relativo sempre vai funcionar acerta então isso daqui é só a forma curta para você dizer que tá dentro do src é um um atalho Né tava procurando essa palavra atalho para chegar aqui no ssc Mas então a gente criou o componente e agora a gente vai criar o nosso CSS aqui vou criar uma pasta CSS e aqui eu vou dar o nome de estar eu posso CSS o show de bola aqui eu vou declarar o Card E aí vou colocar

background é show aqui uma cor de fundo aqui legal que apareça esse bisqui aqui vou colocar um pezinho de 10 pixels vou colocar o border nails referência faz aí a escassa que você quiser né mas eu coloco os atributos você quiser ir aí a gente vai beleza criei o meu CSS aqui que é o que a gente chama de CSS Global ele vai funcionar para todos os os componentes para toda essa aplicação Tá certo e aqui a gente tem que informar o vídeo e é isso que a gente quer injetar esse CSS aqui dentro é

o que é que a gente faz a gente importa ele aqui importa aí poderia ser ponto Barras essas barras SS/estilo CSS vou salvar aqui ele já vai funcionar automaticamente eu sou a cor até bonitinha sete e da mesma forma galera a gente pode utilizar o arroba aqui sem problema nenhum Tá certo como aqui também poderia usar o arroba é problema eu até prefiro acho mais elegante fica a seu critério Então essa forma do CSS Global a o lado ruim dessa forma é que assim que carregar aplicação esse arquivo CSS vai carregar automaticamente é certo então

assim você pode estar injetando CSS na página sem necessidade porque por exemplo ou você pode não estar utilizando o o Card aqui na página Tá certo não vou não vou adicionar o carro demais aqui a beleza e agora a gente vai ver aqui nos elementos aqui em CSS ele adicionou aqui ó a nossa clássica Então você vai adicionar classe sem muita necessidade enfim essa é a forma global que eu não gosto EA forma local Você já viu eu vou deixar esse Card aqui a forma local é que a gente tem um Opa uma camada aqui

de estilo e aí você ia colocar esse Card aqui deixa eu ser copiado aqui vou comentar esses caras aqui tá e é Opa comentário saiu errado porque que ele não comentou O opa e era para começar aqui if intelecto Não Quer comentar direito então já foi eu tempo para perder não jovem então aqui na verdade ele comentou certo é que o outro lá que tava errado E aí já comeu confundir é CSS JavaScript pega a pele enfim HTML já foi bora bora para frente aí aqui cara ele adicionou CSS no componente Tá certo sem problema

nenhum componente funcionou e meu CSS tá lá no topo beleza mas o problema aqui cara que isso pode entrar em conflito por exemplo se eu tiver ssss está dentro lá do componente né e se eu tiver algo aqui fora e utilizar aquelas cards E olha que vai fazer teste e ele vai pegar essa calça Card certo então ele vai ficar como se fosse Global mas ele está declarado dentro componente como é que a gente resolve isso a aí vem o escopo csss disco cara que é o que a gente vai fazer agora e é muito

difícil muito difícil presta atenção presta atenção porque isso daqui vai estourar sua mente olha só a gente vai passar um parâmetro aqui chamado desculpa e eu vou salvar prontos colposcopia CSS já foi e já funcionou podia somente aí qual é a diferença Tiago lembre-se que a gente colocou aqui fora a mesma classe e ele não pegou agora aqui fora porque porque agora o CSS Está no escopo e os corpo dele só faz parte desse componente Então se a gente abrir aqui a gente vai ver que o GPS adicionou esse data ver e uma numeração é

randômica aí né para poder ele traqueal elemento e ele aplicou essa classe só nessa elemento Olha lá Card e ele puxa aqui o escopo né só vai a ser aplicado nessa lamento por isso que o outro elemento ele não fico Então essa chamado de scripts CSS CSS Desculpa Ou seja só vai funcionar dentro daquele componente e se a gente repetir o componente cara que é que acontece ele vai funcionar e vai inspecionar aqui olha só componente ele tem o mesmo os mesmos porque ele faz parte do mesmo contexto tá lá dentro do componente mas o

fora do componente você pode utilizar o Card que ele mesmo assim ele não vai funcionar não vai ser aplicado a sua classe Tá certo então prefira sempre utilizar os componentes CSS dentro do componente para você ter tudo é todo no mesmo local Tá certo tudo fazendo parte do componente não fazendo parte da sua aplicação inteira Então é isso cara acha que ficou muito claro e eu tenho certeza que somente aí fervilhou de alegria vem comigo que eu te espero na próxima aula foi um [Música] E aí E aí [Música]