Dicas para Criação e de sites

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

Assine nosso feeds e receba notícias todas semanas