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

Question

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

Answer 1

Я бы рекомендовал быть максимально консервативным при добавлении классов и идентификаторов в ваш 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, которые являются более семантическими и, следовательно, полагаются на классы еще меньше, но я предполагаю, что это выходит за рамки вопроса.)

Answer 2

Самым чистым решением было бы разделить все: 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();

Answer 3

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

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

Однако, чтобы сделать это проще, вы можете использовать SASS , чтобы предварительно обработать ваши CSS-файлы.Затем вы можете выполнить вложение следующим образом:

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

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

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

Answer 4

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

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

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

Answer 5

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

• Классы элементов (не имена) не такие длинные,
• В любом случае особое внимание уделяется группе в целом, поэтому структура 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>

Answer 6

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

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

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

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

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

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