You are the css to my html
Quando construímos planilhas de estilos, ou Cascade style Sheet , segundo google idiomas folha de estilo em cascata, ou simplesmente CSS, é muito comum nos preocuparmos para que funcione em diversos navegadores, bem como a preocupação com o W3c, só isso já da um bom trabalho para o desenvolvedor, eu acabei, ao menos ultimamente deixando o W3c meio de lado, isto ocorre em função do google, para tornar o site mais rápido, deixamos o w3c um pouco de lado, pois é o google categoriza/indexa melhor os sites que são mais rápidos, e/ou que tenham menor bytes de download, o que não necessariamente significa menos conteúdo.
A solução apresentada, uma classe por linha css, onde todos os seus atributos ficam na mesma, foi encontrada em minhas andanças pela internet, infelizmente não me recordo o site onde encontrei este conselho, muito menos consegui encontrá-lo, mas isto não me impede de prestigiá-lo.
Vamos analisar um classe de um arquivo css qualquer:
minhaClassCSS { color:#333333; font:bold 12px/100% Arial,Helvetica,sans-serif; text-shadow:0 0.5px 1px #FFFFFF; }
Esta nova linha de pensamento sugere fazer a formatação css da seguinte forma:
.minhaClassCSS { color:#333333; font:bold 12px/100% Arial,Helvetica,sans-serif; text-shadow:0 0.5px 1px #FFFFFF;}
ISTO MESMO!
Tudo em uma única linha, toda uma única classe css em uma linha:
Vantagens:
1. Fácil de encontrar a classe que queremos e visualizar planilha total.
2. Poupar bytes e bits utilizando menos enters, tabulação e espaços, mantendo a manutenibilidade.
3. É de fácil manutenção, em comparação a fazer tudo em uma única linha ( ao menos depois que você acostuma).
4. Recomendado para pequenas planilhas css.
Desvantagens:
1. Pode parecer meio confuso a uma primeira olhada.
2. Pode se tornar muito “comprido”, dificultando a manutenção.
3. Não é recomendado para grandes planilhas, por exemplo 5000 linhas ou mais.
Ando aplicando (aos poucos) aqui no blog e tenho estado satisfeito com o resultado.
Exemplo de um css real, de um pequeno site, é uma pequenas aplicação feita para um exercício da cadeira de programação de internet, feita com o professor Fabrício Pretto, foram utilizadas cores “hardcoded” por opção, não use-as em seu site final.
* {margin: 0 ; padding: 0;} body { background-color: green; font-family: Verdana, Arial, Helvetica, sans-serif; } .main { background-color:white; border:3px solid aqua; margin:20px auto; text-align:center; width:998px; min-height: 400px; -moz-box-shadow:3px 3px 10px black;} .login {-moz-box-shadow:2px 2px 5px black; background-color:green; border:3px solid aqua; color:white; float:right; margin-right:10px; width:300px; padding: 10px; text-align: left; margin-top: 10px; } .mensagem { color:white; font-weight:bold; background-color: red; padding: 1px; margin: 20px; } .copyright { color:darkGreen; font-weight:bold; margin:auto; text-align:center; } #content { padding: 20px; } input, select {background-color: white; border: solid 2px gray; color: DarkGreen;} input[type='submit'], input[type='reset'] {padding: 5px; background: DarkGreen; color: white; margin-right:10px;} .listagem { text-align: left; background-color:LightGrey; border:2px solid aqua; margin-top:20px; border-collapse: collapse; padding: 2px; width: 100% ; -moz-box-shadow:1px 1px 3px black;} .listagem th { font-weight: bold; background-color:CadetBlue; color:white; border: solid 1px aqua; padding: 5px ; } .listagem td { font-weight: normal; border: solid 1px aqua; padding: 5px; } .listagem tr {} h2 { background-color:Aqua; color:DarkSlateGray; padding:5px;} .menu { background:none repeat scroll 0 0 CadetBlue; color:white; height:22px; width:100%; padding: 3px; padding-right: 0; } .menu a { color: white; } img { border: none; }
Se alguém encontrar o site do autor da ideia, por favor cite nos comentários.
A minha classe php CSS Orientado a objeto já faz isso.
0sem comentários ainda