Gerador de CSS em Cascata

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:

  1. Crie um favorito na sua barra do navegador
  2. Coloque o nome “Gerar CSS”
  3. 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:

Respostas de 4

  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 *

Precisa de ajuda com algo relacionado a este assunto?

Me chama no WhatsApp que eu posso te ajudar!

Fale no WhatsApp

Antes só me fala seu nome e WhatsApp