Introdução ao ITCSS para desenvolvedores da Web

Há um punhado de ótimos métodos para estruturação de código CSS, e todos eles trabalham de maneiras diferentes. Os mais populares são OOCSS e SMACSS, mas há também um método menos conhecido chamado ITCSS (CSS de triângulo invertido) criado por Harry Roberts.

Não é uma biblioteca ou uma estrutura, mas um metodologia de escrever código isso é escalável e fácil de manipular. Os benefícios do ITCSS vão desde organização de código simples para tamanhos de arquivo menores e um maior entendimento da arquitetura CSS.

O ITCSS não é para todos, mas fornece uma maneira profissional de examinar as folhas de estilo com clareza durante o processo de codificação. Vamos nos aprofundar nos conceitos por trás do ITCSS e ver como eles podem ser aplicados a projetos da Web.

O que é o ITCSS??

As formas modernas de organização de CSS costumam recair modularização ou Objetos CSS para construir ideias abstratas.

A nova ideia do CSS do Triângulo Invertido é um maneira em camadas de dividir propriedades CSS com base no seu nível de especificidade e importância. É um método menos conhecido comparado ao SMACSS e OOCSS - embora ambos possam ser combinados com o ITCSS.

Como o ITCSS é principalmente proprietária, Não existe nenhum livro de regras detalhado sobre seu uso. Apenas um conjunto de princípios específicos está à nossa disposição. O autor fala sobre eles no vídeo abaixo.

Por padrão, o ITCSS usa os mesmos princípios do OOCSS, mas com maior separação com base na especificidade. Então, se você já está familiarizado com o OOCSS, considere isso um arquitetura CSS alternativa tentar.

Aqui estão alguns dos maiores benefícios de usar o ITCSS:

• Objetos de página podem ser divididos em seus próprios arquivos CSS / SCSS para reutilização. É simples copiar / colar e estender todos os objetos em outros projetos.
• Profundidade de especificidade é você decide.
• Há nenhuma estrutura de pastas definida, e nenhum uso requerido de ferramentas de pré-processamento.
• Você pode mesclar conceitos de outras metodologias como módulos CSS para crie seu próprio fluxo de trabalho híbrido.

O sistema ITCSS

Vamos dar uma olhada em como o Modelo Triângulo Invertido funciona usando a seguinte ilustração da postagem de Lubos Kmetko.

Um fluxo direcional do topo plano do triângulo invertido até a ponta na parte inferior simboliza aumentar em especificidade. este concentre-se em menos especificidade facilita a reutilização de classes em um site várias vezes.

Cada subseção do triângulo pode ser considerada um arquivo separado ou um grupo de arquivos, embora você não precise escrever código dessa maneira. Faz mais sentido para usuários Sass / Less por causa do recurso de importação. Basta pensar em cada subseção como uma metodologia para dividindo e organizando o código CSS reutilizável.

Vamos dar uma rápida olhada cada seção do triângulo invertido movendo-se de cima para baixo até a ponta.

• Definições - Variáveis ​​e métodos de pré-processador (sem saída real de CSS)
• Ferramentas - Mixins e funções (sem saída CSS real)
• Genérico - Redefinições de CSS, que podem incluir a redefinição de Eric Meyer, Normalize.css ou seu próprio lote de código
• Elementos - Seletores de elemento HTML único sem classes
• Objetos - Classes para estrutura de páginas seguindo tipicamente a metodologia OOCSS
• Componentes - Aesthetic classes para styling any & all page elements (muitas vezes combinados com a estrutura de classes de objetos)
• Trunfos - Os estilos mais específicos para substituir qualquer outra coisa no triângulo

Cada camada do triângulo invertido pode ser ajustado para atender às suas necessidades. Então, se você não usa um pré-processador CSS, não precisará das camadas Configurações ou Ferramentas.

Você deve se sentir livre para interpretar cada subseção como achar melhor. Por exemplo, Jordan Koschei explica como ele combinou estrutura e estética em classes de objetos, deixando muito pouco na seção Componentes..

O ITCSS tem sem regras rígidas que você deve seguir. Não há verificador de conformidade com o ITCSS, e ninguém gritará com você por alterar levemente esse modelo.

Embora o criador do ITCSS, Harry Roberts, estivesse interessado em manter seus métodos proprietários para uso interno, você pode exemplo de código aberto do ITCSS neste repo GitHub. Ele é hospedado pela conta CSS Wizardry, que é o site pessoal de Harry Roberts.

BEM + IT = Nomeação BEMIT

Um dos esquemas de nomenclatura CSS mais populares é o BEM. Isto significa Block-Element-Modifier e segue uma sintaxe muito particular.

Cada elemento no BEM descreve uma convenção de nomenclatura para classes CSS:

• Blocos são classes para elementos individuais que podem ser replicados e independentes.
• Elementos são sempre parte de um bloco
• Modificadores modifique sempre um bloco ou elemento para alterar ligeiramente a sua aparência (ligado / desligado, ativo / inativo, fixo, estático, realçado / neutro).

BEMIT é a convenção de nomenclatura adotado pelo ITCSS, que pega ideias do BEM enquanto implementa novas ideias com o ITCSS.

A sintaxe do BEM determina regras muito específicas. Abaixo está uma amostra do site da BEM:

.formulário  .form - theme-xmas  .form - simples  .form__input  .form__submit  .form__submit - disabled  

Os blocos têm nomes sem separação ou nomes separados por um traço ou um sublinhado. Os elementos usam dois sublinhados e descrevem elementos internos consistentes com esse bloco específico. Os modificadores funcionam da mesma maneira, mas usam dois traços para identificação.

Harry mergulha mais fundo no BEMIT neste post do blog. Sua descrição é muito concisa e mostra que a verdadeira natureza do ITCSS é jogar amigável com outras metodologias CSS.

Harry define namespaces para objetos aparecendo como prefixos para cada nome de classe principal. Eles quebram como o- para objetos, c- para componentes e você- para utilitários (como clearfix ou centralização de texto).

Aqui estão alguns exemplos de código representando convenções de nomenclatura típicas da BEMIT.

  
… 
 
 

Ele também recomenda usar o @ sufixo para classes baseadas em estilos de mídia. Então o .o-media classe pode mudar para .o-media @ lg para telas grandes e .o-media @ md para telas de tamanho médio.

Pessoalmente, acho que os sufixos adicionais são muito complicado para projetos web básicos. Acho que a maioria dos desenvolvedores prefere usar consultas de mídia comuns e reescrever as classes em diferentes pontos de interrupção. Mas eu não posso dizer que qualquer método seja certo ou errado, e qualquer um pode decidir individualmente se eles querem usar o BEMIT ou não.

É altamente recomendável ler este artigo BEMIT de introdução para saber mais sobre por que o BEM estendido do ITCSS e como você pode nomear suas classes CSS.

O ITCSS pode ser resumido como um método organizacional para escrever CSS reutilizável e escalável. BEM é a sintaxe de nomenclatura preferida e BEMIT estende isso para o trabalho com namespaces para código mais específico e reconhecível.

Há muito o que aprender, e se você é novo no CSS, este será um conceito difícil de ser quebrado. Mas se você está disposto a aprender, eu garanto que você ficará surpreso com a natureza elegante do código ITCSS.

Empacotando

Os desenvolvedores front-end estão sempre procurando otimizar seu fluxo de trabalho. O ITCSS é apenas outro método que pode contribuir para um método aprimorado de estruturação de sites complexos.

A dificuldade é aprender como isso funciona no trabalho real do projeto. Se você tem a temeridade e se esforça para aprender, então o ITCSS pode ser algo que vale a pena adicionar ao seu kit de ferramentas. Embora não tenha encontrado nenhuma documentação oficial, ainda há muitos recursos on-line para aprender sobre o ITCSS.

• Gerencie projetos da Web em grande escala com a nova arquitetura CSS ITCSS (creativebloq.com)
• Gerenciando Projetos CSS com o ITCSS - Slides de Apresentação (speakerdeck.com)
• Projetos CSS com o ITCSS (1hr video presentation)
• ITCSS - Uma maneira interessante de organizar projetos de larga escala (css-tricks.com)

(Foto da capa via speakerdeck.com)