ITCSS - Organizando melhor o CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 11 Horas 52 Min 20 Seg Tempo restante da oferta: 11 52 20 [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) ITCSS - Organizando melhor o CSS [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # ITCSS - Organizando melhor o CSS Você já teve dificuldade com a organização e escalabilidade do seu CSS? Veja como a arquitetura ITCSS pode te ajudar. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/organizando-css.png) Olá, Web Developers! Quem já não teve problemas com a organização do CSS? Ou tentou estilizar um elemento e não funcionou porque já havia uma regra CSS com uma força maior e, no final, teve que criar um seletor mais específico para poder sobrescrever? Tenho certeza que alguns aqui chegam ao momento em que não tem outra saída a não ser utilizar o `!important`. Bom, o *ITCSS* foi pensado para essas coisas. Ele já existe há algum tempo, mas ainda é pouco conhecido. Eu o utilizo em meus projetos desde 2014 e sempre me ajudou muito com a organização do CSS. Ele não é uma biblioteca, framework e nem metodologia como BEM, DRY, OOCSS, etc, que nos indica como montar nossas classes e como nomeá-las. Ele é apenas uma estrutura que, se seguirmos, teremos nossos códigos mais organizados. Podemos inclusive utilizar junto com BEM, DRY, SMACSS, OOCSS, etc. [ ![Django - Templates](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/django.svg) Curso Django - Templates Conhecer o curso ](https://www.treinaweb.com.br/curso/django-templates) ## Como Funciona? O ITCSS, na verdade, é proprietário em sua maioria. Então, apenas uma certa quantidade de regras foram reveladas pelo seu criador. Mas o que foi revelado já é muito útil para nossos projetos. ![](https://dkrn4sk0rn31v.cloudfront.net/2017/04/16204054/vg79g4.jpg) O CSS trabalha com a ideia de que, quanto mais específico for o seletor, maior a sua força. O seletor com mais força sobrescreve o seletor mais fraco. O ITCSS segue isso baseado na ideia do **Triângulo Invertido**. Quanto mais acima do triângulo você estiver, mais fraco será o seletor. Os seletores presentes em uma camada sempre sobrescrevem os seletores da camada de cima. Cada camada serve para colocarmos um tipo específico de código. **1). Settings** É onde declaramos as configurações do nosso projeto, como variáveis de medidas, cores, etc. ```css $my-color: #0057FB; $footer-height: 120px; ``` **2). Tools** Onde colocamos funções, mixins, placeholders, etc. Se não estiver utilizando pré-processadores como Sass ou Less, essa camada não precisa existir. ```css @mixin my-box(){ width: 200px; height: 100px; } ``` **3). Generic** Camada para colocarmos seletores com a menor especificidade. Por isso é normalmente usado para quando queremos usar o seletor `*`. ```css *{ box-sizing: border-box; } ``` **4). Elements** Também chamada de *base*. Essa camada serve para estilizarmos a parte mais básica dos elementos. Nada de IDs nem classes aqui, apenas seletores de elementos. Normalmente utilizada para se fazer o CSS Reset. ```css div{ padding: 10px; } ``` **5). Objects** Usamos apenas classes aqui. É onde começamos a declarar a estrutura dos nossos elementos. ```css .my-button{ width: 200px; padding: 10px; } ``` **6). Components** Aqui também só utilizamos classes. É onde começamos a estilizar os nossos elementos de forma mais específica. ```css .my-red-button{ background-color: red; color: white; border: 2px solid black; } ``` **7). Trumps** É a camada com maior especificidade. Aqui criamos pequenas classes com `!important` para sobrescrever certas regras. ```css .hidden{ display: none !important; } ``` ## Organização dos arquivos Eu costumo utilizar o Sass. Independentemente se você utiliza ou não um pré-processador, é bom que no final todos os arquivos sejam minificados e unidos num único arquivo. Para garantir a organização e a ordem de carregamento, eu costumo utilizar a seguinte estrutura: ``` |__  1_settings |   |__  _example_file.scss |   |__  _1_settings.scss |__  2_tools |   |__  _example_file.scss |   |__  _2_tools.scss |__  3_generic |   |__  _example_file.scss |   |__  _example_file.scss |   |__  _3_generic.scss |__  4_base |   |__  _example_file.scss |   |__  _example_file.scss |   |__  _4_base.scss |__  5_objects |   |__  _example_file.scss |   |__  _example_file.scss |   |__  _5_objects.scss |__  6_components |   |__  _example_file.scss |   |__  _example_file.scss |   |__  _6_components.scss |__  7_trumps |   |__  _example_file.scss |   |__  _example_file.scss |   |__  _example_file.scss |   |__  _example_file.scss |   |__  _7_trumps.scss |__  styles.scss ``` As pastas ficam numeradas apenas para manter a ordem quando formos ver no nosso editor ou IDE. Dentro de cada pasta contém um arquivo principal, com o mesmo nome da pasta. Ele serve para carregar os demais arquivos. Na raiz há o arquivo `styles.scss`, que carrega cada um dos arquivos principais das pastas na ordem que as camadas devem seguir. Esse arquivo nunca será tocado. ```css @import "1_settings/1_settings"; @import "2_tools/2_tools"; @import "3_generic/3_generic"; @import "4_base/4_base"; @import "5_objects/5_objects"; @import "6_components/6_components"; @import "7_trumps/7_trumps"; ``` Caso queira testar, aqui tem um projeto em branco com a estrutura do ITCSS já montada, com Gulp e WebPack configurados: https://github.com/hanashiro/simple-project-seed Ao escrever o CSS somos livres para seguir a metodologia que quisermos: OOCSS, SMACSS, BEM, ACSS, etc. Para saber mais, temos o curso de [HTML5 e CSS3 Avançado](https://www.treinaweb.com.br/curso/desenvolvimento-web-com-html5-e-css3-avancado), onde falamos mais sobre cada uma das metodologias de organização de CSS. [ ![Node.js - Templates com PUG](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/node-js.svg) Curso Node.js - Templates com PUG Conhecer o curso ](https://www.treinaweb.com.br/curso/nodejs-templates-com-pug) [ ![SonarQube - Análise de Qualidade de Código](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/sonarqube.svg) Curso SonarQube - Análise de Qualidade de Código Conhecer o curso ](https://www.treinaweb.com.br/curso/sonarqube-analise-de-qualidade-de-codigo) E você, já conhecia o ITCSS? Utiliza alguma metodologia em seus projetos? Compartilhe com a gente aí nos comentários! - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## 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/2020/08/Micro-Front-End-Microserviços-no-seu-navegador-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 6 anos atrás ## [ Micro Front-End - Microserviços no seu navegador ](https://www.treinaweb.com.br/blog/micro-front-end-microservicos-no-seu-navegador) Entenda o que são Micro Front-ends, como funcionam, suas vantagens e quando você deve escolher esta estratégia para a arquitetura de suas aplicações. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071214/front-end-motion-graphics-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 3 - Animações com mo.js (Motion Graphics) ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-3-animacoes-com-mo-js-motion-graphics) Aprenda a criar animações incríveis e interativas de forma bem simples para a web utilizando o mo.js Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071245/intro-inkscape-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 2 - Trabalhando com Inkscape ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-2-trabalhando-com-inkscape) Aprenda a criar formas e imagens vetoriais em SVG para usar em suas páginas web de maneira bem simples com este tutorial de introdução ao Inkscape. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071147/intro-svg-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 1 ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-1) Aprenda a começar a trabalhar com SVG para a criação de formas e efeitos no Front-End. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/01105921/0-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 7 anos atrás ## [ Como crescer no Front-End? ](https://www.treinaweb.com.br/blog/como-crescer-no-front-end) Veja várias dicas para alavancar a sua carreira como Desenvolvedor Front-End Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/12/16065017/front-back-ou-fullstack-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 8 anos atrás ## [ Devo começar como Front-End, Back-End ou Full Stack? ](https://www.treinaweb.com.br/blog/devo-comecar-como-front-end-back-end-ou-full-stack) Devo começar minha carreira como desenvolvedor Front-End, Back-End ou FullStack? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/front_vs_back-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 10 anos atrás ## [ O que é front-end e back-end? ](https://www.treinaweb.com.br/blog/o-que-e-front-end-e-back-end) Os desenvolvedores de front-end e back-end se completam na maioria dos casos. Se faz indispensável saber o papel que cada um desempenha ou pode desempenhar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/01/WEB-JARS-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ WebJars: Simplifique o gerenciamento de dependências front-end ](https://www.treinaweb.com.br/blog/webjars-simplifique-o-gerenciamento-de-dependencias-front-end) Otimize seu desenvolvimento Java! Descubra como o WebJars simplifica o gerenciamento de dependências front-end. Integre com facilidade e eficiência. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/dicas-projetos-frontend-min-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ 5 ideias de projetos para praticar - front-end ](https://www.treinaweb.com.br/blog/5-ideias-de-projetos-para-praticar-front-end) Confira neste artigo algumas dicas de projetos de front-end, para que você possa praticar e melhorar suas habilidades. 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/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 2 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-2) Veja mais uma lista com as melhores extensões disponíveis do VS Code para Front-End e melhore a eficiência dos seus trabalhos. 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 1 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-1) Conheça as melhores extensões disponíveis do VS Code para Front-End e melhore a eficiência dos seus trabalhos. 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 **11h 52min 20s** - 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