Criando um CSS mais Simples - CSS Orientado por Objeto (OOCSS)
CSS - Criar CSS simples com CSS Orientado por ObjetoHoje em dia, não existe site sem ter o design feito por CSS, pois além de fundamental é muito simples de escrever, ou seja, se você quer um bloco vermelho é só colocar as medidas de largura e altura e a cor vermelha dentro do arquivo ou código CSS.
Porém isso é muito básico, o código CSS de um site pode passar facilmente de mil linhas e sabendo disso, nós precisamos escrever um CSS bem estruturado para termos um código limpo pois acaba ajudando na velocidade e desempenho do site.
Com base nessas informações, podemos concluir que quanto mais simples nosso css, melhor nosso site vai ser, para isso ser possível vamos entender o que é OOCSS.
Apesar do nome, o OOCSS não é nenhuma tecnologia nova, mas sim uma forma mais otimizada de escrever nosso css.
Vejamos o Exemplo:
Vamos supor que precisamos configurar 4 blocos iguais porém de cores diferentes.
Poderiamos escrever nosso código CSS assim:
.bloco-vermelho {
width: 100px;
height: 100px;
float: left;
margin: 10px;
background: red
}
.bloco-verde {
width: 100px;
height: 100px;
float: left;
margin: 10px;
background: green
}
.bloco-azul {
width: 100px;
height: 100px;
float: left;
margin: 10px;
background: blue
}
.bloco-amarelo {
width: 100px;
height: 100px;
float: left;
margin: 10px;
background: yellow
}
Nosso código HTML ficaria assim:
<div class="bloco-vermelho"></div>
<div class="bloco-verde"></div>
<div class="bloco-azul"></div>
<div class="bloco-amarelo"></div>
Já utilizando o metodo de OOCSS o CSS ficaria assim:
.bloco {
width: 100px;
height: 100px;
float: left;
margin: 10px;
}
.red {
background: red
}
.green {
background: green
}
.blue {
background: blue
}
.yellow {
background: yellow
}
E o código HTML ficaria assim:
<div class="bloco vermelho"></div>
<div class="bloco verde"></div>
<div class="bloco azul"></div>
<div class="bloco amarelo"></div>
Mas qual a diferença?
O código html é quase igual e o css não mudou muito.A principal diferença é o modo que interpretamos a construção do código, ou seja, o que mudou foi o jeito que pensamos para criar o código.
Ao invez de configurarmos todos os blocos individualmento repetindo a maioria das informações, escrevemos as informações de configuração da "div bloco" (width, height, etc.) e depois acrescentamos suas características complementares.
Simplificando o pensamento fica assim:
Na class ".bloco" colocamos todas as configurações de tamanho, e depois colocamos as cores como classes no código HTML
Como isso vai ajudar a melhorar meu código?
Analizando o CSS que montamos, podemos considerar que a class ".vermelho" é uma configuração de cor, então em qualquer situação que o site usar esse vermelho, você não precisa declarar no CSS, só aplicar no HTML.
Com isso você pode trabalhar com o CSS por módulos facilitando o tempo e as lógica que você utilizar no seu site.
Apesar do exemplo acima, o OOCSS é algo que você vai melhorando conforme você mais projetos você implementa esse metodo, mais melhor e mais rápido você vai consiguir desenvolver seu site
Arte e Desenvolvimento