Estilizando botões com CSS3 e o conceito de OOCSS! - Agência Setap

Saudações meus queridos, estamos iniciando mais um tutorial sobre desenvolvimento web, e nesse vamos falar sobre CSS3 e ver e aprender a aplicar o novo conceito de CSS Orientado a Objetos. Mas antes precisamos entender esse conceito.

Pra quem já programa com OO sabe que a arquitetura define que temos que criar classes que possam resolver o máximo de problemas possível. Sempre com grande usabilidade e podendo aplicar o reuso. Tudo para que possamos escrever menos para fazer mais. (Lindo não?) 

E é daí que o conceito de OOCSS está surgindo e ganhando força cada vez mais, com técnicas de reuso aprimoradas, e com a renderização de elementos otimizada, a OOCSS pode ser aplicada facilmente, e daí que surgem bibliotecas ou container de CSS pré-produzidos para nossos projetos. (Bootstrap por exemplo)

O conceito é simples, temos que reaproveitar o estilo sempre que possível, e sendo assim criamos classes para resolver o problema. Com um pouco de projeção temos um resultado mais amplo, e conseguimos com isso definir facilmente nossos projetos sem iniciar todos os estilos do zero sempre que precisamos.

BOTÕES COM CSS3 E OOCSS: 

Neste exemplo vamos ver como criar botões a partir de links utilizando esse conceito e um pouco de CSS3 também. Mas antes, vamos ver como ficaria essa estrutura sem a utilização destas técnicas. 

Começamos com um simples HTML, já identificando o bloco para o exemplo:

<article>
  <h1>CSS Padrão:</h1>
  <a class="link-blue" href="http://www.upinside.com.br" title="UpInside Treinamentos">UpInside</a>
  <a class="link-red" href="http://www.upinside.com.br" title="UpInside Treinamentos">UpInside</a>
</article>

Veja que nesse bloco temos 2 links. Um com a classe link-blue e outro com a link-red. Vamos aplicar o CSS destes links para exibir os mesmos como botões. (Bem lindos e claro!)

.link-blue{padding: 10px; background: #618bbe; border: 1px #4b6c93 solid; color: #fff; font-size: 1em; text-decoration: none; -webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-right: 15px;}
.link-blue:hover{background: #6e9ed8; border-color: #5c84b5;}
.link-red{padding: 10px; background: #b55c5c; border: 1px #934b4b solid; color: #fff; font-size: 1em; text-decoration: none; -webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.link-red:hover{background: #c66565; border-color: #a55454;}

Tudo pronto, acompanhando o exemplo você vai ver que tem um lindo e mimoso botão azul e outro mais lindo ainda com o fundo vermelho. Agora vamos analisar e ver que, ambos repetem vários elementos de estilo, como padding, font-size, text-decoration, entre outros.

Além disto, ambos os botões têm o border-radius e um deles tem uma margin. E essas definições estão atreladas ao elemento. Logo, se em algum momento não quisermos as bordas arredondadas, ou a margin do primeiro botão. Teremos que aplicar outro CSS para corrigir isso, ou ainda algum hack. O que vai gerar ainda mais linhas de desenvolvimento e tempo desperdiçado. Certo? (Que bom que concorda :P)

OOCSS:

Vamos então ao nosso conceito de OOCSS e aplicar o reuso, separando tudo que é idêntico nos elementos em outras classes, e assim poderemos aplicar o reuso dos elementos sem ter que reescrever qualquer linha. Primeiramente o HTML. (Que lindo com HTML5 né?)

<article>
  <h1>CSS OO</h1>
  <a class="link linkblue radius mr-right-15" href="http://www.upinside.com.br" title="UpInside Treinamentos">UpInside OO</a>
  <a class="link linkred radius mr-right-15" href="http://www.upinside.com.br" title="UpInside Treinamentos">UpInside OO</a>
  <a class="link linkgreen radius" href="http://www.upinside.com.br" title="UpInside Treinamentos">UpInside OO</a>
</article>

Ok, perceba que nossa estrutura mudou um pouco (bastante), agora temos 3 links. E quero que vocês foquem no seguinte. Cada link agora tem mais de uma classe aplicada, temos no primeiro link 4 classes separadas por espaço. E cada uma dessas classes vai ser responsável por seu setor na estilização do elemento. Sendo assim:

link: Vai cuidar dos elementos base do botão, como font-size, text-decoration, entre outros. Ainda vai receber uma cor de fundo padrão, e a definição da borda padrão.

linkblue: É o link seguido da cor especifica do mesmo (como temos linkred e linkgreen). Esta classe é responsável apenas por definir as cores dos botões. Alterando o fundo e a borda, assim como os efeitos de hover correspondentes.

radius: Uma classe especifica para arredondar o elemento, tem alto reuso, ao não aplicar o elemento fica quadrado, com ela recebe o arredondamento, essa classe já serve para outros blocos e fica disponível para reuso em todo o projeto.

mr-right-15: Ou margin right 15px. A classe é bem sugestiva, abreviada mas com responsabilidade clara, aplicar 15 pixels de margin right no elemento que recebe a mesma.

Ufa, terminadas as apresentações das ilustres classes. Agora temos vários problemas sendo resolvidos por diferentes classes, e essas classes passam a ter uma usabilidade muito maior, tendo reuso e alta aplicabilidade no projeto. Ok, ok, vamos ao CSS dessas classes:

.radius{border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.mr-right-15{margin-right: 15px;}

.link{padding: 10px; background: #333; border: 1px #111 solid; color: #fff; font-size: 1em; text-decoration: none; -webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);}

.linkblue{background-color: #618bbe; border-color: #4b6c93;}
.linkblue:hover{background-color: #6e9ed8; border-color: #5c84b5;}

.linkred{background-color: #b55c5c; border-color: #934b4b;}
.linkred:hover{background-color: #c66565; border-color: #a55454;}

.linkgreen{background-color: #54a574; border-color: #3f7c57;}
.linkgreen:hover{background-color: #5cb57e; border-color: #509e6e;}

Percebeu? Ficou tudo mais organizado, para criar os botões agora basta combinar as classes de forma correta, e se você quiser criar um arco íris de botões (não faça isso pelo amooor de Deus) basta criar as cores de bordas e fundo como um fontpink, fontgray e por ai vai.

Tudo fica mais fácil, quer arredondar a div.news? Coloque um radius junto ao elemento e ele recebera o CSS. A partir daí você pode criar várias classes que podem padronizar espaçamentos, fontes tipográficas, tamanhos e outros mais.

Bom meus queridos, espero que tenham gostado desta ilustre apresentação, e agora que você já conhece o conceito de OOCSS e como criar lindos e mimosos botões para seu projeto. Deixe seu comentário. Seu feedback pode me motivar em :)

Forte abraço, não esqueça de compartilhar e #BoraProgramar!