Чему правильнее задавать background-color?

Question

[aaltqna]

<table>
    <caption>Council budget (in £) 2018</caption>
    <thead>
        <tr>
            <th scope="col">Items</th>
            <th scope="col">Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Donuts</th>
            <td>3,000</td>
        </tr>
        <tr>
            <th scope="row">Stationery</th>
            <td>18,000</td>
        </tr>
    </tbody>
</table>

Допустим вот есть таблица и я хочу, чтобы заголовки столбцов были красного цвета. У меня несколько вариантов:

#1
table tr { background-color: red; }
#2
table tr th { background-color: red; }
#3
table thead { background-color: red; }

Т.е. как самому вложенному элементу, так и контейнеру, который содержит все эти элементы. Любой из вариантов мне подходит. Допустим, я не знаю причины установки цвета. Какой из вариантов я должен выбрать? Есть ли какое-то правило на этот счет?

Тоже самое касаемо любых вложенных элементов и любых общих свойств.

Comments

[Adamos]

Правило такое, что на thead ложится tr, а на него - th. Если в ком-то из них background-color непрозрачный, то какого цвета он в предыдущем - уже не играет роли. Поэтому определить самый глубокий - надежнее.
То же касается и любых других вложенных объектов.

Answer 1

[Максим Бенец]

Можно использовать методологию БЭМ.

Вот как примерно должен выглядить код:

<table class = "table">
    <caption>Council budget (in £) 2018</caption>
    <thead class = "table__head">
        <tr class = "head__column">
            <th scope="col" class = "head__item">Items</th>
            <th scope="col" class = "head__item">Expenditure</th>
        </tr>
    </thead>
    <tbody class = "table__body">
        <tr class = "body__column">
            <th class = "body__item" scope="row">Donuts</th>
            <td class = "body__item">3,000</td>
        </tr>
        <tr class = "body__column">
            <th class = "body__item" scope="row">Stationery</th>
            <td class = "body__item">18,000</td>
        </tr>
    </tbody>
</table>

То есть теперь ты можешь обратиться до класа .head__items и стилизировать его как тебе угодно. Вот как это будет выглядить в CSS:

.head__items{
    background-color: red;
}