Ответ 1
Чтобы действительно ответить на ваш вопрос, я должен сначала ответить на несколько других вопросов. Потому что, как вы увидите, все о контексте.
- В чем смысл HTML?
- Что такое
div
? - Как он отличается от других элементов HTML?
- И что это значит, когда у элемента есть класс (или набор классов)?
Я дам вам свое мнение об ответах на этот вопрос, и тогда мы сможем провести осмысленное обсуждение лучших практик.
В чем смысл HTML?
Точка HTML - это добавить контекст к вашим данным. Текст, сам по себе, может быть очень сильным. С момента изобретения печатного станка он очень хорошо служил человечеству как чрезвычайно мощный инструмент коммуникации. Возьмите следующий документ, например:
My shopping list
Bread
Milk
Eggs
Bacon
Даже с помощью этого простого текстового документа большинство людей может очистить намерение писателя; его список покупок. Существует заголовок и набор элементов списка, которые необходимо приобрести.
Итак, какова точка HTML, если достаточно простых текстовых документов?
Справедливый вопрос. Если текста достаточно для общения, то зачем нам HTML?
Читатель документа пытается проанализировать информацию, которую они получают. Этот процесс встроен в массу культурных трюков и изученных моделей, которые используются для восстановления первоначального намерения. Для большинства людей с базовым пониманием английского языка тривиально определить смысл документа. Однако по мере увеличения сложности документа (или сближения читателя с контекстом уменьшается), становится все труднее правильно разобрать. Сделаны предположения; контекст становится неясным. В конце концов, способность читателя точно декодировать сообщение разваливается, и сообщение является неотличимым.
Это пространство, в котором существует HTML. Он предназначен для обертывания данных, предоставления контекста и смысла. Поэтому, даже если вы (или компьютер) не можете обработать фактическую информацию, вы можете понять контекст, в котором она должна быть. Например, тот же документ с HTML:
<h1>My shopping list</h1>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
Теперь, даже если мы не смогли понять фактические данные, у нас есть контекстный фон для интерпретации данных. У нас есть заголовок и неупорядоченный список со списком элементов списка.
<h1>Xasdk bop boop</h1>
<ul>
<li>Zorch</li>
<li>Quach</li>
<li>Iach</li>
<li>Xeru</li>
</ul>
Я понятия не имею, что это значит, но, по крайней мере, я знаю, что есть заголовок и неупорядоченный список. Именно так браузер видит ваш HTML-документ: некоторые данные, завернутые в контекст.
Что такое div
? Чем он отличается от других элементов HTML?
HTML-элементы определяют контекст; они описывают содержимое, которое они обертывают. HTML не должен изменять или изменять значение данных, он просто увеличивает его и определяет отношения между данными: parent, child, sibling, ancestor... Таким образом, элемент li
описывает элемент списка. Элемент h1
описывает заголовок. Элемент table
описывает таблицу и т.д.
Итак, что такое div
? Ну, div
- это элемент HTML на уровне блока, который не имеет никакого контекста. Само по себе это ничего не значит (кроме факта, что это блок).
В то время как большинство других элементов HTML (за исключением элемента span
) имеют какой-то явный контекст, элемент div
этого не делает. Это огромная разница. Это пустая коробка. Это коробка, которая ничего не значит. Когда вы помещаете что-то в "div", вы говорите, что это в коробке, но это поле на самом деле мало что значит.
Итак, какова точка div
then?
Тег div
предоставляет пустой список для определения вашего собственного контекста. Вернемся к нашему примеру списка покупок: прямо сейчас между неупорядоченным списком и заголовком существует слабая связь. Они слабо связаны с братьями и сестрами, они просто находятся рядом друг с другом, но ничто действительно не связывает их вместе как единое целое. Мы хотели бы сказать следующее:
<grocery_list>
<h1>My shopping list</h1>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
</grocery_list>
Но мы не можем этого сделать в рамках спецификации HTML. Но что мы можем сделать, это вставить их в "ящик":
<div>
<h1>My shopping list</h1>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
</div>
Что означает, когда элемент имеет класс (или набор классов)?
Но, опять же, это окно не означает, что сейчас. То, что мы действительно хотели бы сделать, это дать этому поле определенный контекст. Мы хотим придумать свой собственный элемент. То, где вступает в игру атрибут class
. В то время как элементы HTML дополняют данные, атрибуты HTML дополняют элементы. Мы можем сказать:
<div class="shopping_list">
<h1>My shopping list</h1>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
</div>
Итак, мы говорим, что наш div
действительно является shopping_list
. Этот shopping_list
имеет заголовок и неупорядоченный список элементов. Предполагается, что HTML сделает ваши данные более ясными, не менее ясными.
Итак, наконец, как все это относится к вашему вопросу?
Когда вы пишете CSS, вы используете свой контекст (элементы, классы, идентификаторы и отношения между элементами) для определения стиля.
Итак, вернемся к примеру списка покупок. Я мог бы написать стиль, в котором говорилось:
<style>
ul {
background-color: red;
}
</style>
Но что я на самом деле говорю? Я говорю: "Все неупорядоченные списки должны иметь цвет фона красного цвета". И вопрос в следующем: действительно ли это я? При написании CSS вы должны учитывать свою структуру. Правильно ли говорить, что все элементы div
должны выглядеть определенным образом или давать только div
конкретный класс? Например, я бы сказал, что это может быть лучше:
div.shopping_list h1 { font-weight: bold; font-size: 2em; border-bottom: 1px solid black; }
div.shopping_list ul li {
margin-bottom: 1ex;
}
Здесь я говорю, что эти элементы в этом конкретном контексте должны выглядеть именно так.
Итак, в вашем примере, что означает div
с классом test
? Что такое контент? В каком контексте вы пытаетесь разъяснить? Это скажет вам, как выглядят ваши селекторы.
Например:
<div class="shopping_list important">
<h1>My shopping list</h1>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
</div>
<table class="budget">
<tbody>
<tr class="important">
<td>Account Balance</td><td>$0.00</td>
</tr>
</tbody>
</table>
Является ли селектор CSS .important
хорошей идеей? Является ли "важным списком покупок" тем же, что и "важная строка таблицы в таблице бюджета"?
И только вы можете ответить на это, в зависимости от ваших данных и того, как вы решили пометить эти данные.
Существует множество технических тем, которые затрагивают специфику CSS, например, хорошие практики для поддержки сложных таблиц стилей и сложных ассоциаций между элементами, но в конечном итоге все сводится к ответу на эти вопросы:
- Что я пытаюсь общаться? (Данные/Content)
- В каком контексте находятся данные? (HTML)
- Как это должно выглядеть? (CSS)
Как только вы сможете ответить на эти вопросы, все остальное начнет вставать на свои места.