CSS: 10 dicas que podem melhorar o seu convívio com ele

[Guilherme Oderdenge 42]

CSS: 10 dicas que podem melhorar o seu convívio com ele

 

Bom dia, boa tarde ou boa noite, pessoas!

Venho através deste passar um pouco de conteúdo à comunidade iMasters, botando em pauta 10 dicas que podem melhorar o seu convívio com o CSS. Vamos lá? ;)

 

Índice das dicas

• 1. O bom aprendizado
  
• 2. O vale dos Esquecidos
  
• 3. Tenha fé em tudo o que acredita
  
• 4. Recomeçar
  
• 5. if( "firefox" != "chrome" != "internet explorer" ){...
  
• 6. CSS orientado a... objeto?
  
• 7. A torta de maçã, a maçã e o Universo
  
• 8. O amor da família
  
• 9. Os diferentes esmaltes da web
  
• 10. O LIMBO
  

 

Prefácio

Eu acredito que o CSS é um dos maiores bens que os desenvolvedores podem ter, mas por muitas e muitas vezes nós esquecemos da nossa origem: o ser humano.

 

Em toda a minha caminhada com o CSS me deparei com vários problemas e por muito tempo os encarei de forma muito arbitrária. Na verdade, quem sabe, de "de forma muito binária". Isso porque eu sempre me botava em dilemas: "Ou eu aprendo da forma correta, ou não aprendo". E escrevo este artigo baseado nesses dilemas que enfrentei, superei, e hoje percebo que também há quem passe pelo mesmo.

 

Espero, por fim, que sirva à todos - inclusive, que algo vocês possam aproveitar em alguma outra linguagem.

 

1. O bom aprendizado

Para muitos que estão começando agora, entendam que o CSS é mais feito de regras, propriedades e valores do que de uma estrutura final.

 

Quando eu falo de regras, me refiro ao todo:

body {
   background: #000;
}

Onde o body é o seletor, o background é a propriedade, e o #000 (que, em hexadecimal, equivale à cor preta) é o valor (da propriedade).

 

Antes eu citei uma tal de "estrutura final", mas afinal, que diabos é isso?

Eu gosto muito de chamar isso de sintaxe. O princípio da linguagem CSS não consiste em vários tipos de sintaxies, mas sim em várias propriedades diferentes.

 

Para se ter uma ideia melhor de propriedades, dê uma olhadinha neste link. Ali temos uma relação bastante grande de propriedades. Claro, as propriedades ali encontradas são mais "vovós", mas que ainda fazem parte da família (...).

 

Beleza! Não estou aqui para ensinar CSS...

... mas precisei dar essa introdução porque eu quero que vocês tenham o melhor aprendizado de CSS possível.

 

Vejamos... hm... ah sim, claro! Eu gosto de crer que o CSS seja um "dicionário": você precisa gravar suas propriedades para lidar com ele. Se de começo você pega o jeito de uma regra, para aplicar uma propriedade é moleza, né mesmo, veteranos?

 

E é isso aí mesmo. DECORE TODAS as regras do CSS que você será um MONSTRO! Mas, espera aí... decorar != (diferente) de aprender...

 

... agora que temos essa diferença em mente, peço para vocês fecharem os olhos e voltarem lá na infância de vocês. Tentem lembrar de como vocês aprenderam a falar o português (ou seja lá qual idioma você fala). Lembraram? Com certeza não. Isso porque vocês aprenderam isso inconscientemente. Vocês aprenderam o português com o tempo e com a prática.

 

Por mais robótico que você seja, você nunca vai conseguir decorar o CSS forçando o seu cérebro à lembrar de suas propriedades. Em um dia você consegue sim entender como funciona uma regra, mas decorar as propriedades e colocá-las em prática, jamais.

 

Primeiro que não é-se necessário decorar todas as regras do CSS. Você nunca vai utilizar todas elas em um mesmo projeto.

 

Segundo que são (relativamente) muitas regras.

 

E, terceiro: por que forçar o processo? Tal como o seu idioma nativo, você vai aprender o CSS e suas propriedades/regras/valores com o tempo. Quanto mais você o coloca em prática, mais você o desmistifica. E ah, de verdade, nem mesmo forçar a prática é saudável para o seu aprendizado.

 

Não queira inventar problemas onde eles não existem para aprender. Deixe tudo rolar naturalmente.

 

Acredite, "a" CSS é difícil. Quando a convidei para fazer um site comigo pela primeira vez, ela negou. Precisei de muito charme pra conseguir atrair ela, ok?

 

2. O vale dos Esquecidos

Nunca queira ir para o Vale dos Esquecidos. Só de citar este nome, já ouço trovões de fora da janela.

 

Ele é um lugar sombrio, onde as propriedades esquecidas vagam durante à noite atrás de desenvolvedores modernos que já não as utilizam mais.

 

Temos uma família de propriedades que se auto-denominam de The Dark Family From Hell of Dungeon, que é a família do background. Vamos ver, vamos ver...

 

body {
    background-color: #000;
    background-repeat: repeat-x;
}     

Ora quem temos aí, as irmãs color e repeat. Travessas, não? Nós podemos mandá-las de volta para O Vale substituindo a regra acima por:

 

body {
    background: #000 repeat-x;
}

No fim, teremos o mesmo resultado que teríamos se as irmãs (color & repeat) fossem chamadas.

 

Há quem diga que isso confunde os mais leigos. Mas calma lá! Quem é que iria confundir repeat-x (valor de repetição horizontal) com... #000, uma cor? É basicamente o mesmo que confundir uma arara azul com uma bicicleta. :huh:

 

Lendas antigas diziam que essa "união" de propriedades poderiam gerar conflitos entre os browsers e até mesmo perder em desempenho. Hahahaha... essas lendas, que coisa, não? Estamos em 2012, *héllouu!*.

 

Mas falando sério: una as propriedades. O efeito vai ser o mesmo entre os navegadores, você economiza código e, naturalmente, tempo.

 

3. Tenha fé em tudo o que acredita

Não apoio e tampouco quero fazer apologia a gambiarra. Mas senhores, se vocês fizeram um site usável (de usabilidade), acessível (de acessibilidade) e intuitivo e, por vontade do acaso, utilizaram a propriedade border-radius: deixe assim.

 

Está certo, em alguns navegadores mais antigos a propreidade border-radius que é característica do CSS3 não vai funcionar, mas... quem se importa?

 

Não deixe de fazer o layout bonito e do jeito que você quer por causa do Internet Explorer 8 ou inferiores. Eles se acham os reis do pedaço, mas vamos mostrar à eles que não é bem assim.

 

Se você acha que eu falo besteira, acesse aí o Twitter com o Internet Explorer 8. Acessou? Então, eles não ligam pra você se você não utiliza um browser moderno. O mundo não gira em torno dos IEs. :thumbsup:

 

Atenção: por favor, não confunda a ampla, variada e bela estética que os navegadores modernos lhe proporcionam com layout inválido. Saiba que estamos colocando em pauta aqui a questão visual. O Twitter pode não arredondar as bordas para o IE 8, mas ele funciona no vovô.

 

Portanto, desenvolvedores, acha que seu site está excepcional com as novidades do CSS 3? Deixe-o assim. Mas não torne o seu layout inutilizável para navegadores desatualizados, belê?

 

4. Recomeçar

Estamos em tempo de metamorfose. Vale a pena deixar o seu site de fora?

 

Muitas vezes é melhor começar do zero do que insistir em um erro. Digamos que o layout de um site seu não está robusto e intuitivo o bastante para os visitantes. Por que tentar solucionar charadas onde as respostas são óbvias? Reconstrua.

 

Isso vai implementar o seu conhecimento a respeito do CSS. Sabe porquê? Você vai praticar de diferentes formas.

 

A cada layout que você desenvolve - a não ser que sejam exatamente iguais - possui um padrão de design próprio. Pense que, quanto mais layouts diferentes você fazer, mais vasto vai ser o seu conhecimento sobre os diferentes padrões, acrescentando a sua perspectiva de erros e acertos.

 

Não entendeu? A cada layout diferente surge uma necessidade. E se cada vez mais você suprir essas necessidades, seus conhecimentos e técnicas de CSS irão ser aprimoradas.

 

Penso eu que essa dica não serve apenas para o CSS, mas com toda a certeza desse mundo que em CSS isso é muitíssimo relevante.

 

5. if( "firefox" != "chrome" != "internet explorer" ){...

Sim, sim e sim. O Firefox é um ótimo navegador moderno. Mas às vezes ele dá umas diferenciadas loucas dos outros navegadores, já perceberam? Um exemplo disso é a diferença de pixels entre o Chrome e o Firefox. Existem maneiras "cultas" de se arrumar este problema, mas eis aqui a mais fácil:

 

#seletor::-moz-focus-inner {
   border: 0px;
   padding: 0px;
}

Isso vai "resetar" esse excesso de pixels que o Firefox possui.

 

Pois bem, além disso, nós conseguimos diferenciar um arquivo de folha de estilo em cascata entre o IE e os demais navegadores - mas isso é perfeitamente possível também com o Chrome e o Firefox.

 

Lhes apresento o -moz-focus-inner, um pseudo-seletor que é capaz de estilizar uma regra especificamente no Firefox.

 

Ele é menos conhecido porque é raro os casos onde você quer estilizar o CSS diferentemente entre o Firefox e os demais navegadores, mas como no caso dos pixels, acontece, né?

 

6. CSS orientado a... objeto?

Fiquem calmo, programadores! Isso é só uma travessura. Não consigo imaginar o CSS sendo orientado a objetos, mas o conceito dessa minha dica é basicamente o mesmo: reuso.

 

Veja os seguintes códigos:

h1 {
   font: 15px Arial, Tahoma, Verdana, Trebuchet MS;
   color: #FF0000; /* Cor: vermelho */
   letter-spacing: -1px;
}

 

h2 {
   font: 15px Arial, Tahoma, Verdana, Trebuchet MS;
   color: #0000FF; /* Cor: azul */
   letter-spacing: -1px;
}

 

h3 {
   font: 15px Arial, Tahoma, Verdana, Trebuchet MS;
   color: #00FF00; /* Cor: verde */
   letter-spacing: -1px;
}

A única coisa que mudou foi a cor. Por que repetir o código, ein? Dá pra resumir. E além de mais resumido, a qualidade do código fica melhor e ele fica (OO...) reu-ti-li-zá-vel.

 

Vamos arrumar isso:

 

h1, h2, h3 {
   font: 15px Arial, Tahoma, Verdana, Trebuchet MS;
   letter-spacing: -1px;
}

h1 {
   color: #FF0000;
}

h2 {
   color: #0000FF;
}

h3 {
   color: #00FF00;
}

Pronto, agora sim. Entendeu a diferença?

 

Se não, pense que antes de resumirmos o(s) código(s), nós tínhamos definido regras iguais para seletores diferentes. Em sumo, reunimos estas regras entre os três seletores em questão (h1, h2 e h3) e apenas isolamos a propriedade que dá cor ao seletor em regras diferentes. Entendeu agora?

 

Tudo que definirmos na regra universal dos seletores h1, h2 e h3 surtirá efeito. Ou seja, nós não precisamos atualizar o código em suas regras específicas. Agora temos um CSS mais reutilizável, curto e sexy.

 

Mas Guilherme, não sei todos os seletores que terão regras iguais... e agora?

Ora, é mais fácil "encaixar" os seletores repetidos na regra em questão do que reescrevê-la.

 

Deixe a preguiça de lado e no seu editor CSS dê um Control (PC)/Command (Mac)+F e procure pela regra que irá se repetir. Pense que isso é para o bem do seu próprio site. ;)

 

7. A torta de maçã, a maçã e o Universo

Há um tempo atrás, tinha lido em algum livro que "para se fazer uma torta de maçã, primeiro teríamos que criar a maçã e o resto do Universo".

 

E vou utilizar esta citação para o CSS. Por exemplo, uma das diversas maneiras de se centralizar camadas no CSS é utilizando esta técnica:

 

#container{
   background: #000;
   width: 950px;
   height: 300px;
   position: relative;
   left: 50%;
   margin: 0px 0px 0px -475px;
}

 

Acima, nós definimos a largura da camada com 950 pixels. Aí, com o left: 50% nós falamos que é para esta mesma camada ir para 50% à direita na posição do monitor. Chegando lá, o margin diz que é pra ela ir 475 pixels (metade de 950) à esquerda.

 

Todo esse processo irá centralizar a camada na tela. Ótimo, não!?

 

Pois é, é ótimo. Todavia, muitos programadores reutilizam essa técnica em cada camada que eles querem centralizar. Isso é logicamente errado. Por quê? Vamos analisar uma estrutura HTML/CSS com o processo de centralização:

 

(HTML)

  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>

 

(CSS)

#header {
   background: #000;
   width: 950px;
   height: 300px;
   position: relative;
   left: 50%;
   margin: 0px 0px 0px -475px;
   float: left;
}

#content {
   background: #FF0000;
   width: 950px;
   height: 500px;
   position: relative;
   left: 50%;
   margin: 0px 0px 0px -475px;
   float: left;
}

#footer {
   background: #0000FF;
   width: 950px;
   height: 200px;
   position: relative;
   left: 50%;
   margin: 0px 0px 0px -475px;
   float: left;
}

 

Certo. As camadas serão centralizadas, mas vejam só que código redundante (Lembra da dica anterior?). Dá pra melhorar isso, não?

 

Vamos criar uma camada pai. Vejam:

 

(HTML)

<div id="wrapper">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
</div>

 

(CSS)

#wrapper {
   background: #000;
   width: 950px;
   position: relative;
   left: 50%;
   margin: 0px 0px 0px -475px;
   float: left;
}

#header {
   height: 300px;
}

#content {
   height: 500px;
}

#footer {
   height: 200px;
}

Viram como melhorou? Essa de "camada pai" serve pra tudo: fontes, bordas e et cetera.

 

Embora o conceito seja semelhante ao da dica anterior, não é a mesma coisa. Apliquem na prática e vocês irão entender. :D

 

8. O amor da família

A família é uma coisa maravilhosa, e, ao mesmo tempo, rígida. Veja só: ninguém substitui o papel de um pai ou de uma mãe. Na natureza programática é exatamente igual.

 

O HTML não substitui o papel do CSS e vice-versa. Isso porque a natureza é assim e deu. Não temos que intervir no processo natural das coisas. E que assim seja sempre.

 

Às vezes os programadores mais preguiçosos, no meio do HTML, fazem o seguinte:

 

<div id="container">
  <div style="padding: 15px;">
      Conteúdo
  </div>
</div>

Por que, ó ceus!?!?!?!?

 

No exemplo acima, sabemos que o padding é uma propriedade do CSS e que ali ele está se integrando ao HTML. Vai funcionar perfeitamente, MAS EVITE FAZER.

 

Imagine que você tem um site todo pronto; ótimo, agora imagine que você tenha que fazer uma manutenção nele e chegou a vez do CSS. Com tantos códigos, regras e letras no meio da confusão, a última coisa que você vai lembrar é de uma div específica e sem rumo no meio do seu HTML para incomodar.

 

Se a questão é repetir o estilo em vários seletores então utilize uma classe. É muito mais simples e não vai engordar o seu código.

 

Pronto! Agora o amor da família é posto em prática. Nenhum familiar quer outro familiar com uma parada cardíaca e as artérias entupidas, não é?! Aliás, tem a sogra... mas... ah, esquece! Queremos ver ela bem - afinal, são elas as responsáveis pelos amores das nossas vidas. :love:

 

9. Os diferentes esmaltes da web

Existem tantas fontes e tipografias bonitas na internet, não é mesmo? Mas às vezes ficamos com receio de utilizá-las em nossos sites com medo de que os visitantes possam não tê-la instalada em suas máquinas.

 

Nos dias de hoje, isso é mais passado que a Dercy Gonçalves meu caro. :yes:

 

Hoje nós temos a tecnologia do @font-face. Vejam só:

 

@font-face {
   font-family: "Nome da Fonte";
   src: url(pasta/fonte.ttf);
}

Coloque isso lá no começo do seu CSS, indique o nome da fonte e a pasta onde a mesma está localizada e voi là! Sua fonte está importada para tudo e todos!

 

Mas lembre-se: isso é apenas a parte de importação. Para instruir uma propriedade à utilizá-la, faça:

 

.seletor {
   font: "Nome da Fonte", ...;
}

 

Só para constar: essa regra tem suporte para fontes .ttf e .otf apenas no Chrome, Opera, Firefox e Safari. Já no coitado Internet Explorer, ela passa direto.

 

Mas não se esqueça do que já falamos na dica 3, onde você não deve se deixar limitar pelo IE. Utilize a função do font-family e faça do seu site um lugar melhor. ^_^

 

10. O LIMBO

"um lugar fora dos limites do Céu, onde se vive a plena felicidade natural, mas privado da visão beatífica de Deus".

 

Antes de trabalharmos para seres humanos, não podemos esquecer que temos um intermediário: a máquina. É graças aos computadores que a internet é possível.

 

Separe dois arquivos CSS: um para você trabalhar e deixar como backup e outro para ser otimizado em linguagem de máquina.

 

Feito isso, entre neste site e então indique a URL, upe ou cole o seu CSS no textarea e então processe a otimização.

 

Com o código otimizado, substitua-o no arquivo .css que você enviará para o servidor e pronto: agora você tem um código mais limpo e rápido.

 

Se você tentar programar nele sentirá uma certa dificuldade, por isso a instrução de dois arquivos separados para o CSS.

 

Não entendeu o que foi feito nesta etapa? Tudo bem. Veja: você vai otimizar o código, reduzir linhas e/ou códigos desnecessários, diminuindo o tamanho do arquivo e aumentando o desempenho.

 

Considerações finais

Antes de finalizar este artigo, gostaria de esclarecer algumas coisas:

• Foram investidas dezesseis horas neste artigo;
  
• Aceito qualquer crítica, desde que construtiva;
  
• Qualquer informação errada, poste;
  
• Tem dúvidas? Poste;
  
• O tópico está vinculado somente e unicamente ao fórum. Não irei dar tratamento especial à ninguém, ou seja, sem MPs solicitando MSN e/ou qualquer pedido do gênero;
  
• Erros de português? Por MP, por favor;
  
• Quer reproduzir? Fique à vontade. Mas conto com o seu bom senso para manter os créditos;
  
• Se for responder, seja no mínimo educado comigo e com o tópico. Momento algum faltei respeito com você, e de você eu espero o mesmo.
  

Em sumo, era isso pessoal. Espero que consigam tirar o melhor do meu artigo e implementem no seu dia-a-dia como desenvolvedor.

 

Um forte abraço! :thumbsup:

[Diéssica 140]

Perfeito.

 

Sempre tenho algo a acrescentar, mas pra esse tópico eu não tenho NADA! Parabéns! :thumbsup:

 

Melhor parte:

Se você acha que eu falo besteira, acesse aí o Twitter com o Internet Explorer 8. Acessou? Então, eles não ligam pra você se você não utiliza um browser moderno. O mundo não gira em torno dos IEs.

[Andrey Knupp Vital 136]

:clap:

 

Me faz lembrar ...

[Guilherme Oderdenge 42]

Obrigado Diéssica. Bastante motivador ler isso. :clap:

 

EAHUEIUEHAIUEHAIUEHAIE nunca tinha visto essa tirinha, mas é bem isso mesmo! Chrome for the win. :joia: :joia:

[NetBoy16 72]

Kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

Quando vi essa tirinha, tive que me conter pq tava no trabalho, mas posso dizer que ri litros, sahdiadhudasdjashuasu