CSS: Каков правильный способ работы с несколькими классами текста

Question

Итак, я нахожусь в комиссии за сайт, и я пытаюсь улучшить свой код. Когда вы работаете с веб-сайтом с несколькими типами шрифтов (здесь он большой, там он маленький, там он смелый, здесь он подчеркнут и т. Д.), Это то, где мы используем h1-h6, или мы резервируем их на время, когда есть определенную иерархию, используя вместо этого <p class="xxx"> для определения разных классов текста?

Answer 1

1. Вы определяете почему она должна быть большой, маленький, жирный, подчеркнутый или т.п.
2. Вы пишете разметку, выражающий семантику вы определили в 1 с использованием div и span (семантические свободные элементы), если ничего более подходящее существует и добавление class и id, если вам нужно что-то более конкретное, чем то, что явно предоставляет HTML.
3. Вы пишете CSS селекторы, которые соответствуют, что разметка для наборов правил, которые применяются эти стили

Так только заголовки использования, если у вас есть заголовки, и использовать их в порядке. h1 для основного заголовка, h2 для подзаголовки h3 для subsubheadings и т.д.

Если вы не можете generate a sensible table of contents из заголовков, то вы почти наверняка не использовать их правильно.

Answer 2

Используйте h1-h6, где они должны использоваться. Используйте классы для украшения вашего текста, в том числе внутри p или h1-h6.

Как правило, следите за тем, как ваш сайт будет выглядеть без таблицы стилей. Вы в порядке, пока ваш сайт может передать сообщение даже без таблицы стилей.

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

.bigFont { font-size: 150%; } 
.italicFont { font-style: italic; } 
.grayFont { color: Gray; } 
... 

И применить одну или несколько из этих стилей на тегах.

Answer 3

Семантически h1 - h6 предназначены для заголовков. Если разные типы шрифтов на вашем сайте все заголовки, то в порядке, я подозреваю, что это не так.

Аналогично p используется для параграфов.

Если у вас есть различные пункты, которые имеют различные стили текста in..then да

<p class="firststyle">This is paragraph 1</p> 

<p class="secondstyle">This is paragraph 2</p> 

но помните эти метки имеют смысл. Для получения дополнительной информации see this article