Antes de falar do gerador, vou falar um pouco da construção do CSS de forma organizada e sugestiva.

 

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:

[code=”html”]

Todos os direitos reservados

[/code]

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:

[code=”css”]

* { 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 { … }

[/code]

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.

[code=”css”]

#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… */

[/code]

Nos estilos acima, os que são do menu do topo não afetarão o menu do footer.

 

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:

[code=”css”]

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 {}

[/code]

Eu não precisei digitar uma única letra desse CSS.

 

É 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.

[code=”js”]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

 

Link: http://code.google.com/p/jquery-fred-css-cascading-creator/source/browse/#svn%2Ftrunk

 
Espero ter contribuído um pouco com a internet.

4 respostas

  1. 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.

    1. 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.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *