¿Cuál es el estilo de CSS más rápido/más eficiente

Question

He tenido curiosidad sobre qué método de estilo CSS es más rápido (representación) y luego simplemente desde una perspectiva de mejores prácticas, qué método tiene más sentido (bastante subjetivo, diría?) .

puedo crear clases base como:

.rounded-corners-5 { 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
} 

O

que pueda hacer otro método de aplicación de estilos a varios ID/Clases:

#box1, #header, #container, .titles { 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
} 

Answer 1

Estoy de acuerdo con tster: la primera significa poner un comando visual en el HTML (siempre ten cuidado con las clases con nombres que describen su apariencia en lugar de su propósito). Si tiene un propósito lógico (por ejemplo, .sección), entonces puede ser más limpio. De lo contrario, usaría la segunda versión.

Lo que realmente está sufriendo es la falta de abstracción en CSS, lo que significa que tiende a sufrir de duplicación y/o agrupaciones impares para evitar la duplicación. Es posible que desee mirar this article about Sass. La idea general es que usted escriba un documento Sass (que no es exactamente CSS, pero similar) que luego se compila en un documento CSS que luego se implementa.

Answer 2

yo siempre utilizar el segundo método, me parece más lógico. Realmente no sé si es más rápido de renderizar, pero es más nítido en el archivo, y mantiene juntas todas las ID/clases atribuidas de manera similar.

Answer 3

El primer método funciona más rápido si no termina con múltiples identificaciones y clases en un elemento, porque entonces puede recordar más fácilmente lo que hacen las clases/id cuando está editando su HTML o script de servidor . Sin embargo, no sé cuál rinde más rápido, y eso podría ser incluso subjetivo para muchas cosas, como el navegador, la antigüedad de la computadora, etc., ya que no sé nada sobre los aspectos internos de los algoritmos de renderizado en el varios motores de renderizado (no es que yo pueda saber acerca de 2 de ellos que todos conocemos y odiamos sin cambiar de trabajo ...).

Answer 4

No sé cuál se representará más rápido. Pero desde una perspectiva de mantenimiento, quisiera odiar usando la segunda opción porque significaría que el elemento #header podría tener reglas definidas en muchos lugares diferentes en el CSS. No quisiera tener que buscarlo cada vez que quisiera hacer un cambio.

Answer 5

No creo que la sintaxis sea tan importante para la velocidad.

El rendimiento se trata más cuando el navegador tiene que hacer los repintados. Lo que sucede en eventos como :hover o cuando se realizan cambios en el DOM. Los repintes en los elementos ubicados en absolute o fixed serían los más rápidos, ya que hay menos para volver a pintar, porque no están en línea, por lo que no tendrá que volver a pintar los elementos envolventes.

Puede usar el add-on Google Page Speed para Firebug para ver cómo ocurren los repintados.

Creo que más navegadores utilizarán aceleración de hardware para cosas como esta, lo que acelerará mucho las cosas.

En cuanto a la sintaxis, utilizaría las clases y los identificadores que describen el contenido o el uso del elemento (como en el segundo ejemplo). Ahora no tiene que cambiar su HTML cuando decide que todos los elementos con la clase .rounded-corners-5 deben tener border-radius: 10px. Mantenga el estilo y la estructura separados.

Answer 6

Cuanto más eficiente es el que ocupa menos espacio y hace que la página web se cargue más rápido y rinda más rápido.

Esto también ayuda con la optimización del motor de búsqueda (SEO).

Answer 7

En lo que respecta al estilo, escriba su html para que sea solo una función y escriba CSS para agregar el formulario. Entonces, para Ids, deberían identificar el elemento. Yendo en la otra dirección, esencialmente escribiendo el estilo en html, p. Ej. .blue{color:blue}, que simplemente desordenará tu html con clases. El objetivo de CSS es permitirle intercambiar hojas de CSS y tener un control total sobre la apariencia.