相关疑难解决方法(0)

在构建Javascript密集的Web应用程序时,命名CSS类以保持Javascript代码和CSS样式表清洁以及UI结构灵活的最佳实践是什么？

选项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 …