При создании тяжелого веб-приложения, основанного на Javascript, какова наилучшая практика для именования классов CSS для сохранения кода стилей Javascript и стилей CSS и гибкости структуры пользовательского интерфейса?
Вариант 1: однозначно назовите каждый отдельный элемент.
Например,
// HTML
<div id="list">
<button class="list-delete" />
<div class="list-items">
<div class="item">
<button class="item-delete" />
<h1 class="item-name">Item 1</h1>
</div>
</div>
</div>
// CSS
.list-delete {
color: black;
}
.item-delete {
color: blue;
}
// Javascript
$(".list-delete").show();
$(".item-delete").hide();
Плюсы:
- Выбор элемента для стилизации или манипуляции с JS легко
Минусы:
- Имена элементов начинают становиться очень длинными и трудно отслеживать
- Изменение структуры HTML требует много переименования
Вариант 2: Семантически укажите каждый элемент и выберите элементы иерархически.
Например,
// HTML
<div id="list">
<button class="delete" />
<div class="items">
<div class="item">
<button class="delete" />
<h1 class="name">Item 1</h1>
</div>
</div>
</div>
// CSS
#list > .delete {
color: black;
}
#list > .items > .item > .delete {
color: blue;
}
// Javascript
$("#list > .delete").show();
$("#list > .items > .item > .delete").hide();
Плюсы:
- Именование более естественно, а имена короткие и понятные.
Минусы:
- Выбор элемента для стилизации или манипуляции неудобен
- Изменение структуры HTML требует изменения множества селекторов, поскольку имена привязаны к иерархической структуре.
Вариант 3... n: какой-то гибридный подход? Полностью другой подход вообще?
Помните о проблеме столкновения имен при добавлении дополнительных элементов в будущем, особенно когда у вас есть вложенные элементы. Кроме того, идеальное решение упростит изменение структуры HTML существующих элементов без лишних нарушений во всем мире.