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 (0)

Entusiasta de Tecnologias Web

Brasil