O básico do CSS orientado a objeto (OOCSS)
O desenvolvimento do frontend se move rapidamente com muitas novas técnicas adicionadas a cada ano. Pode ser uma luta para os desenvolvedores acompanharem tudo. Entre Sass e PostCSS é fácil se perder no mar de ferramentas de desenvolvimento.
Uma técnica mais recente é o CSS Orientado a Objetos, também chamado de OOCSS. Esta não é uma ferramenta, mas sim uma metodologia de escrita CSS que visa Torne o CSS modular e baseado em objetos.
Neste post, gostaria de apresentar o Fundamentos Fundamentais do OOCSS, e como essas idéias podem ser aplicadas ao trabalho web frontend. Essa técnica pode não agradar a todos os desenvolvedores, mas vale a pena entender novos conceitos para decidir se seu fluxo de trabalho pode se beneficiar dele.
O que torna o CSS orientado a objeto?
A programação orientada a objetos (OOP) é um paradigma de programação que se concentra em criando objetos reutilizáveis e estabelecendo relacionamentos entre eles, em oposição à programação processual que organiza o código em procedimentos (rotinas, sub-rotinas ou funções).
OOP tornou-se amplamente utilizado em ambos JavaScript e idiomas de backend nos últimos anos, mas organizar CSS de acordo com seus princípios ainda é um novo conceito.
o “objeto” no OOCSS refere-se a um Elemento HTML ou qualquer coisa associada a ele (como classes CSS ou métodos JavaScript). Por exemplo, você pode ter um objeto de widget da barra lateral que possa ser replicado para finalidades diferentes (inscrição em boletins informativos, blocos de anúncios, postagens recentes, etc.). CSS pode direcionar esses objetos em massa o que torna a escalada uma brisa.
Resumindo a entrada do GitHub do OOCSS, um objeto CSS pode consistir em quatro coisas:
- Nó (s) HTML do DOM
- Declarações CSS sobre o estilo desses nós
- Componentes como imagens de fundo
- Comportamentos, ouvintes ou métodos de JavaScript associados a um objeto
De modo geral, o CSS é orientado a objetos quando considera classes que são reutilizáveis e segmentável para vários elementos de página.
Muitos desenvolvedores diriam que o OOCSS é mais fácil de compartilhar com os outros e mais fácil de pegar depois de meses (ou anos) de desenvolvimento inativo. Isso se compara a outros métodos modulares, como o SMACSS, que tem regras mais rígidas para categorizar objetos em CSS..
A página de perguntas frequentes do OOCSS tem várias informações se você estiver curioso para saber mais. E a criadora Nicole Sullivan fala frequentemente sobre o OOCSS e como ele se relaciona com o moderno desenvolvimento web.
Estrutura separada do estilo
Uma grande parte do OOCSS é escrever código que separa a estrutura da página (largura, altura, margens, preenchimento) da aparência (fontes, cores, animações). Isso permite skinning personalizado para ser aplicado em vários elementos da página sem afetar a estrutura.
Isso também é útil para projetar componentes que podem ser mudou-se em torno do layout com facilidade. Por exemplo, um “Postagens recentes” widget na barra lateral deve ser movível para o rodapé ou acima do conteúdo, mantendo estilos semelhantes.
Aqui está um exemplo de OOCSS para um “Postagens recentes” widget que, neste caso, é o nosso objeto CSS:
/ * Estrutura * / .side-widget largura: 100%; preenchimento: 10 px 5 px; / * Skinning * / .recent-posts font-family: Helética, Arial, sem serifa; cor: # 2b2b2b; tamanho da fonte: 1.45em;
Notar que layout é gerenciado com o .widget lateral classe que poderia ser aplicada a vários elementos da barra lateral também, enquanto aparência é gerenciado com o .Postagens recentes classe que também pode ser usada para ocultar outros widgets. Por exemplo, se o .Postagens recentes widget foram movidos para o rodapé, pode não ter o mesmo posicionamento, mas pode ter a mesma aparência e sensação.
Também dê uma olhada neste exemplo da barra lateral do CodePen. Ele usa uma separação distinta de classes para floats e alinhamento de texto para que replicação não exigirá código CSS extra.
Recipiente separado do conteúdo
Separando o conteúdo de seu elemento contêiner é outro princípio importante do OOCSS.
Em termos mais simples, isso significa apenas que você deve evitar o uso de seletores filhos sempre que for possível. Ao personalizar elementos de página exclusivos, como links âncora, cabeçalhos, blockquotes ou listas não ordenadas, você deve fornecer classes exclusivas em vez de seletores descendentes.
Aqui está um exemplo simples:
/ * OOCSS * / .sidebar / * conteúdo da barra lateral * / h2.sidebar-title / * estilos especiais de elementos h2 * / / * Non-OOCSS * / .sidebar / * mesmos conteúdos da barra lateral * / .sidebar h2 / * adiciona mais especificidade do que o necessário * /
Embora não seja horrível usar o segundo formato de código, é altamente recomendável seguir o primeiro formato se você quiser escrever o OOCSS limpo..
Diretrizes de desenvolvimento
É difícil encontrar especificações exatas porque os desenvolvedores estão constantemente debatendo o propósito do OOCSS. Mas aqui estão algumas sugestões que podem ajudá-lo a escrever um código OOCSS mais limpo:
- Trabalhar com classes em vez de IDs para estilizar.
- Tente abster-se de especificidade de classe descendente multi-nível a menos que seja necessário.
- Definir estilos únicos com classes repetíveis (por exemplo, floats, clearfix, pilhas de fontes únicas).
- Estender elementos com aulas segmentadas em vez de classes pai.
- Organize sua folha de estilo em seções, considere adicionar um índice.
Observe que os desenvolvedores ainda devem usar IDs para segmentação por JavaScript, mas não são obrigatórios para CSS porque eles são muito específicos. Se um objeto usa um ID para o estilo CSS, ele nunca poderá ser replicado, pois os IDs são identificadores exclusivos. Se você usar apenas classes para estilização, herança torna-se muito mais fácil de prever.
Além disso, as classes podem ser encadeadas para recursos extras. Um único elemento poderia ter 10 + classes anexadas a ele. Embora 10 + aulas em um elemento não seja algo que eu pessoalmente recomendaria, ele permite que os desenvolvedores acumulem uma biblioteca de estilos reutilizáveis para elementos de página ilimitados..
Nomes de classe dentro do OOCSS são um pouco controversos, e não são definitivos. Muitos desenvolvedores preferem manter as classes curtas e diretas.
Caso de camelo também é popular, por exemplo .errorBox ao invés de .caixa de erro. Se você olhar para a nomenclatura da classe na documentação do OOCSS, você notará que o caso do camelo é o “oficial” recomendação. Não há nada errado com traços, mas como regra geral, é melhor seguir as diretrizes do OOCSS..
OOCSS + Sass
A maioria dos desenvolvedores da web já adora o Sass e rapidamente superou a comunidade frontend. Se você ainda não experimentou o Sass, vale a pena tentar. Permite-lhe escrever código com variáveis, funções, aninhamento e métodos de compilação, como funções matemáticas.
Em mãos competentes, Sass e OOCSS podem ser um jogo feito no céu. Você encontrará um excelente artigo sobre isso no blog The Sass Way.
Por exemplo, usando o Sass @ampliar diretiva você pode aplicar as propriedades de uma classe em outra classe. As propriedades não são duplicadas, mas, em vez disso, as duas classes são combinadas com um seletor de vírgulas. Dessa forma, você pode atualizar as propriedades CSS em um único local.
Se você está constantemente escrevendo stylesheets isso salvaria horas de digitação e ajuda automatizar o processo OOCSS.
Lembre-se também que manutenção de código é uma grande parte do OOCSS. Ao usar o Sass, seu trabalho fica mais fácil com variáveis, mixins e ferramentas de linting avançadas vinculadas ao fluxo de trabalho.
Um atributo chave do ótimo código OOCSS é o capacidade de compartilhar com qualquer um, você mesmo em uma data posterior, e será capaz de pegá-lo com facilidade.
Considerações de desempenho
OOCSS destina-se a funcionar sem problemas e sem muita confusão. Os desenvolvedores tentam o seu melhor não para se repetir a cada passo, na verdade essa é a premissa por trás do desenvolvimento DRY. Com o tempo, a técnica OOCSS pode levar a centenas de classes CSS com propriedades individuais aplicadas dezenas de vezes em um determinado documento.
Como o OOCSS ainda é um tópico novo, é difícil argumentar sobre o assunto do inchaço. Muitos arquivos CSS acabam inchados com pouca estrutura, enquanto o OOCSS fornece estrutura rígida e (idealmente) menos inchaço. A maior preocupação de desempenho seria no HTML, onde alguns elementos podem acumular um punhado de classes diferentes para a estrutura e o design do layout..
Você encontrará discussões interessantes sobre esse tópico em sites como o Stack Overflow e CSS-Tricks.
Minha recomendação é tentar criar um projeto de amostra e ver como está. Se você se apaixonar pelo OOCSS, isso pode mudar radicalmente o modo como você codifica sites. Alternativamente, se você odeia, você ainda está aprendendo uma nova técnica e pensando criticamente sobre como ela funciona. É ganha-ganha, não importa o que.
Fique ocupado escrevendo OOCSS
A melhor maneira de aprender alguma coisa no desenvolvimento web é praticar. Se você já entende o básico do CSS, então você está bem no seu caminho!
Como o OOCSS não requer pré-processamento, você poderia testá-lo com um IDE on-line, como o CodePen. Projetos simples são os melhores para começar e melhorar seus conhecimentos a partir daí.
Dê uma olhada nestes recursos para aprofundar sua pesquisa no campo em evolução do OOCSS.
- Site oficial do OOCSS
- CSS orientado a objeto: o que, como e por quê
- OOCSS + Sass = A melhor maneira de CSS
- Uma introdução ao CSS orientado a objeto
