Se você precisa criar um CSS simples, provavelmente não quer utilizar ferramentas com o SCSS, então este artigo pode te poupar muito tempo de trabalho.
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:
<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>
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, 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:
- Crie um favorito na sua barra do navegador
- Coloque o nome “Gerar CSS”
- No lugar da URL coloque o código abaixo e salve.
javascript:function copiarCSS(){let e=prompt("From which sector the css should be created?\nEg: body or .header","#header-v2"),t=confirm("Ok para Clean - cancele para completo.");if(0==document.querySelectorAll(e).length)return void(confirm("Setor não encontrado\nTentar novamente?\n\nSector not found\nTentar again?")&&copiarCSS());let n=[];function r(t,n,r){r=(n=!!n)&&r?r:"";let o="";for(e of t)n||(o+=e.tagName.toLowerCase()),e.id?o+="#"+e.id+" ":e.classList.length>0?o+="."+e.classList[0]+" ":o+=n?e.tagName.toLowerCase()+" ":" ";return%60${r} ${o}%60.trim()}!function e(t,o,a){if(t="string"==typeof t?document.querySelector(t):t,["SCRIPT","STYLE","HEAD","META","LINK","TITLE"].some(e=>e==t.tagName))return;let i=r(o?[t]:function(e){let t=[];for(;e;)t.unshift(e),e=e.parentNode!==document&&e.parentNode;return t}(t),o,a);n.some(e=>e.startsWith(i))||n.push(%60${i} {}%60),t.children.length>0&&Array.from(t.children).forEach(t=>{e(t,o,i)})}(e,t,"");var o=document.createElement("textarea");o.setAttribute("style","width:50%;height:50%;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;"),o.innerHTML=n.join("\n"),o.addEventListener("keyup",function(e){"Escape"==e.key&&this.remove()}),document.body.appendChild(o)}copiarCSS();void(0);É importante copiar todo o código, incluindo o “javascript:” no começo.
Depois disso é só acessar a página desejada, clicar no atalho do favorito e digitar na caixa alguma coisa que identifique o elemento principal que o gerador vai iniciar.
Exemplo: #topo
Digitando isso ele vai criar todas as declarações do topo.
Dúvidas? Veja o vídeo:
4 respostas
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.