Eu queria saber o que os especialistas fazem quando se trata de escrever código CSS. É ruim usar o estilo tagname.className? A herança causa uma perda perceptível de desempenho? Isso afeta apenas o navegador ao carregar uma página ou também depois? por exemplo: o usuário rola mais para baixo na página, CSS ruim seria o culpado pela rolagem lenta ao exibir uma página com muitas linhas de resultados?

CSS Exemplos:

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{...}

Minha página está exibindo muitas postagens de usuários 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>