Aunque tu pregunta es sobre el rendimiento (y sugeriría, mídela ...) Me gustaría agregar que siempre debes intentar usar la definición más corta posible para identificar los elementos correctos.
La razón no es el tamaño del archivo, sino la capacidad de ampliar su sitio sin alterar el CSS principal.
Por ejemplo, usted tiene esta parte en su sitio html:
<div id="Header">
<h1>Css example</h1>
<h2>Welcome to the css example site</h2>
<p>An example page by davy</p>
</div>
y este es el css:
#Header
{
background-color: #ffeedd;
padding: 1em;
}
#Heading h1
{
font-size: 3em;
color: #333;
}
#Heading h2
{
font-size: 1.5em;
color: #666;
}
#Heading p
{
margin: 0 0.5em 1.5em 1em;
font-size: 1.1em;
color: #999;
}
Y más tarde se obtendría a una página donde' Me gusta que tu encabezado tenga un fondo diferente.
Si eligió usar div#Header en su archivo css principal, tendría que cambiar el html (que según su sistema podría significar crear una plantilla/página maestra diferente) para agregar una clase adicional, o crear una selector css calificado como body div#Header.
Utilizando el selector más corto todavía puede usar div#Header { background : ... } para cambiar su encabezado. Puede crear un archivo css adicional y cargarlo en su encabezado en esa página (si está permitido) o agregar una definición de estilo directamente a su sección <head>. Lo bueno de esto es que su archivo CSS no crece con los selectores para cada página diferente, y puede mantenerse alejado de classitis.
También podría usarlo para cambiar el método de tamaño de su página (estático/fluido) de modo que una plantilla/página maestra use el CSS predeterminado, y el otro se deriva de esa plantilla/página maestra y simplemente vincula un CSS llamado FluidWitdth90. CSS para cambiar la plantilla a un diseño fluido de 90% de ancho.
whats a ipd-tags? –
Supongo que algo específico de la aplicación – nickf
Si el sitio cambia, el * primer * método también corre el riesgo de no identificar los elementos correctos. – nickf