Атрибут class тега <dir>
Описание
Атрибут class позволяет назначать классы CSS для элемента <dir>, однако важно отметить, что сам тег <dir> является устаревшим в HTML5. Вместо него рекомендуется использовать <ul> или <ol> с соответствующими стилями.
Важно: Элемент <dir> устарел в HTML5. Используйте <ul> или <ol> с CSS классами для стилизации списков.
Историческое использование:
<!-- Устаревший синтаксис -->
<dir class="directory-list compact-view">
<li>File1.txt</li>
<li>File2.txt</li>
</dir>
Современная альтернатива:
<ul class="directory-list compact-view">
<li>File1.txt</li>
<li>File2.txt</li>
</ul>
<style>
.directory-list {
font-family: monospace;
list-style-type: none;
padding-left: 0;
}
.compact-view li {
padding: 2px 0;
margin: 0;
line-height: 1.2;
}
</style>
Правила применения классов:
| Правило | Пример | Описание |
|---|---|---|
| Осмысленные имена | file-directory |
Отражают назначение элемента |
| Стиль именования | kebab-case (рекомендуется) |
Единообразие в проекте |
| Разделение ответственности | directory compact |
Отдельные классы для структуры и состояния |
Примеры хороших практик:
<ul class="file-explorer icon-list">
<li class="file-item"><span class="file-icon">📄</span> document.pdf</li>
<li class="dir-item"><span class="folder-icon">📁</span> images/</li>
</ul>
<style>
.file-explorer {
list-style: none;
padding: 0;
margin: 0;
width: 300px;
}
.icon-list li {
padding: 4px 8px;
cursor: pointer;
}
.file-item:hover {
background-color: #f0f6ff;
}
.dir-item:hover {
background-color: #fff6e8;
}
</style>
Динамическое управление классами:
<ul id="dynamicDir" class="file-list">
<li>Document1.txt</li>
<li>Document2.txt</li>
</ul>
<button onclick="toggleCompactView()">Toggle Compact View</button>
<script>
function toggleCompactView() {
const list = document.getElementById('dynamicDir');
list.classList.toggle('compact-view');
}
</script>
<style>
.file-list {
transition: all 0.3s ease;
}
.compact-view {
font-size: 0.9em;
line-height: 1.1;
}
.compact-view li {
padding: 1px 0;
}
</style>
Примечание: Хотя технически можно использовать классы с элементом <dir>, настоятельно рекомендуется перейти на современные альтернативы (<ul>, <ol>), которые лучше поддерживаются и предоставляют больше возможностей для стилизации через CSS.