Antes de falar do gerador, vou falar um pouco da construção do CSS de forma organizada e sugestiva.
- Introdução
Cada programador tem sua forma de organizar seu código e seus troques adquiridos com a experiência.
Com o CSS temos que tomar alguns cuidados para que um estilo não conflite onde não deve.
Veja o código abaixo:
<body> <div id="topo"> <ul class="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </div> <div id="conteudo"> <div class="coluna-esquerda"> <ul class="categorias"> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 2</a></li> <li><a href="#">Categoria 3</a></li> <li><a href="#">Categoria 4</a></li> </ul> </div> <div class="coluna-direita"> ... </div> </div> <div id="rodape"> <ul class="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> <div class="direitos">Todos os direitos reservados</div> </div> </body>
Note que temos dois menus no site, um no topo e outro no rodapé.
Podemos criar um estilo genérico com o nome .menu{} que afetará os dois e podemos criar estilos específicos como #topo .menu{} e #rodape .menu{}
A vantagem de nunca utilizar estilos genéricos para itens visuais é que uma hora podemos utilizar aquela classe em outra página e termos uma surpresa.
Então para evitarmos ficar criando .menu2{}, .menu3{}, .menu4{} é que utilizamos a técnica de cascata.
Eu aconselho utilizar estilos genéricos apenas para itens importantes, que podem se repetir em vários lugares e que não são vistos pelo usuário.
Como por exemplo:
* { margin: 0; padding: 0; }
.clear { clear: both; } /* escapa os floats */
.center { width: 990px; margin: 0 auto; } /* centraliza o conteúdo */
body { font-family : Arial; font-size: 12px; }
img { border: 0; } /* remove as bordas das imagens no IE */
a { text-decoration: none; } /* remove o underline */
li { ... } /* remove o estilo de lista */
input { ... }
textarea { ... }
select { ... }
button { ... }
Esses são os estilos padrões que eu coloco sempre que inicio um site.
Agora vamos aos estilos específicos para cada parte do site.
Vamos fazer a folha de estilos do HTML apresentado lá em cima.
#topo {}
#topo .menu {}
#topo .menu li {}
#topo .menu li a {}
#conteudo {}
#conteudo .coluna-esquerda {}
#conteudo .coluna-esquerda .categorias {}
#conteudo .coluna-esquerda .categorias li {}
#conteudo .coluna-esquerda .categorias li a {}
/* e etc... */
Nos estilos acima, os que são do menu do topo não afetarão o menu do footer.
- Mas por que utilizar o CSS em cascata?
Eu não quero ensinar como construir um CSS, mas sim como fazer um de forma organizada.
Um mal costume de alguns programadores é fazer o código de maneira nada sugestiva como usar .m{} ao invés de .menu{}
Ou então .esq{} ou invés de .coluna-esquerda{}
Sei que é chato digitar o código inteiro e que como sou eu que estou fazendo o site vou saber o que aquele .m{} representa.
Mas será que daqui a 1 ano vou lembrar? E se outra pessoa tiver que dar manutenção no meu código?
Por isso que criar um código organizado e sugestivo é sempre aconselhável.
E para que não hajam desculpas de preguiça (como um dia eu tive),.
Eu vos apresento o meu gerador de folha de estilo em cascata.
Lembra aquele código HTML ali em cima?
Olha o CSS completo dele:
html body {}
html body div#topo {}
html body div#topo ul.menu {}
html body div#topo ul.menu li {}
html body div#topo ul.menu li a {}
html body div#conteudo {}
html body div#conteudo div.coluna-esquerda {}
html body div#conteudo div.coluna-esquerda ul.categorias {}
html body div#conteudo div.coluna-esquerda ul.categorias li {}
html body div#conteudo div.coluna-esquerda ul.categorias li a {}
html body div#conteudo div.coluna-direita {}
html body div#rodape {}
html body div#rodape ul.menu {}
html body div#rodape ul.menu li {}
html body div#rodape ul.menu li a {}
html body div#rodape div.direitos {}
Eu não precisei digitar uma única letra desse CSS.
- Como utilizar o gerador?
É simples: Basta executar esse código no console do seu Firebug. (Sim, Firebug. Você vai entender o porque quando tentar no Chrome).
Obs.: Você precisa ter o jQuery funcionando na página.
function copiarCSS(){var aa=prompt('A partir de qual setor o css deve ser criado?\nEx.: body ou .header\n\nFrom which sector the css should be created?\nEg: body or .header');if($(aa).size()==0){if(confirm('Setor não encontrado\nTentar novamente?\n\nSector not found\nTentar again?')){copiarCSS();} return;} var ba="";function entrar(aa){aa=$(aa)[0];var ca="";var da=$(aa).parents();for(i=da.size()-1;i>=0;i--){ca+=da[i].tagName.toLowerCase()+(da[i].id?'#'+da[i].id:'')+(da[i].classList.length>0?"."+da[i].classList[0]:'')+" ";}if(aa.tagName=='SCRIPT'||aa.tagName=='STYLE'||aa.tagName=='HEAD'||aa.tagName=='META'||aa.tagName=='LINK'||aa.tagName=='TITLE')return;ca+=aa.tagName.toLowerCase()+(aa.id?"#"+aa.id:"")+(aa.classList.length>0?"."+aa.classList[0]:"")+" {}";if(ba.indexOf(ca)==-1)ba+=ca+";";if($(aa).children().size()>0){$($(aa).children().get()).each(function(){entrar(this);});}};entrar(aa);ba=ba.split(';');saida="";for(i=0;i<ba.length;i++){saida+=(ba[i]+'\n');}console.log(saida);alert(saida);}copiarCSS();
Caso goste do meu código e adote ele, você pode criar um favorito no seu firefox com esse código.
É só adicionar javascript: no início do código.
Ficaria assim:
- Google Code do projeto
Link: http://code.google.com/p/jquery-fred-css-cascading-creator/source/browse/#svn%2Ftrunk
Espero ter contribuído um pouco com a internet.
Caso alguem queira usar via chrome é só usar a instrução abaixo.
O comando deve ser inserido diretamente no “Console Java Script” (Ctrl + Shift + J)
var s = “”;
function copiarCSS(){var aa=prompt(‘A partir de qual setor o css deve ser criado?\nEx.: body ou .header\n\nFrom which sector the css should be created?\nEg: body or .header’);if($(aa).size()==0){if(confirm(‘Setor não encontrado\nTentar novamente?\n\nSector not found\nTentar again?’)){copiarCSS();} return;} var ba=””;function entrar(aa){aa=$(aa)[0];var ca=””;var da=$(aa).parents();for(i=da.size()-1;i>=0;i–){ca+=da[i].tagName.toLowerCase()+(da[i].id?’#’+da[i].id:”)+(da[i].classList.length>0?”.”+da[i].classList[0]:”)+” “;}if(aa.tagName==’SCRIPT’||aa.tagName==’STYLE’||aa.tagName==’HEAD’||aa.tagName==’META’||aa.tagName==’LINK’||aa.tagName==’TITLE’)return;ca+=aa.tagName.toLowerCase()+(aa.id?”#”+aa.id:””)+(aa.classList.length>0?”.”+aa.classList[0]:””)+” {}”;if(ba.indexOf(ca)==-1)ba+=ca+”;”;if($(aa).children().size()>0){$($(aa).children().get()).each(function(){entrar(this);});}};entrar(aa);ba=ba.split(‘;’);saida=””;for(i=0;i<ba.length;i++){saida+=(ba[i]+'\n');} s = saida; }copiarCSS(); s;
Caro Frederico, o código funciona bem, porem acho que algum dispositivo de injeção de script deve alterar o conteúdo, basicamente alterei a primeira linha e final do script, o corpo ainda é igual.
Abraços.
Obrigado pela dica João.
Fiz uma pequena alteração no final do código usando o console.log() que também funciona no Chrome.
O Resultado será o mesmo que o seu.
Obrigado pelos créditos. Espero que torne seu trabalho mais fácil.