CSS in JS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 07 Horas 59 Min 15 Seg Tempo restante da oferta: 07 59 15 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) CSS in JS [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # CSS in JS Veja neste artigo o CSS in JS, a técnica que permite escrever estilos CSS no JavaScript, deixando a aplicação flexível e modularizada. [ Ariel Sardinha ](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) 3 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/CSS-IN-JS.jpg) CSS in JS é uma técnica que consiste em criar estilos [CSS](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css "CSS") em arquivos [JavaScript](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript "JavaScript"), isso permite criar componentes e até telas inteiras de forma mais flexível e modularizada. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/BANNER-AULA-GRATUITA-1700x850-1.jpg) ](https://www.treinaweb.com.br/lp/aula-gratis/) O CSS foi introduzido pela primeira vez em 1996 e, de lá para cá, sua utilização passou por uma série de transformações significativas. Originalmente, o CSS era aplicado diretamente nos elementos, dentro de tags de estilo, e evoluiu com a possibilidade de passar os estilos por meio de links em arquivos CSS externos. Em seguida, vieram os [pré-processadores](https://www.treinaweb.com.br/blog/os-pre-processadores-css "pré-processadores") como Sass, Less, Stylus, entre outros, que ofereceram uma nova dimensão para o CSS. Em 2015 e 2016, os Módulos CSS foram introduzidos, que utilizam um empacotador de módulos como o [Webpack](https://webpack.js.org/ "Webpack") para oferecer a possibilidade de escrever módulos CSS. E, finalmente, chegamos ao CSS in JS, que é uma técnica que veio como resposta aos problemas que surgem ao usar CSS em grande escala. ## Por que usar CSS in JS? Existem muitos motivos que podemos destacar para usar CSS in JS. Os principais motivos que vou destacar são: - **Escopo de componente:** Cada componente tem seu próprio conjunto de estilos aplicados apenas a esse componente. Isso evita conflitos de nomes e sobrescrita de estilos inesperados. - **Estilos Dinâmicos:** Permite que você use lógica JavaScript para alterar estilos com base nos estados, propriedades, etc. - **Remoção de CSS morto:** Como cada componente tem seu próprio estilo, se um componente não estiver sendo usado, seu estilo também não estará. Isso pode ajudar a diminuir o tamanho do código gerado. [ ![Desenvolvedor Especialista React e Next.js](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Formação Desenvolvedor Especialista React e Next.js Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-especialista-react-e-nextjs) ## Como usar CSS in JS ? Existem várias bibliotecas que auxiliam na implementação, como o [styled-components](https://styled-components.com/ "styled-components"), [vue3-styled-components](https://www.npmjs.com/package/vue3-styled-components "vue3-styled-components") e muitas outras. - **styled-components**: permite que você escreva CSS in JS para seus componentes. Os estilos são agrupados com o componente, o que significa que o escopo dos estilos é limitado ao do mesmo e não afeta outros. Porém, é uma biblioteca mais específica para React. Exemplo: ```javascript import styled from 'styled-components'; const Button = styled.button` color: grey; `; ``` - **vue3-styled-components** é uma biblioteca que permite que você use CSS in JS com Vue, similar ao styled-components no React. Exemplo: ```javascript import styled from 'vue3-styled-components'; const Button = styled.button` color: grey; `; ``` ### Processo de instalação no React A maioria das ferramentas que utilizam CSS in JS precisam de poucas configurações para funcionar corretamente. Vamos fazer um exemplo utilizando React. Primeiramente crie um projeto React utilizando o comando: ```bash npx create-react-app my_app_react ``` Logo em seguida, acesse o diretório do projeto que foi criado: ```bash cd .\my_app_react\ ``` Agora basta instalar a biblioteca de CSS in JS de sua preferência, que funcione muito bem no React. Para esse exemplo vamos utilizar o styled-components, então, basta executar o seguinte comando: ```bash npm install styled-components ``` Agora, no arquivo `App.js`, podemos substituir tudo pelo seguinte código: ```javascript import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: #BF4F74; `; const Wrapper = styled.section` padding: 4em; background: papayawhip; `; function App() { return ( Hello World! ); } export default App; ``` Por fim, basta executar o projeto com o seguinte comando: ```bash npm run start ``` ### Processo de instalação no Vue Primeiro, vamos criar um projeto Vue: ```bash npm init vue@latest my_app_vue ``` Nas opções, você pode escolher `No` para todas. ```bash Vue.js - The Progressive JavaScript Framework √ Add TypeScript? ... No / Yes √ Add JSX Support? ... No / Yes √ Add Vue Router for Single Page Application development? ... No / Yes √ Add Pinia for state management? ... No / Yes √ Add Vitest for Unit Testing? ... No / Yes √ Add an End-to-End Testing Solution? » No √ Add ESLint for code quality? ... No / Yes ``` Depois, acesse o diretório do projeto executando o seguinte comando: ```bash cd my_app_vue ``` Agora, basta instalar a biblioteca de CSS in JS de sua preferência, que funcione muito bem com o Vue. Vamos utilizar o vue3-styled-components: ```bash npm install vue3-styled-components ``` Agora, no arquivo `App.vue`, podemos substituir tudo pelo seguinte código: ```javascript import styled from 'vue3-styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: #BF4F74; `; const Wrapper = styled.section` padding: 4em; background: papayawhip; `; Hello World! ``` Por fim, basta executar o projeto com o seguinte comando: ```bash npm run dev ``` Embora o CSS in JS tenha seus benefícios ele também tem algumas desvantagens como, tempo de carregamento mais lento devido ao processamento adicional necessário, uma curva de aprendizado maior e possíveis problemas de compatibilidade com ferramentas e bibliotecas que esperam CSS tradicional. ## Conclusão Em resumo, CSS in JS é uma poderosa técnica moderna para estilização, oferecendo uma maior modularização e capacidade de reutilização. No entanto, como qualquer ferramenta ou técnica, deve ser usada onde faz sentido e as vantagens possam ser balanceadas. Por fim, caso queira aprender mais sobre CSS in JS saiba que aqui na [TreinaWeb](https://www.treinaweb.com.br/ "TreinaWeb") temos um direto ao ponto de [React - Estilização com Emotion (Styled Components)](https://www.treinaweb.com.br/direto-ao-ponto/react-estilizacao-com-emotion-styled-components "React - Estilização com Emotion (Styled Components)") que possui **00h37 de vídeos**. Conheça também nossa formação de [Desenvolvedor Especialista React e Next.js](https://www.treinaweb.com.br/formacao/desenvolvedor-especialista-react-e-nextjs "Desenvolvedor Especialista React e Next.js"). - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #css in js ](https://www.treinaweb.com.br/blog/tag/css-in-js) - [ #css em javascript ](https://www.treinaweb.com.br/blog/tag/css-em-javascript) Autor ![Ariel Sardinha](//secure.gravatar.com/avatar/d0b89ee09026eb2b9e26f286c04eba03?d=mm) ## Ariel Sardinha Professor e desenvolvedor. Formando em engenharia de software e Computação - Licenciatura. É autor de cursos em diversos temas, como, desenvolvimento front-end, Flutter, JavaScript, React,js e Vue.js. Nas horas vagas adora estudar sobre tecnologia, filmes e brincar com a pequena Maria Eduarda. [arielsardinha](https://www.linkedin.com/in/ariel-sardinha/) [Todos os artigos](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/TYPESCRIPT-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Como instalar o TypeScript ](https://www.treinaweb.com.br/blog/como-instalar-o-typescript) Neste artigo veremos como instalar o TypeScript, conhecer o arquivo tsconfig, executar nosso primeiro código no Node.js e no navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071059/browser-pip-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Vídeos Picture-in-Picture com JavaScript ](https://www.treinaweb.com.br/blog/videos-picture-in-picture-com-javascript) Aprenda a usar a API de Picture-in-Picture do HTML5 para exibir vídeos fora do navegador com JavaScript Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/caminhos-certifica--o-400x280.jpg) [ Certificações ](https://www.treinaweb.com.br/blog/categoria/certificacoes) 10 anos atrás ## [ Os caminhos das certificações Microsoft (parte 1) ](https://www.treinaweb.com.br/blog/os-caminhos-das-certificacoes-microsoft-parte-1) Veja como funcionam as trilhas e sub-trilhas de certificação da Microsoft para desenvolvedores. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/29143340/TW-ENTREVISTAS-MAUJOR-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 9 anos atrás ## [ TW Entrevista 01: Maujor ](https://www.treinaweb.com.br/blog/tw-entrevista-01-maujor) Fizemos uma série de entrevistas com desenvolvedores chamada “TW Entrevista”. O primeiro entrevistado é o Maujor, o dinossauro das CSS. Confira! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/HERDANDO-TEMPLATES-JINJA-400x280.png) [ Flask ](https://www.treinaweb.com.br/blog/categoria/flask) 6 anos atrás ## [ Como herdar templates com Jinja2 ](https://www.treinaweb.com.br/blog/como-herdar-templates-com-jinja2) Veja neste artigo como herdar templates utilizando o Jinja2. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/TEMPLATE-ENGINE-PUG-EXPRESS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Express com Template Engine PUG ](https://www.treinaweb.com.br/blog/express-com-template-engine-pug) Neste artigo vamos estruturar um projeto utilizando Express com o Template Engine PUG e entender as suas principais características. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/vs-code-melhores-extensoes-para-front-end-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - Melhores extensões para Front End - Parte 3 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-3) Conheça mais uma lista de extensões do VS Code que ajudarão a melhorar a sua produtividade e facilitar o seu trabalho. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/18175820/RAZOR-COMPONENTS-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 8 anos atrás ## [ .NET Core 3.0 - Criando componentes no Razor Components ](https://www.treinaweb.com.br/blog/net-core-3-0-criando-componentes-no-razor-components) Veja neste artigo como é a estrutura de um componente do Razor Componente e aprenda a criar um. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/08/17172630/desenvolvedor-web-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 8 anos atrás ## [ Quatro habilidades para se tornar um desenvolvedor web back-end ](https://www.treinaweb.com.br/blog/quatro-habilidades-para-se-tornar-um-desenvolvedor-web-back-end) Conheça as habilidades necessárias para se tornar um bom desenvolvedor web back-end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/12/13150804/template-engine-1-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ O que é Template Engine? ](https://www.treinaweb.com.br/blog/o-que-e-template-engine) Veja neste artigo o que é Template Engine e as principais opções do mercado. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/guia-da-linguagem-python-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Guia da linguagem Python ](https://www.treinaweb.com.br/blog/guia-da-linguagem-python) Entenda os principais conceitos para iniciar seus estudos neste guia da linguagem Python. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **07h 59min 15s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58