
Dicas para Criação de sites
Criando um CSS mais Simples - CSS Orientado por Objeto (OOCSS)
Criando um CSS Mais simples, mais rápido e mais eficiente utilizando CSS Orientado por Objeto (OOCSS)
Hoje 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
Assine nosso feeds e receba notícias todas semanas
Outras Soluções
Últimos Clientes
[veja todos]

JK Baterias

FabriLar Casas
