Qual é a melhor forma de organizar o css?

[Robson Silva 1]

Boa noite.

Tenho um vasto conhecimento de css só que eu não sei a melhor forma de organizar ele.

Sempre escuto que dependendo da forma que é organizado ele renderiza mais rápido.

Por exemplo, eu tenho uma div com um elemento h1 nela.

 

<div class="minha-div">
  <h1 class="titulo">Meu titulo</h1>
</div>

 

Posso acessar o h1 fazendo:

 

div.minha-div h1
div.minha-div h1.titulo
.minha-div h1
.minha-div h1.titulo

 

Ou fazendo igual acima e utilizando o ">" para indicar que é filho (children)

 

div.minha-div > h1.titulo

 

Qual é o jeito mais rápido, ou se não houver diferença, qual é a melhor sintaxe?

 

Obrigado

[Marcos Xavier 189]

Robson. Existem diversas maneiras para diminuir o tamanho do CSS e melhorar a performance do seu site.

A dica que deixo é para voce evitar redundancias no codigo

div.minha-div h1 = div.minha-div h1.titulo = .minha-div h1 = .minha-div h1.titulo

 

Nesse caso o melhor seria setar no CSS assim:

 

h1 {.... ;}

Se for uma tag que se repete, crie classes no HTML e no CSS voce seta as propriedades com

suas respectivas medidas, etc

 

.nomedaclasse{.... };

 

Veja mais em:

http://forum.imasters.com.br/topic/436028-escrever-css-de-forma-eficiente/

[Robson Silva 1]

Na verdade a organização do css eu sempre fiz...

O que eu perguntei foi sobre a melhor forma de acessar os elementos do código html, por exemplo:

 

Eu tenho uma div e dentro dela eu tenho h1 e h2, sendo que o h2 se repete

 

<div id="content">
  <h1>Titulo</h1>
  <h2 class="titulo2"></h2>
  <h2 class="titulo3"></h2>
</div>

 

Eu poderia acessar fazendo:

#content h1
#content h2.titulo2 ou #content .titulo2
#content h2.titulo3 ou #content .titulo3

 

Quando eu utilizo h2.titulo2 o browser acessa de forma melhor o elemento eu creio, porque eu coloquei h2 na frente e ele vai direto nos h2, pelo menos isso eu imagino.

Mas será que isso faz diferença na hora de executar meu script?

E utilizando os seletores ">" será que ele renderiza mais rápido?

[Thiago_Henrique 0]

h2.titulo2 seria a mesma,a renderização seria mais ágil

[André D. Molin 15]

Lembrando o que parser de CSS do motor de renderização lê a expressão da direita para a esquerda. Então, se temos a expressão '#wrapper header p', ele irá buscar primeiramente todos os elementos p do documento, mesmo se ele esteja fora de um elemento header, e mesmo se esse header esteja fora do #wrapper.

 

Baseado nisso você pode otimizar muito seu CSS. Um exemplo é adicionar uma classe específica em cada item de uma ul que você tenha no site, e quando for no CSS, fazer algo como '#idDaUl .li-item'. Dessa maneira você foi 100% específico. Só que esse exemplo deve utilizado com cuidado, as vezes nem sempre é legal otimizar de um lado e pecar no outro. Uma analise do que é melhor sempre deve ser feita.

[Robson Silva 1]

E se eu utilizar seletores, o navegador não renderiza melhor?

Exemplo:

 

div > h1 {font-size:20px;}
div > h2 {font-size:14px;}