javascript - 在元素上使用重复的类名？

Question

我发现有很多框架会在我认为会降低性能的元素上添加新的类名之前检查重复的类名。

元素具有重复的类名时是否有任何问题？

当使用重复的类名时，它还将应用 CSS 类而不会发生冲突。

<div class="aa bb cc aa"></div>

可以简单地添加一个类名elem.className += ' ' + 'aa ee'，甚至元素有重复的类名吗？

Answer 1

具有重复的类名并没有什么“错误”，它只是多余的。可能会对性能产生很小的影响，但只有当你有很多重复时才会真正产生很大的不同。

此外，防止重复只是有助于保持整洁。

Answer 2

ES6 提供了一个方便的 API 用于添加、删除和测试 DOM 元素的类名：classList.add(name) 和 classList.remove(name) 和 classList.contains(name)。

在 ES6 上下文中，这个问题也许可以改写为：

“如果我使用 .classList.add() 多次添加同一个类名，然后想使用 classList.remove() 删除该类，我需要多次调用 classList.remove() 吗？

幸运的是，答案似乎是对 .classList.remove() 的一次调用就足以删除给定的类，无论您添加了多少次。

我无法通过 Google 找到一个简单的答案，所以我编写了以下测试来告诉我它的行为方式。使用 DOM 元素作为参数调用以下函数不会引发错误：

function testClassListRemove (dem)
{
  dem.classList.add ("hello");
  dem.classList.add ("hello");
  dem.classList.add ("hello");
  ok (dem.classList.contains ("hello") );

  dem.classList.remove ("hello");
  ok (!  dem.classList.contains ("hello") );

  function ok (b)
  { if (! b)
    { throw new Error ('not ok ');
    }
  }
}

Answer 3

语义 UI大量使用属性选择器

像这儿

.ui.grid [class*="left floated"].column {
  margin-right: auto;
}
.ui.grid [class*="right floated"].column {
  margin-left: auto;
}

如果您想要margin-left并margin-right拥有auto value，则必须拥有类名段的副本floated（例如<div class="left floated right floated">Lorem</div>）