将CSS类用于逻辑是一种好习惯吗？

Question

假设我有这段代码：

<div class="red hide">
  <!-- More tags here -->
<div>

和

<style>
  .red {
    background-color: red;
  }
</style>

最后：

$(function() {
  if (someConditionIsTrue) {
    $('.hide').hide();
  }
})();

是否可以，如果一个人使用CSS类作为逻辑（例如上面的例子）？

请注意，此处类.hide不用于任何样式，仅用于逻辑。

Answer 1

class属性实际上是DOM的一部分，而不是CSS的一部分。换句话说，class属性（以及该问题的任何其他属性）是HTML结构的一部分，并且已经表示某种形式的客户端逻辑。因此，在CSS以及jQuery和JavaScript中使用属性作为选择器是完全有效的。

例如，这些都是有效用途：

<强> HTML

<div class="hide" data-example="1"></div>

<强> CSS

.hide {display:none;} /* CSS class selector */
[data-example="1"] {display:none} /* CSS attribute selector */

<强> JS

$('.hide').hide(); // jQuery Class selector
$('[data-example="1"]').hide(); // jQuery Attribute selector

---

CSS和JS合并

根据您的评论，将CSS与JS逻辑混合确实是一个有效的问题。理想情况下，separation of concerns的原则要求每个都用于它自己的特定目的，即用于样式的CSS和用于DOM操作的JS，方法是添加类。

例如：

<强> CSS

.hide {display:none;} /* Set the styling of the class in CSS */

<强> JS

$('#some-element').addClass('hide'); // Add the class to the DOM element in JS

Answer 2

这是编码惯例的一部分。你应该考虑一个术语的含义。

例如，如果我看到＆＃34;隐藏＆＃34;在类名中，我可以认为你的css为这个类指定了display: none。

你应该更喜欢一个描述函数的类名，比如切换/折叠或一个普通的后缀（show-me，hide-me）：

I am a very long sentence <span class="hide-me">hide me if you click</span>

如果您只涉及一个元素，则应使用＆＃34; id＆＃34;属性。

所有都是语义问题，您不必认为class属性是为CSS保留的。

如果CSS为＆＃34; class＆＃34;提供了很大的力量。属性，它只是CSS选择器的一个特例，这个属性不打算保留给CSS。