将CSS类用于逻辑是一种好的做法吗

Is it good practice to use CSS classes for logic?

本文关键字：一种 用于 CSS      更新时间：2023-09-26

假设我有这样的代码：

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

和：

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

最后：

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

如果使用CSS类进行逻辑（比如上面的例子），可以吗？

注意，在这里，类.hide不用于任何样式，仅用于逻辑。

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逻辑混合确实是一个值得关注的问题。理想情况下，关注点分离的原则要求每个关注点都用于自己的特定目的，即CSS用于样式设计，JS用于通过添加类来操纵DOM。

例如：

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

这是编码约定的一部分。你应该思考一个术语的含义。

例如，如果我在类名中看到"hide"，我可以认为你的css已经为这个类指定了一个display: none。

你应该更喜欢一个类名，它描述了像toggle/collapse这样的函数，或者一个常见的后缀（显示我，隐藏我）：

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

如果只涉及一个元素，则应该使用"id"属性。

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

如果CSS赋予"class"属性很大的权力，那么它只是CSS选择器的一个特定情况，并且该属性不打算保留给CSS。

相关文章：