Hoje quero passar uma dica rápida, porem útil. É sobre um post na Smashing Magazine, que fala em princípios para construir um CSS limpo (7 Principles Of Clean And Optimized CSS Code), ótima leitura. Mas quero me focar especialmente em uma parte do post, a primeira: Use Shorthand.
Eu sempre peno nesse item, nunca sei qual dos atributos do CSS, quando colocados na mesma linha (padding: 5px 6px 20px 3px), se referencia a qual das propriedades (top, right, bottom e left). O atributo font também é complicado para usar com as propriedades na mesma linha.
Usar essa técnica nos trás dois benefícios bem simples: um CSS mais curto e mais rápido. Sim, pode parecer um beneficio irrelevante, mas tratando-se de mais de mil linhas de CSS isso se torna um diferencial tanto em tempo quanto em tamanho do arquivo. Lembre-se, seu usuário fará download deste arquivo, e você – ou seu cliente – pagara a conta da banda excedida no fim do mês.
Criei uma referencia rápida com as imagens que estão no post original e estou colocando aqui para quem quiser utilizar também. Bom uso!
Uma dica sobre padding e margin: a ordem das propriedades é como num relógio!
A 1ª é em cima, a 2ª na direita, a 3ª em baixo e a 4ª na esquerda!
E conforme for encurtando, pega se o lado oposto.
É, agora eu sei.
Obrigado Felipe!
Acho interessante colocar também o shorthand para background:
background: [background-color] [background-image] [background-position] [background-repeat] [background-attachment]
exemplo:
background: #fff url(image.jpg) left top repeat-x scroll
Apensar da ordem apresentada na W3 Schools (http://www.w3schools.com/css/css_background.asp) ser diferente, esta que vos apresento é testada e aprovada em Firefox 2+, IE 6+, Opera 9+ e Safari 3+.
[]’s
Obrigado Emil, ótima dica!
Vou atualizar.