A agência 5clicks deu na última quarta, dia 03/12, uma mini-palestra sobre SEO: verdades e mitos. O palestrante, Miller Medeiros deu uma verdadeira aula sobre o assunto, tirou dúvidas com o pessoal, que também participou com comentários proveitosos.
Abaixo o link da apresentação. Recomendo uma leitura e uma olhada nos links no final.
SEO, verdades e mitos - Otimização de sites para a indexação nos motores de busca.
Parabéns a 5clicks pela iniciativa!
Organizar códigos é muito importante, principalmente quando trabalha-se em equipe. A organização dos códigos fontes de um projeto ajudará na eficiência do trabalho, pois ficará mais fácil fazer a manutenção do mesmo e procurar por alguma linha específica.
Vou mostrar algumas regrinhas que se aplicam aos códigos CSS para uma boa organização.
É conveniente separar o código por seletores, preferencialmente hierarquizados, já que o navegador lê o CSS de cima para baixo, assim, você mudará pequenas diferenças (cor, tamanho da fonte etc) de um seletor para outro.
A ordem que eu uso é: *, html, body, a:(link, hover, active, focus, visited), p, h(1, 2, 3, 4, 5, 6), table, tr, th, td, fieldset, legend, address, ul, li, ol, dl, form, input, select, label, textarea, div, img, span, #nomeId, .nomeClasse.
Esses são os seletores que eu mais uso nos projetos. No .css ficaria assim:
ul, li, .msg {}
ul {}
li {}
.msg {}
Acho que um dos maiores problemas dos CSS's é o fato de ter repetida as mesmas propriedades para vários seletores. Isso prejudica o código em sua estrutura e principalmente no seu tamanho, tanto visual quanto virtual. Veja o exemplo abaixo:
h1, h2, h3 {
font-weight:100;
}
a strong {
font-weight:100 !important;
}
strong {
font-style:italic;
font-weight:100;
}
#nav {
font-style:italic;
}
.msg {
font-style:italic;
}
/*Esse código pode ficar assim:*/
h1, h2, h3, strong {
font-weight:100;
}
a strong {
font-weight:100 !important;
}
strong, #nav, .msg {
font-style:italic;
}
Dica: Leia Dica de otimização de CSS I para ver uma técnica de aninhar as propriedades do CSS.
Ordenar as propriedades em ordem alfabética ué. Entendeu não?
#container {
border:1px dashed;
color:#000;
margin:auto;
padding:1em 0;
width:700px;
}
Separar as cores de bordas, backgrounds, textos etc. Se você precisar usar o mesmo CSS para outro projeto de cores diferentes não será necessário editar linha por linha.
body {
border-left:2px solid #040770;
border-top:2px solid #040770;
}
td {
background:#040770 url(../img/linkOn.gif) no-repeat right;
border:1px dashed #040770;
}
a:hover {
background-color:#040770;
padding-right:15px;
}/*Com a separação do código fica assim:*/
body {
border-left:2px solid;
border-top:2px solid;
}
td {
background:url(../img/linkOn.gif) no-repeat right;
border:1px dashed;
}
a:hover {
padding-right:15px;
}
/*CORES*/
body, td {
color:#040770;
}
td, a:hover {
background-color:#040770;
}
Separe-os por blocos titulados, como no último exemplo. Fica mais fácil de entender.
/*LINKS*/
a:hover, a:active {
background:url(../img/linkOff.gif) no-repeat right;
color:#666;
cursor:pointer;
}
/*TEXTOS*/
p {
margin:15px 0;
}
p .msg {
margin:15px 6px;
}
p .ins {
list-style:none;
text-align:justify;
width:419px;
}
/*TITULOS*/
h1, h2, h3 {
margin-top:10px;
padding:0 0 3px 5px;
width:75%;
}
Tente não usar hacks (apesar dos IEk's não deixarem);
Use um CSS "global.css" para colocar as propriedades padrões e importar outros arquivos .css;
Se for um projeto maior, separe os arquivos .css para form's e seus filhos como input, label, textarea, .btn etc. Essa dica pode ser usada para outras situações como tabelas ou fieldsets;
Importe apenas o arquivo global.css no HTML;
Idente o código. A imagem do post é um ótimo exemplo;
Tente validar o seu código.
Depois desse artigo não devo continuar a série de otimização, acho que coloquei todas as que eu uso aqui. Mas se eu aprender alguma coisa nova, divulgo no blog.
Vou começar uma série de artigos para otimização de códigos CSS.
Há um tempinho atrás, na empresa que eu trabalho, me pediram para reduzir o tamanho dos arquivos CSS de um sistema web. Estavam muito bagunçados, sem falar que tinha um arquivo para praticamente cada página. Cuidado com o uso excessivo de arquivos separados, é certo usá-los, mas moderadamente para que não ocupem espaço na publicação/hospedagem.
Bom, a primeira dica que eu vou dar é a de "aninhar" algumas propriedades do CSS, chama-se Declaração Única.
Abaixo tem as principais propriedades que podem ser declaradas dessa forma:
.exemplo1 { /*completo*/
margin-top:0;
margin-right:5px;
margin-bottom:10px;
margin-left:15px;
/*auto, 0, px, pt, em ou %*/
}
.exemplo1 { /*aninhado*/
margin:0 5px 10px 15px;
/*top right bottom left*/
}
.exemplo2 {
margin-top:10px;
margin-right:20px;
margin-bottom:0;
margin-left:20px;
}
.exemplo2 {
margin:10px 20px 0;
/*top right/left bottom*/
}
.exemplo3 {
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
}
.exemplo3 {
margin:0 auto;
/*top/bottom left/right*/
}
.exemplo4 {
margin-top:50px;
margin-right:50px;
margin-bottom:50px;
margin-left:50px;
}
.exemplo4 {
margin:50px;
/*top/right/bottom/left*/
}
.exemplo1 { /*completo*/
border-width:5px;
/*thin, thick, medium ou value
*default = medium*/
border-style:dotted;
/*solid, dashed, dotted, double etc
*default = none*/
border-color:blue;
/*nome em inglês, hex, rgb ou 0-255
*default = valor dos elementos de propriedades superiores*/
}
.exemplo1 { /*aninhado*/
border:5px dotted blue;
}
.exemplo2 {
border-right-width:2px;
border-right-style:solid;
border-right-color:#666666;
}
.exemplo2 {
border-right:2px solid #666
}
.exemplo3 {
border-top-width:3px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:2px;
}
.exemplo3 {
border-width:3px 2px;
}
.exemplo1 { /*completo*/
background-color:#CCCCCC;
/*nome da cor em inglês, hex, rgb ou 0-255
*default = transparent*/
background-image:url(images/bg.gif);
/*url ou none
*default = none*/
background-repeat:no-repeat;
/*repeat, repeat-x, repeat-y ou no-repeat
*default = repeat*/
background-attachment:scroll;
/*fixed ou scroll
*default = scroll*/
background-position:top left;
/*top, right, left, bottom ou center
*default = 0% 0%*/
}
.exemplo1 { /*aninhado*/
background:#CCC url(images/bg.gif) no-repeat 0 0;
}
.exemplo1 { /*completo*/
font-family:Verdana, Arial, Helvetica;
/*Verdana, Arial, "Times New Roman" etc
*default = fonte do navegador*/
font-size:12px;
/*xx-small, medium, x-large, value etc
*default = medium*/
font-weight:bold;
/*normal, bold, bolder, lighter, 100-900 ou inherit
*default = normal*/
font-style:italic;
/*normal, italic ou oblique
*default = normal*/
font-variant:normal;
/*normal ou small-caps
*default = normal*/
line-height:1.5;
/*normal, px, pt, em, num ou %
*default = normal*/
}
.exemplo1 { /*aninhado*/
font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
}
.exemplo1 { /*completo*/
list-style-image:url(images/bullet.gif);
/*url ou none
*default = none*/
list-style-position:inside;
/*inside ou outside
*default = outside*/
list-style-type:square;
/*circle, disc, square etc
*default = disc*/
}
.exemplo1 { /*aninhado*/
list-style:square inside url(images/bullet.gif);
}
Tente usar essa dica nos seus códigos e com o tempo você acaba se acostumando a fazê-los sempre assim.
Abaixo listo alguns sites de otimização de CSS, e com o tempo, tentarei passar outros truques:
Até mais.
