Атрибут class тега <span>
Описание
Атрибут class позволяет назначать один или несколько CSS-классов элементу <span> для стилизации и взаимодействия через JavaScript. Это универсальный контейнер для фразового контента, не меняющий семантику текста.
Пример использования:
<p>Это <span class="highlight">важный</span> текст с <span class="hint">подсказкой</span>.</p>
Основные возможности:
- Множественные классы: Можно указать несколько классов через пробел
- Стилизация: Позволяет изменять внешний вид текста
- JavaScript доступ: Возможность выборки и управления через классы
- Семантика: Не изменяет смысловое значение текста
Пример стилизации:
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
.hint {
border-bottom: 1px dotted #666;
cursor: help;
}
</style>
<p>
Наведите на <span class="hint">подсказку</span>
или обратите внимание на <span class="highlight">ключевые моменты</span>.
</p>
Рекомендации по именованию:
| Тип класса | Пример | Использование |
|---|---|---|
| По назначению | error-message |
Для конкретных типов контента |
| По внешнему виду | text-primary |
Для повторяющихся стилей |
| Состояние | is-active |
Для динамических изменений |
Лучшие практики:
- Используйте семантичные имена классов
- Разделяйте стилевые и функциональные классы
- Избегайте избыточного количества классов
- Для модификаторов используйте согласованный префикс (--modifier)
- Тестируйте отображение на разных устройствах
Пример с БЭМ-методологией:
<style>
.text__highlight {
color: #d32f2f;
}
.text__highlight--important {
font-weight: bold;
text-decoration: underline;
}
</style>
<p>Это <span class="text__highlight text__highlight--important">очень важный</span> текст.</p>