Поместите класс css непосредственно на элемент или его родительский

Question

У меня есть div, и мне нужно покрасить один из его дочерних div. Я думал о том, чтобы установить класс CSS в родительский div, а не непосредственно на дочерний div, поскольку у меня есть класс javascript, который уже имеет ссылку на родителя, поэтому мне не нужно искать детей.

Плохо ли это? Может ли это вызвать у меня проблемы в будущем?

Вот пример http://codepen.io/anon/pen/pJgzJp?editors=110

HTML:

Это лучше

<div class="parent1 whatIPrefer"> 
    <div class="children1"> 
    </div> 
</div> 

чем

<div class="parent2"> 
    <div class="children2 meh"> 
    </div> 
</div> 

CSS

.parent 1 { ширина: 200 пикселей; высота: 200px; }

.children1{ 
    width:200px; 
    height:200px; 
} 

.whatIPrefer .children1{ 
    background-color: gold; 
} 

.parent2{ 
    width:200px; 
    height:200px; 
} 

.children2{ 
    width:200px; 
    height:200px; 
} 

.meh{ 
    background-color: tomato; 
} 

Больше Контекст: Я хочу, чтобы отобразить проблемные элементы в красный цвет на моей странице. Там может быть много деталей цветные таким образом, мой код Javascript, чтобы цвет его выглядеть следующим образом

for (var i = 0; i < this._report.WorksheetSectionIDs.length; i++) { 
    var worksheetSection = this._report.GetWorksheetSection(i); 

    if (worksheetSection._worksheet._grid.getColumns().length != columnsCount) { 
     this.Errors.push("Worksheet " + worksheetSection._sectionID + " doesn't have the right number of columns."); 
     worksheetSection.SetInErrorState(); 
    } 
} 

где каждый worksheetSection имеет ссылку на родительский элемент, так что я могу легко добавить класс к нему.

Answer 1

Это зависит от структуры веб-сайта и от элементов, которые вы ставите. Например, если вы знаете, что заголовок будет всего одним, вы можете легко создать стиль заголовка, но если есть больше заголовков с разными стилями, например, заголовок в теле, заголовок в голове и т. Д. В этом случае хорошо создать родительский элемент throw.

В моих проектах я всегда создаю элементы родительского элемента, иногда это бесполезно, но это хорошая практика, и вы никогда не знаете, когда вашей сети понадобятся новые элементы.

Answer 2

Ваша ситуация во многом зависит от вашего прецедента. У вас не было много контекста, поэтому это может быть лучшим или не лучшим приложением для таргетинга вашего ребенка div.

Вы можете получить доступ к ребенку в div с помощью дочернего селектора для CSS:

.whatIPrefer > div { styles }

Here is an excellent article on selecting children of a parent element - проверить его.

Надеюсь, это поможет. Пожалуйста, прокомментируйте ниже любые другие вопросы. Спасибо