Compreender as metodologias de escrita CSS

Neste post vamos ver quais metodologias de escrita CSS são, algumas metodologias bem conhecidas e como elas podem ser úteis para otimizar nosso código CSS. Vamos começar com a pergunta mais simples para fazer a bola rolar. O que é uma metodologia??

Uma metodologia é um sistema de métodos. Pense em um método como simplesmente uma maneira de fazer algo de uma maneira sistemática, em uma certa maneira predefinida de fazer as coisas para alcançar o resultado que queremos.

Para obter melhores resultados, nós melhoramos nossos métodos planejando-os melhor, alterando o pedido, simplificando as etapas - o que quer que funcione Mais rápido e é mais eficiente.

Metodologia CSS

Agora vamos falar sobre a metodologia CSS. Assim como com quase tudo na vida, temos um método de escrever CSS também: alguns escrevem reset CSS primeiro, alguns estilos de layout de lugar por último, alguns começam com duas ou três classes para estilizar um elemento, alguns escrevem todos os códigos CSS em um único arquivo.

Nossos métodos preferidos foram estabelecidos por conta própria ao longo do tempo ou influenciados por outros ou necessários em nosso local de trabalho ou devido a todos os itens acima. Mas com o tempo, os veteranos do CSS têm formulado metodologias para escrever CSS que são mais flexível, definido, reutilizável, compreensível e administrável.

Vamos olhar para essas metodologias formuladas, que incluirão:

OOCSS (Object Oriented CSS)
BEM (bloco, elemento, modificador)
ACSS (Atomic CSS)
SMACSS (arquitetura escalável e modular para CSS)

Nota: Nenhum dos conceitos mencionados abaixo deve ser confundido com qualquer framework, biblioteca ou ferramenta que possa ter o mesmo nome e conceito que essas metodologias. Este post é apenas sobre as metodologias para escrever CSS.

1. OOCSS

Desenvolvido por Nicole Sullivan em 2008, os principais conceitos do OOCSS (Object Oriented CSS) incluem CSS objeto identificação, separação de estrutura e estilos visuais, e evitar estilos baseados em localização.

No OOCSS, o primeiro passo que Nicole propõe é fazer identificar objetos em CSS.

“Basicamente, um "objeto" de CSS é um padrão visual repetitivo, que pode ser abstraído em um fragmento independente de HTML, CSS e possivelmente JavaScript. Esse objeto pode ser reutilizado em todo o site. - Nicole Sullivan, Github (OOCSS)“

Tomemos por exemplo esta estrutura deste site. Aqui está algo que é um padrão visual repetitivo e tem seu próprio HTML e / ou CSS independente:

Temos aqui dois tipos de objetos, uma prévia maior de títulos que nomearemos pós-pré-visualização-primária e uma barra lateral com títulos que vamos nomear pós-pré-visualização-secundária.

Nós precisamos estrutura separada e pele (ou seja, estilos que criam a aparência dos objetos). Os dois tipos de objetos têm estruturas diferentes, um está em uma caixa maior, embora pareçam semelhantes, com imagens à esquerda e títulos à direita.

Vamos dar as imagens de ambos os objetos uma classe post-preview-image e adicione o código que coloca a imagem à esquerda. Isso nos impede de ter que repetir o código de onde colocar a imagem dentro de objetos em CSS. Se houver outros objetos semelhantes, nós reutilizamos post-preview-image para eles.

A separação da pele também pode ser feita para estilos mais simples, como bordas ou fundos. Se você tiver vários objetos com a mesma borda azul, criando uma classe separada para a borda azul e adicioná-lo aos objetos reduzir o número de vezes que as bordas azuis devem ser codificadas em CSS.

Nicole também sugere não adicionar estilos com base na localização, Por exemplo, em vez de segmentar todos os links dentro de um determinado div para realçar, dê a esses links highlighter class com os estilos CSS apropriados. Dessa forma, quando precisar destacar um link em outra parte da página, você poderá reutilizar a classe de marcadores.

Prós do OOCSS: Códigos de estilo visual reutilizáveis, códigos flexíveis de localização, redução em seletores aninhados em profundidade.

Contras de OOCSS: Sem uma quantidade razoável de padrões visuais repetitivos, a separação de códigos de estrutura e estilo visual parece desnecessária.

2. BEM

Desenvolvido por desenvolvedores da Yandex em 2009, os principais conceitos para BEM (Block, Element, Modifier) englobam a identificação quadra, elemento E modificador e nomeando-os de acordo.

UMA “quadra” é essencialmente o mesmo que um “objeto”(do exemplo anterior), um “elemento” refere-se aos componentes do bloco (imagem, título, texto de pré-visualização no postagem anterior- objetos). UMA “modificador” pode ser usado quando o estado de um bloco ou elemento é alterado, por exemplo, quando você adiciona uma classe ativa a um item de menu para realçá-la, a classe ativa atua como seu modificador.

Depois de identificar os componentes, nomeie-os de acordo. Por exemplo:

um bloco de menu terá a classe cardápio
seus itens terão a classe item do menu (bloco e elemento são separados por sublinhado duplo)
o modificador para o estado desativado do menu pode ter a classe menu_disabled (modificador delimitado por um único sublinhado)
modificador para o estado desativado de um item de menu pode ser menu__item_disabled.

Para modificadores, também podemos usar valor chave formato para nomear. Por exemplo, para distinguir quaisquer itens de menu que apontam para artigos obsoletos, podemos dar-lhes a classe menu__item_status_obsolete, e para estilizar qualquer item de menu que aponte para documentos pendentes, o nome da classe pode ser menu__item_status_pending.

A nomenclatura pode ser modificada para o que funciona para você. A ideia é poder identificar, blocos, elementos e modificadores dos nomes de classes. Confira alguns dos sistemas de nomes listados no site do BEM.

O site do BEM também lista como a segregação de blocos, elementos e modificadores também pode ser trazida para o sistema de arquivos CSS. Os blocos gostam “botões” e “insumos” podem ter suas próprias pastas consistindo dos arquivos (.css, .js) associados a esses blocos, o que facilita as coisas quando queremos importar esses blocos em outros projetos.

Prós de BEM:Fácil de usar nomes de classe e redução em seletores CSS profundos.

Contras do BEM:Para manter os nomes sadios, o BEM aconselha que mantenhamos o aninhamento do bloco no elemento.

3. ACSS

Tornada famosa pelo Yahoo, em algum lugar perto do final do primeiro década do 21^st século, os principais conceitos da ACSS consistem em criar classes para o nível mais atômico de estilo, ou seja, um par de valor de propriedade e usá-las em HTML conforme necessário.

É difícil determinar quando o ACSS (Atomic CSS) foi desenvolvido pela primeira vez desde que o conceito está em uso há algum tempo. Desenvolvedores têm usado classes como .clearfix overflow: hidden por muito tempo. A ideia na ACSS é ter uma classe para praticamente todos os pares de valor de propriedade relacionados a não-conteúdo reutilizáveis precisaremos em nosso site e adicionar essas classes quando necessário aos elementos HTML.

Abaixo está um exemplo de classes baseadas em ACSS e como elas são usadas em HTML.

 .mr-8 margem-direita: 8px; .fl-r float: direita;

Como você pode ver, o número de classes vai ficar alto com este método e o HTML será preenchido por todas essas classes. Esse método não é 100% eficaz, mas pode ser útil se desejado. Yahoo usa isso depois de tudo.

Profissionais da ACSS:Estilo HTML sem sair do HTML.

Contras da ACSS:Muitas aulas, não muito legais e você pode odiá-lo.

4. SMACSS

Desenvolvido em 2011 por Jonathan Snook, o SMACSS (Arquitetura Escalável e Modular para CSS) funciona identificando os 5 tipos diferentes de regras de estilo. Os nomes das classes e o sistema de arquivamento são criados com base nesses.

“O SMACSS é uma maneira de examinar seu processo de design e como uma forma de adequar essas estruturas rígidas a um processo de pensamento flexível. - Jonathan Snook”

O SMACSS identifica 5 tipos de regras de estilo, base, layout, módulo, estado, e tema.

Estilos base são os estilos padrão direcionados às tags HTML básicas, como
, .
Estilos de layout são estilos usados para definir o layout da página, como a codificação onde o cabeçalho, o rodapé e os menus laterais irão.
Os estilos dos módulos são específicos de um módulo como galeria ou apresentação de slides.
Estilos de estado são para destacar elementos com estados variáveis como oculto ou desativado.
Tema é usado para mudar o esquema visual da página.

As diferentes regras de estilo podem ser identificadas usando um prefixo no nome da classe, por exemplo, l-header (para layout) ou t-header (para tema). Também podemos organizar esses diferentes tipos de regras colocando-os em arquivos e pastas separados.

Prós do SMACSS:Melhor código organizado.

Contras do SMACSS: Nenhum eu posso pensar em.

Há um livro on-line gratuito que você pode ler sobre o SMACSS ou pode comprar a versão dele para estudar mais.

Conclusão

As metodologias CSS acima darão a você um sistema para gerenciar e otimizar seus códigos CSS. Eles podem ser combinados juntos, como o OOCSS-SMACSS, ou o OOCSS-BEM, ou o BEM-SAMCSS para atender às suas necessidades..

Também existem frameworks e bibliotecas se você quiser um sistema automatizado para executar metodologias CSS, como:

Quadro OOCSS
Ferramentas BEM
Estrutura CSS orgânica (segue conceito atômico).