Лучшая практика для именования классов CSS для использования с селекторами jQuery

При создании тяжелого веб-приложения, основанного на 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 существующих элементов без лишних нарушений во всем мире.

Ответ 1

Попытка разобраться с уникальными именами может хорошо работать для небольших проектов, но чем больше вы получите, тем больше вероятность, что у вас будут конфликты.

Вот почему мне нравится второй подход.

Однако, чтобы упростить его, вы можете использовать SASS, чтобы предварительно обработать ваши файлы css. Затем вы можете вложить такие вложения:

#list {
    .delete {
    }
    .items {
        .item {
        }
    }
}

И вы получите код, похожий на ваш второй пример, без необходимости писать все.

Как и для селекторов jQuery, их все равно нужно будет записывать долго, если вы хотите сделать это таким образом, но такие сложные селекторы часто считаются признаком плохого дизайна.

Ответ 2

Я бы рекомендовал быть максимально консервативным при добавлении классов и идентификаторов в ваш HTML. В большинстве случаев использование идентификаторов для основных разделов содержимого и использование селекторов меток будет работать так же, как и помещение классов на все. HTML в вашем примере можно более кратко переписать как:

<div id="list">
  <button class="delete" />
  <div class="items">
    <div>
      <button class="delete" />
      <h1>Item 1</h1>
    </div>
  </div>
</div>

И тогда селектора jQuery будут:

$("#list > .delete").show();
$(".items .delete").hide();

(Вы можете использовать теги HTML5, которые являются более семантическими и, таким образом, еще меньше полагаются на классы, но я предполагаю, что это выходит за рамки вопроса.)

Ответ 3

Самое чистое решение - разделить все: HTML - CSS - JS.

Для этого вы должны использовать свой первый подход (индивидуальное наименование позволяет применять CSS-классы к любому HTML-элементу), но дополнительно вы добавляете специально названные классы для JS. Таким образом, вам не нужно бояться разбить JS, если они удаляют класс CSS и наоборот.

Хорошо читайте о том, как наилучшим образом реализовать такое соглашение об именах: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

// HTML
<div id="list">
  <button class="list-delete js-list-delete" />
  <div class="list-items">
    <div class="item">
      <button class="item-delete js-item-delete" />
      <h1 class="item-name">Item 1</h1>
    </div>
  </div>
</div>

// CSS
.list-delete {
  color: black;
}

.item-delete {
  color: blue;
}

// Javascript 
$(".js-list-delete").show();
$(".js-item-delete").hide();

Ответ 4

Это зависит от структуры и размера вашей страницы.

Некоторые ситуации будут лучше работать с Вариантом 1, некоторые будут лучше с Вариантом 2.

Я обычно говорю "Что лучше для этого конкретного сценария"

Ответ 5

Вариант 1: Назовите каждый отдельный элемент однозначно.

Это почти невозможно и определенно не лучшая практика. Я думаю, что лучше, если вы можете использовать классы, которые имеют смысл, группируя соответствующие стили и свойства.

Вариант 2: Назовите каждый элемент семантически и выбирать элементы иерархически.

Я предпочитаю этот. По крайней мере, вы знаете поток и вещи.

Вариант 3... n: какой-то гибридный подход? совсем другой подход вообще?

Всегда есть гибридный подход и совершенно другой подход. Я думаю, что у каждого разработчика есть свой стиль кодирования. Если это семантически правильно и хорошо структурировано, это будет лучший подход.

Ответ 6

Это очень хороший вопрос. Я думаю, что ваш первый вариант (имя каждого отдельного элемента однозначно) является правильным, потому что:

Классы элементов (не имена) не так долго,
Акцент делается на группе в целом в любом случае, поэтому структура HTML группы не должна меняться очень часто, а
Дефекты в структуре пользовательского интерфейса могут быть легко распознаны таким образом.

Тем не менее, я бы использовал немного другую разметку:

<div id="list">
    <button class="delete" />
    <div class="list-items">
        <div class="list-item">
            <button class="delete" />
            <h1 class="list-item-name">Item 1</h1>
        </div>
    </div>
</div>