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

Описание

Атрибут class задаёт один или несколько классов для элемента <a>, позволяя применять к ссылке CSS-стили и JavaScript-обработчики.

Базовое использование:
<a href="#" class="btn">Кнопка-ссылка</a>
Несколько классов:
<a href="/products" class="link primary large">Товары</a>
Стилизованная ссылка:
<style> .feature-link{ background-color: #f7f7f7; color: #333; text-decoration: none; } </style> <a href="#features" class="feature-link" id="main-feature-link"> Наши преимущества </a>

Основные принципы именования классов:

Паттерн Пример Описание
БЭМ menu__link--active Методология БЭМ
Функциональный btn-submit По назначению элемента
Визуальный text-red По внешнему виду
Состояние is-active Индикаторы состояния

Рекомендации по использованию:

  • Используйте осмысленные имена классов
  • Разделяйте слова дефисом (kebab-case)
  • Избегайте стилевых названий (red, left, big)
  • Для модификаторов используйте префиксы (is-, has-)
  • Придерживайтесь единой методологии в проекте
Пример БЭМ-нотации:
<a href="/cart" class="button button--primary button--large button--with-icon"> <span class="button__icon">🛒</span> Корзина </a>

Комбинирование с другими атрибутами:

<a href="/download" class="download-link" download title="PDF, 2.4 MB" rel="noopener"> Скачать каталог </a>

Совет: Используйте классы прежде всего для семантической разметки, а не только для визуального оформления. Это улучшит поддержку кода.