Атрибут class тега <b>

Описание

Атрибут class позволяет назначать один или несколько CSS-классов элементу <b> для стилизации и управления через JavaScript. В отличие от глобальных стилей, классы обеспечивают модульный и переиспользуемый подход.

Пример использования:
<p> Это <b class="highlight keyword">важный</b> текст, который нужно выделить. </p>

Основные возможности:

Применение Пример Преимущества
CSS-стилизация .highlight { background-color: yellow; } Гибкое оформление
JavaScript-селекция document.querySelectorAll('.keyword') Удобный доступ
Состояния элемента .active, .hidden Динамическое управление

Практические примеры:

1. Стилизация через классы:
/* Базовый стиль для выделенного текста */ .highlight { padding: 0.2em 0.4em; border-radius: 0.2em; } /* Специфичный стиль для ключевых слов */ .keyword { color: #d63384; font-family: monospace; }
2. Динамическое управление классами:
const boldElements = document.querySelectorAll('b.highlight'); // Добавить класс всем элементам boldElements.forEach(el => { el.classList.add('animated'); }); // Переключить класс по клику document.querySelector('b.keyword').addEventListener('click', function() { this.classList.toggle('active'); });

Рекомендации по именованию:

  • Используйте осмысленные имена (product-name, alert-text)
  • Придерживайтесь единого стиля (BEM, kebab-case)
  • Избегайте презентационных имен (red-text, big-font)
  • Разделяйте слова дефисами

Лучшие практики:

  • Группируйте связанные стили в одном классе
  • Используйте классы-модификаторы для вариаций
  • Минимизируйте количество классов на элементе
  • Комбинируйте с семантическими тегами

Ограничения: Чрезмерное использование классов может привести к "замусориванию" HTML-разметки. Для сложных проектов рассмотрите CSS-in-JS решения.

Пример по методологии BEM:

<p class="article__text"> Новый <b class="article__keyword article__keyword--highlight">алгоритм</b> показывает лучшие результаты. </p> <style> .article__keyword { font-weight: bolder; } .article__keyword--highlight { background-color: #fff3cd; } </style>

Совет: Для сложных проектов используйте CSS-препроцессоры (Sass/Less) или CSS-модули для автоматизации работы с классами.

Примечание: В отличие от id, к одному элементу можно применять несколько классов, разделенных пробелами.