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

Описание

Атрибут class для тега <article> позволяет назначать один или несколько CSS-классов для стилизации и идентификации статьи. Это основной инструмент для управления внешним видом и поведением контента.

Пример использования:
<article class="news-article featured"> <h2>Последние новости</h2> <p>Содержание новостной статьи...</p> </article>

Основные применения:

Применение Пример Преимущества
Стилизация .news-article { background: #f8f9fa; } Единообразный дизайн
JavaScript-взаимодействие document.querySelectorAll('.featured') Простота выбора элементов
Логическая группировка class="article premium" Четкая семантика

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

  • Важно: Используйте осмысленные имена (не class="a1 b2")
  • Придерживайтесь единого стиля (BEM, kebab-case)
  • Разделяйте функциональные и стилевые классы
  • Избегайте избыточных классов

Пример с BEM-нотацией:

<article class="article article--featured"> <h2 class="article__title">Заголовок</h2> <div class="article__content"> <p>Основной текст статьи</p> </div> </article>

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

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

Пример с JavaScript:

<script> // Добавление класса при прокрутке window.addEventListener('scroll', function() { const article = document.querySelector('.main-article'); if (window.scrollY > 300) { article.classList.add('scrolled'); } else { article.classList.remove('scrolled'); } }); </script>

Совет: Для сложных статей используйте классы совместно с ARIA-ролями для улучшения доступности.

Важно: Не злоупотребляйте классами - для простых стилей предпочтительнее семантические селекторы.

Примечание: Классы для <article> особенно полезны в CMS и системах управления контентом, где нужно различать типы статей.