OOCSS: Orientação a Objetos no CSS

É incrível como a orientação a objetos é independente de linguagem, e que em todos os aspectos facilita o desenvolvimento e manutenção de uma aplicação. No CSS não é diferente espero que neste post vocês consigam perceber a relevância da OO (Orientação a Objetos) em uma folha de estilo.

CSS (Cascade Style Sheet) é uma linguagem de folhas de estilo que tem como função estilizar as páginas HTML, contendo diversos recursos que melhoram a interatividade com o usuário. 

Utilizando classes no CSS

Classes no CSS é uma das formas utilizadas para identificar um elemento HTML, o mais interessante é a possibilidade de atribuir várias classes em um mesmo elemento no HTML. Com isso o código torna-se mais organizado, pois o identificador irá descrever com mais clareza a função de um determinado elemento, e consequentemente melhora a facilidade na manutenção do estilo da página.

Para utilizar as classes é necessário utilizar a seguinte sintaxe:

HTML

<elemento class=”nomedaclasse”></elemento>

No CSS é identificado pelo ponto -> .

CSS

.<nomedaclasse>{

<propriedades>

}

Exemplo:

HTML

<nav class=”nav nav-bar”></nav>

CSS

.nav{

                padding: 10px;

                margin: 10px;

}

.nav-bar{

position: fixed;

top: 0px;

left: 0px;

width: 100%;

height: 80px;

background-color: #FFF;

box-shadow: 0px 5px 15px rgba(0,0,0,0.5);

-moz-box-shadow: 0px 5px 15px rgba(0,0,0,0.5);

-webkkit-box-shadow: 0px 5px 15px rgba(0,0,0,0.5);

}

Pré-Processadores CSS

A utilização de pré-processadores é uma das formas mais utilizadas para tornar o desenvolvimento mais rápido, pois possui funções que simplificam o nosso trabalho na hora de escrever código na CSS.

LESS

O LESS é uma linguagem baseada em CSS (mesma ideia, sintaxe familiar) que gera CSS no final. O pessoal chama de pré-processador, porque, no fim, o browser só entende CSS mesmo. Você escreve um arquivo .less mas usa no final um .css compilado. Dá pra fazer isso com um JavaScript também, que você inclui na página e compila o LESS direto no browser, porém não é viável em produção por consumir muito tempo do carregamento da página. Eu recomendo a instalação do SASS através do Grunt ou pelo Node.js na linha de comando.

Referências

http://blog.caelum.com.br/css-facil-flexivel-e-dinamico-com-less/

http://lesscss.org/

http://lesscss.loopinfinito.com.br/

SASS

Permite usar recursos que não existem na CSS ainda como variáveis, aninhamento, mixins, herança e outras guloseimas bacana que tornar a escrita divertido CSS novamente.

Referências

http://sass-lang.com/

Ai pessoal o que acharam?

Curtam, comentem e compartilhem.