0

Padronizando o CSS com “OOCSS”

Aluizio Monteiro
Aluizio Monteiro

Compreender CSS é relativamente fácil. Acontece que, quanto mais a aplicação vai crescendo o risco de tudo virar um peteco vai aumentando caso a gente ignore a questão da organização dos estilos.

Com base nesse problema, trago aqui um dos padrões de organização do CSS já utilizados no mundo do Desenvolvimento.



O que é OOCSS?


É uma forma de organizar o css do seu app. Para quem já ouviu falar em Orientação a Objetos da programação, fica mais fácil compreender, pois o padrão OOCSS é uma analogia ao famoso OO.


Codificando fica melhor de compreender:


1 – Tomaremos como base o seguinte um elemento input text:

<html>
  <head> </head>
  <body>
    <input type="text" class="txt txt-sm primary">
  </body>
</html>


Já começamos dividindo a nossa class=”” em três classes diferentes. Cada uma com atribuições bem definidas:


- txt = Vai conter configurações que serão comuns a todos os inputs da nossa aplicação.

- txt-sm = Aqui vamos definir um tamanho para o nosso input.

- primary = Esta classe vamos usar para definir uma cor.


2 – Vamos criar o css:

body {
  margin: 3rem;
} 
  
/*Padrão comum para todos os campos de textos*/
.txt {
  border-radius: 10px;
  height: 30px;
  border-style: none;
}
  
/*Tamanho pequeno*/
.txt-sm {
  width: 8rem;
}
  
/*Cor primária*/
.primary {
  background-color: rgb(45 183 246);
}


Nada de novo por aqui. Apenas definimos as configurações das classes chamadas em nosso input text.


3 – Vamos acrescentar classes de tamanhos médios e grandes e mais duas outras opções de cores:

body {
  margin: 3rem;
}

/*Padrão comum para todos os campos de textos*/
.txt {
  border-radius: 10px;
  height: 30px;
  border-style: none;
}

/*Tamanho pequeno*/
.txt-sm {
  width: 8rem;
}

/*Tamanho médio*/     // <-- novo
.txt-md {
  width: 12rem;
}

/*Tamanho grande*/    // <-- novo
.txt-lg {
  width: 16rem;
}

/*Cor primária*/
.primary {
  background-color: rgb(45 183 246);
}

/*Cor cuidado*/       // <-- novo
.danger {
  background-color: rgb(241 153 153);
}

/*Cor sucesso*/       // <-- novo
.success {
  background-color:rgb(132 255 132);
}


4 – Vamos chamar todos eles no html:

<html>

<head> <link rel="stylesheet" href="css/style.css"> </head>

<body>
  <dl>Pequenos</dl>
  <dd>Primário: <input type="text" class="txt txt-sm primary"></dd>
  <dd>Cuidado: <input type="text" class="txt txt-sm danger"></dd>
  <dd>Sucesso: <input type="text" class="txt txt-sm success"></dd>
  
  <dl>Médio</dl>
  <dd>Primário: <input type="text" class="txt txt-md primary"></dd>
  <dd>Cuidado: <input type="text" class="txt txt-md danger"></dd>
  <dd>Sucesso: <input type="text" class="txt txt-md success"></dd>
  
  <dl>Grande</dl>
  <dd>Primário: <input type="text" class="txt txt-lg primary"></dd>
  <dd>Cuidado: <input type="text" class="txt txt-lg danger"></dd>
  <dd>Sucesso: <input type="text" class="txt txt-lg success"></dd>
</body>
  
</html>


5 – A saída é:


Outras propostas dessa metodologia:

1 – Conteiners são definidos separadamente dos conteúdos;

2 – A estrutura dos elementos são separadas das suas características visuais.

3 – Características visuais que podem atender a elementos diferentes, devem ser definidas separadamente para que sejam reaproveitadas.


Esta é uma das formas de otimização do CSS. Espero que tenham compreendido a essência da coisa toda. Existem outros padrões de organização também. Em breve vou criar um exemplo para eles.


0
0

Comentários (1)

0
Cristiano Santos

Cristiano Santos

14/06/2021 05:47

Valeu. Foi bem útil para mim porque estou estudando o assunto. Vale a pena se aprofundar no tema porque são opções que precisamos conhecer. Quando li pela primeira vez sobre oocss achei super estranho mas depois de estudar um pouco dá para perceber que dá um alcance bem bacana para os nossos códigos. Abraços.

Entusiasta de Tecnologias Web

Brasil