css стиль для родительского (и наследования) или дочерних элементов напрямую?

Question

Вообще говоря, если у нас есть некоторые дочерние элементы, которые должны быть объединены вместе, мы должны поместить этот стиль в родительский элемент и позволить наследованию работать или самим детям? Например, если мы имеем структуру, как показано ниже:

<div class="foo"> 
    <p>should be 2em</p>  
    <ul> 
    <li>should be 2em</li> 
    <li>should be 2em</li> 
    </ul> 
</div> 

то я должен сделать это, как это:

.foo {font-size: 2em;} 

или что-то вроде этого ?:

.foo p, .foo li {font-size: 2em;} 

Я думаю, что этот вопрос очень простой, но, к сожалению, я не нашел хорошего результата Google.

Answer 1

Это хороший вопрос. Я считаю, что вы должны позволить каскадной работе, как и следовало бы, - вот что такое css (каскадные таблицы стилей). Если вы предпочитаете использовать более явный подход - обслуживание css может стать кошмаром.

Если, например, я даю родительскому div bg-цвет желтого цвета, и в нем есть еще 100 divs с их классами/идентификаторами, мы не хотим явно указывать им фоновый цвет: желтый собственности снова и снова.

Так что попробуйте использовать его только в качестве автора, чтобы он был каскадом.

Answer 2

следует использовать минимальную глубину, где это возможно, это сделает ваш сайт быстрее за счет минимизации «переформатирования» время и использование CPU

Избегайте ненужных сложных CSS селекторов - селекторы потомков, в частности, - которые требуют большей мощности процессора для выбора селектора.

ЦСИ: https://developers.google.com/speed/articles/reflow

так, чтобы ваш пример - .foo {font-size: 2em;} предпочтительнее.

Answer 3

.foo {font-size: 2em;} верен