{"id":9853,"date":"2016-05-04T16:00:46","date_gmt":"2016-05-04T19:00:46","guid":{"rendered":"https:\/\/king.host\/blog\/?p=9853"},"modified":"2025-07-30T15:42:43","modified_gmt":"2025-07-30T18:42:43","slug":"css-modules-usando-css-de-maneira-eficaz-em-escala","status":"publish","type":"post","link":"https:\/\/king.host\/blog\/tecnologia\/css-modules-usando-css-de-maneira-eficaz-em-escala\/","title":{"rendered":"CSS Modules: como usar CSS de maneira eficaz em escala"},"content":{"rendered":"<p><strong>CSS Modules \u00e9 uma t\u00e9cnica usada para estilizar componentes de forma modular e com escopo local em projetos JavaScript.<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Em um cen\u00e1rio de desenvolvimento front-end cada vez mais din\u00e2mico, gerenciar estilos CSS em aplica\u00e7\u00f5es de grande porte tornou-se um desafio.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Nomes de classes conflitantes, heran\u00e7as indesejadas e dificuldade de manuten\u00e7\u00e3o s\u00e3o problemas comuns quando crescemos a base de c\u00f3digo.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00c9 a\u00ed que CSS Modules entra em cena, oferecendo uma abordagem modular, encapsulada e previs\u00edvel para escrever CSS em projetos JavaScript modernos.<\/span><\/p>\n<h2>Mas afinal, o que \u00e9 CSS Modules?<\/h2>\n<p>Segundo a documenta\u00e7\u00e3o dispon\u00edvel no reposit\u00f3rio oficial no github: s\u00e3o arquivos CSS nos quais todos os nomes de classes e anima\u00e7\u00f5es s\u00e3o carregados em escopo local por padr\u00e3o.<\/p>\n<p><span style=\"font-weight: 400;\">Em vez de aplicar tudo no escopo global\u2014onde .btn em um componente pode sobrescrever .btn em outro \u2014 os CSS Modules geram nomes de classe \u00fanicos em tempo de build, garantindo:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Escopo isolado: <\/b><span style=\"font-weight: 400;\">estilos aplicados a um componente n\u00e3o \u201cvazam\u201d para outros;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Nomea\u00e7\u00e3o autom\u00e1tica:<\/b><span style=\"font-weight: 400;\"> um hash \u00e9 gerado para garantir unicidade;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Manuten\u00e7\u00e3o facilitada: <\/b><span style=\"font-weight: 400;\">sem preocupa\u00e7\u00e3o com nomenclatura de classes globais.<\/span><\/li>\n<\/ul>\n<p><b>A ideia \u00e9 simples:<\/b><span style=\"font-weight: 400;\"> toda classe ou ID exportado em um arquivo .module.css vira uma propriedade de um objeto JavaScript, permitindo importar e aplicar diretamente no JSX ou template.<\/span><\/p>\n<p><b>Leia tamb\u00e9m: <\/b><a href=\"https:\/\/king.host\/blog\/tecnologia\/o-que-e-javascript-e-para-que-ele-serve\/\" target=\"_blank\" rel=\"noopener\"><b><i>O Que \u00c9 JavaScript E Para Que Ele Serve?<\/i><\/b><\/a><\/p>\n<h2><span style=\"font-weight: 400;\">Como funciona na pr\u00e1tica?<\/span><\/h2>\n<p>Como voc\u00ea viu, css-modules \u00e9 um processo que ocorre durante o passo de build, que altera os nomes de classes e seletores para que tenham um escopo local. Para entender melhor, poder\u00edamos tra\u00e7ar um paralelo com os namespaces.<\/p>\n<p>Ent\u00e3o para entendermos na pr\u00e1tica como o css-modules pode nos ajudar, vamos relembrar como o css funciona de maneira nativa:<\/p>\n<pre class=\"show-plain:1 trim-code-tag:false lang:xhtml decode:true \">&lt;div class=\u201dbg\u201d&gt;Teste&lt;\/div&gt;<\/pre>\n<p>N\u00f3s determinamos uma classe para o elemento e ap\u00f3s inserimos o estilo no aquivo css.<\/p>\n<pre class=\"lang:css decode:true EnlighterJSRAW\">.bg\n{\n    background-color: blue;\n}<\/pre>\n<p>Com apenas isso, definimos que em qualquer arquivo html, em que a tabela de estilos esteja inclu\u00edda, todos os elementos com a classe bg ter\u00e3o um plano de fundo azul. Sendo este estilo global, se alterarmos algo nele, a altera\u00e7\u00e3o afetar\u00e1 todos os elementos com a classe bg.<\/p>\n<p>O css-modules funciona de maneira diferente. Nele, \u00e9 preciso escrever toda a estrutura em um arquivo JavaScript como no exemplo a baixo:<\/p>\n<pre class=\"expand-toggle:false decode-attributes:false trim-whitespace:false trim-code-tag:false show_mixed:false lang:default decode:true EnlighterJSRAW \">import styles from \".\/styles.css\";\n\nelement.innerHTML =\n'&lt;h1 class=\"${styles.title}\"&gt;\nAn example heading\n&lt;\/h1&gt;';<\/pre>\n<p>Assim, quando houver a compila\u00e7\u00e3o, o compilador ir\u00e1 procurar no arquivo importado styles.css e no JavasCript para tornar .title acess\u00edvel atrav\u00e9s de styles.title, gerando assim um novo arquivo HTML e CSS. Como no exemplo abaixo:<\/p>\n<pre class=\"decode-attributes:false trim-whitespace:false trim-code-tag:false lang:default decode:true EnlighterJSRAW\">&lt;h1 class=\"_styles__title_309571057\"&gt;\nAn example heading\n&lt;\/h1&gt;<\/pre>\n<pre class=\"expand-toggle:false decode-attributes:false trim-whitespace:false trim-code-tag:false mixed:false show_mixed:false lang:css decode:true EnlighterJSRAW\">._styles__title_309571057\n{\n  background-color: red;\n}<\/pre>\n<p>Pode parecer um pouco confuso ou at\u00e9 desnecess\u00e1rio, mas\u2026<\/p>\n<h2>Por que usar CSS Modules?<\/h2>\n<p>Voc\u00ea j\u00e1 foi obrigado, por falta de tempo, a escrever o CSS o mais r\u00e1pido poss\u00edvel? J\u00e1 se deparou com estilos os quais n\u00e3o sabia exatamente para que serviam ou se estavam sendo usados?<\/p>\n<p>J\u00e1 se perguntou se voc\u00ea poderia se livrar de alguns estilos sem quebrar completamente todo o layout de sua aplica\u00e7\u00e3o? Voc\u00ea j\u00e1 se perguntou se os estilos dependiam de algo externo ou se eram mantidos por si pr\u00f3prios? J\u00e1 sobrescreveu um estilo sem ter esse prop\u00f3sito?<\/p>\n<p>Como o CSS modules utiliza escopo local, todos esses problemas s\u00e3o evitados. Al\u00e9m disso, ele confere a possibilidade de criar uma depend\u00eancia completa e de maneira expl\u00edcita. Como no exemplo abaixo:<\/p>\n<p class=\"expand-toggle:false decode-attributes:false trim-whitespace:false trim-code-tag:false mixed:false show_mixed:false lang:css decode:true EnlighterJSRAW \">composes: dark-red from &#8220;.\/colors.css&#8221;; font-size: 30px; line-height: 1.2;<\/p>\n<p><b>Leia tamb\u00e9m: <\/b><a href=\"https:\/\/king.host\/blog\/tecnologia\/bibliotecas-javascript\/\" target=\"_blank\" rel=\"noopener\"><b><i>10 Melhores Bibliotecas JavaScript<\/i><\/b><\/a><\/p>\n<h2 class=\"expand-toggle:false decode-attributes:false trim-whitespace:false trim-code-tag:false mixed:false show_mixed:false lang:css decode:true EnlighterJSRAW \"><span style=\"font-weight: 400;\">Boas pr\u00e1ticas de CSS Modules<\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Nomeie arquivos como <\/span><span style=\"font-weight: 400;\">*.module.css<\/span><span style=\"font-weight: 400;\"> para identifica\u00e7\u00e3o autom\u00e1tica.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Prefira nomenclatura clara: <\/span><span style=\"font-weight: 400;\">Header.module.css<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">Button.module.css<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use camelCase em JavaScript (styles.cardHeader) e kebab-case no CSS se preferir (.card-header).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mantenha o escopo pequeno: um m\u00f3dulo por componente ou por conjunto de componentes intimamente relacionados.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Evite usar <span style=\"font-weight: 400;\">:global<\/span><span style=\"font-weight: 400;\"> sem necessidade; abuse dos m\u00f3dulos locais.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Conclus\u00e3o<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">CSS Modules oferece uma solu\u00e7\u00e3o simples e interessante para o eterno problema de escopo e manuten\u00e7\u00e3o de estilos em aplica\u00e7\u00f5es modernas.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Com suporte nativo em CRA e Next.js, al\u00e9m de f\u00e1cil configura\u00e7\u00e3o em Webpack, eles permitem criar interfaces escal\u00e1veis, reduzir bugs de CSS e acelerar o desenvolvimento em equipe.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Se voc\u00ea \u00e9 uma pessoa desenvolvedora, experimente adotar CSS Modules em seu pr\u00f3ximo projeto e comprove a melhoria na organiza\u00e7\u00e3o do c\u00f3digo.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Na <a href=\"https:\/\/king.host\/?utm_source=lab&amp;utm_medium=texto-artigo&amp;utm_campaign=texto-artigo-css-modules-usando-css-de-maneira-eficaz-em-escala\" target=\"_blank\" rel=\"noopener\"><strong>KingHost<\/strong><\/a>, oferecemos infraestrutura confi\u00e1vel para hospedar suas aplica\u00e7\u00f5es JavaScript e garantir alta performance, esteja voc\u00ea trabalhando com React, Next.js ou outro framework moderno.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Modules \u00e9 uma t\u00e9cnica usada para estilizar componentes de forma modular e com escopo local em projetos JavaScript. Em um cen\u00e1rio de desenvolvimento front-end cada vez mais din\u00e2mico, gerenciar estilos CSS em aplica\u00e7\u00f5es de grande porte tornou-se um desafio.\u00a0 Nomes de classes conflitantes, heran\u00e7as indesejadas e dificuldade de manuten\u00e7\u00e3o s\u00e3o problemas comuns quando crescemos [&hellip;]<\/p>\n","protected":false},"author":274,"featured_media":41971,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1179,8],"tags":[1368,1376],"class_list":["post-9853","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-tecnologia","tag-css","tag-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/9853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/users\/274"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=9853"}],"version-history":[{"count":2,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/9853\/revisions"}],"predecessor-version":[{"id":41972,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/9853\/revisions\/41972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/41971"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=9853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=9853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=9853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}