Атрибут class тега <div>
Описание
Атрибут class позволяет назначать один или несколько CSS-классов элементу <div> для стилизации и взаимодействия через JavaScript.
<div class="container primary-box">
<p>Это div с двумя классами</p>
</div>
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.primary-box {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
}
</style>
Основные возможности:
| Применение | Пример | Преимущества |
|---|---|---|
| Стилизация | .alert { color: red; } |
Разделение структуры и оформления |
| JavaScript-селекция | document.querySelector('.menu') |
Удобный доступ к элементам |
| Состояния | .is-active, .hidden |
Управление видимостью и активностью |
Правила именования классов:
<!-- Хорошие примеры -->
<div class="user-profile">...</div>
<div class="notification-alert">...</div>
<!-- Плохие примеры -->
<div class="redBox">...</div> <!-- Неописательно, смешанный регистр -->
<div class="div1">...</div> <!-- Неинформативно -->
Методологии именования:
<!-- БЭМ (Block Element Modifier) -->
<div class="card card--featured">
<div class="card__header">...</div>
<div class="card__body">...</div>
</div>
<!-- Utility-first (например, Tailwind) -->
<div class="p-4 bg-white rounded shadow">...</div>
<!-- SMACSS -->
<div class="l-grid-container is-collapsed">...</div>
Динамическое управление классами:
<div id="dynamicDiv" class="box">Интерактивный div</div>
<button onclick="toggleClass()">Переключить класс</button>
<script>
function toggleClass() {
const div = document.getElementById('dynamicDiv');
div.classList.toggle('highlighted');
}
</script>
<style>
.box {
padding: 10px;
border: 1px solid #ccc;
transition: all 0.3s;
}
.highlighted {
background-color: #fff3cd;
border-color: #ffeeba;
box-shadow: 0 0 8px rgba(255,193,7,0.5);
}
</style>
Рекомендации:
- Используйте осмысленные, содержательные имена классов
- Придерживайтесь одной методологии именования в проекте
- Избегайте привязки классов к конкретным стилям (например, "red-text")
- Для модификаторов используйте префиксы (--modifier, _modifier, is-state)
- Ограничивайте количество классов на одном элементе (5-7 максимум)
Совместимость и производительность:
- Поддерживается всеми браузерами
- Использование классов более производительно, чем inline-стили
- Чрезмерное количество классов может увеличить размер DOM
- Оптимизируйте сложные селекторы (например, избегайте .class1 .class2 .class3)