CSS em cascata?

[rikaschmitt 54]

Boa tarde gente. Estou com uma dúvida sobre um CSS que andei lendo e não encontrei na internet sobre isso.. nem sei o nome do formato utilizado. A forma como é feito o CSS é estilo cascata, estilo "árvore".. exemplo:

.classe {
  width:200px;
  background:#FFF;
  .classe2 {
    width:300px;
    background:#CCC;
    overflow:hidden;
    a { color:#000; }
  }
}

Acredito eu que ele funciona da mesma maneira que: .classe .classe { } mas de uma forma mais "compacta". Esse formato é novo? Todos os navegadores atualmente aceitam ele?

[Cristhian Souza 0]

Nunca vi isso, não seria mais fácil fazer:

.classe{
    width:200px;
    background:#FFF;
}

.classe2{
.....
} 

deste modo?

 

É desnecessário, você define width: 200px na .classe e depois muda tudo na .classe2

[rikaschmitt 54]

Não, eis a questão.

Acho que é uma outra forma de escrever o CSS de elementos pai-filho.

Tipo...

<div class="classe">
   <div class="classe2">
      <a href="#">Link</a>
   </div>
</div>

.classe { width:300px; }
.classe2 { width:200px; background:#000; }
.classe2 a { color:#CCC; } 

dai ficaria:

.classe { width:300px; }
.classe2 { 
   width:200px; background:#000;
   a { color:#CCC; }
}

[WictorP 9]

Isso ficaria interessante se fosse definir o estilo de varias tags com o mesmo nome porém na ordem, por exemplo.

 

 

<div class="asd"><span>span 1</span><span>span 2</span></div>

 

 

.asd {
 font:10pt Calibri;
 span { color:#f00; }
 span { color:#ff0; }
}

 

Não sei se me expressei bem, mas ai seria foda.

Mas nesse estilo, apenas com pai-filho ficaria desnecessário, e acho que causaria maior desordem.

[rikaschmitt 54]

Ah, sei lá.

Depende o caso.

Eu achei bem mais prático fazer o estilo dentro da classe para os demais elementos filhos.

 

Vi uma utilização disso no CSS do Disqus.

[William Bruno 1501]

Isso é feito com pré processadores, por exemplo: LESS ou SASS.

 

Vc escreve "dessa forma", depois compila para "css normal". Entendeu ?

[rikaschmitt 54]

Isso é feito com pré processadores, por exemplo: LESS ou SASS.

 

você escreve "dessa forma", depois compila para "css normal". Entendeu ?

 

Ah!!

Então se eu utilizar algo desse tipo no css, não vai funcionar?

HAHAHAHA sanacagem.

 

 

Tipo.. eu posso deixar de usar o .css e usar somente o .less, exemplo?

To lendo e achei bem interessante isso..