CSS Performance Question

Me preguntaba qué hacen los expertos cuando se trata de escribir código CSS. ¿Es malo usar el estilo tagname.className? ¿La herencia causa una notable pérdida de rendimiento? ¿Solo afecta al navegador al cargar una página o también después? por ejemplo: el usuario se desplaza hacia abajo en la página, ¿un CSS deficiente sería el culpable del desplazamiento lento cuando se visualiza una página con muchas filas de resultados?

CSS Ejemplos:

div.result-row{...}
div.result-row div.photo-column{...}
div.result-row div.main-column{...}
div.result-row div.main-column div.text-row{}
div.result-row div.main-column div.date-row{}
div.result-row div.action-column{...}

vs

div.result-row{...}
div.photo-column{...}
div.main-column{...}
div.action-column{...}
div.text-row{...}
div.date-row{...}

Mi página está generando muchas publicaciones de usuario como esta ...

<div class="result-row clearfix">
    <div class="photo-column">
        <img src="..." />
    </div>
    <div class="main-column">
        <div class="text-row">
            User's text
        </div>
        <div class="date-row">
            Today
        </div>
    </div>
    <div class="action-column">
        <a href="#">...</a>
        <a href="#">...</a>
    </div>
</div>

Respuestas a la pregunta(16)

Su respuesta a la pregunta