50% de selectores eficientes de css

[isabel021258]

Hola a todos según un análisis que hice tengo un 50% de selectores ineficientes en mi hoja de estilo y la verdad es que me gustaría arreglar esto con la ayuda de ustedes que son los que saben. Les dejo la hoja de estilo y espero que puedan ayudarme a mejorar mi hoja de estilo marcándome los cambios que debería hacer ya que intente hacerlo automáticamente pero me hace desastres visuales.

http://paste2.org/p/1962355

Desde ya agradezco mucho su ayuda. Saludos a todos!!!

[isabel021258]

Parece que a alguien le molesta que una persona no sepa y pida ayuda lo digo por aquel que me dio un voto negativo, no entiendo como puede considerar negativo el hecho de pedir ayuda, ¿será que se cree superior a los demás? quizás lo sea o no pero aún así de alguien aprendió lo que sabe y no creo que le hubiese gustado en sus inicios que fueran despectivos hacia sus consultas o solicitudes de ayuda. Me molestan bastantes los omnipotentes y es por esto que me veo en la obligación de responder a su acción.

[ryugen]

Vamos por parte, en tu hoja de estilo hay una especie de "reset.css" los selectores de este tipo suelen ser ineficientes porque suelen estar dirigidos a todos los elementos de un documento, por ejemplo:

Código CSS:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
background:transparent;
border:0;
font-size:100%;
margin:0;
outline:0;
padding:0;
vertical-align:baseline;
}
 

Contra esto no hay mucho por hacer, uno tiene que decidir, cual es su mayor objetivo si el rendimiento de la página (rapidez de los selectores) o la interoperabilidad de la misma (minimizar diferencias entre browsers).

Por otro lado, veo que luego vuelves a definir estilos para ciertos elementos:

Código CSS:

body {
background:url(../images/bg.jpg) repeat;
color:#4d4d4d;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:20px;
margin:0;
padding:0;
}
h1 {
font-size:24px;
}
h2 {
font-size:22px;
}
h3 {
font-size:20px;
}
h4 {
font-size:18px;
}
h6 {
font-size:14px;
}
 

Entonces, estás enfrentando la doble penalización. Hay un movimiento que se llama "Normalize" (http://necolas.github.com/normalize.css/) que su objetivo es en lugar de resetear todos los estilos a cero como lo hace ("reset.css") lo que hace normalizarlos a un punto común. Muchas veces yo parto de este proyecto para adaptarlo al mío y parto de esa base común a todos pero a la cual ya le puse mi base y no requiero redefinición.

Otras cosas a optimizar son por ejemplo:

Código CSS:

#topnav ul.topRight span {
display:block;
float:left;
padding-right:5px;
}
 

En este caso "ul.topRight" el "ul" es redundante ya estas clasificando al elemento. A menos que este aplicando esa a otro elemento, ejemplo "div" pero no es tu caso.

También en tu documento hay mucho de esto:

Código CSS:

.dd ul li a {
background:url(../images/navSep.png) no-repeat 100% 0;
color:#d9d9d9;
display:block;
float:left;
font-size:10px;
font-weight:700;
padding:7px 25px 8px;
text-transform:uppercase;
}
 

Tres selectores de elementos HTML seguidos, esta clase de selectores son muy poco eficientes. Estas obligando al navegador, a buscar todos los "a" luego todos los "a" que sean hijos, nietos, etc de un "li" y a su vez ese "li" sea hijo, nieto, etc de algún "ul" y que a su vez sea hijo, nieto, etc de un elemento con clase "dd". Recuerda siempre que el navegador aplica estilo de derecha a izquierda y no de izquierda a derecha como estamos acostrumbrados a leer. Esta clase de selectores debes de revisarlo.

Los demás selectores sufren los problemas antes nombrados