将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逻辑混合确实是一个有效的问题.理想情况下,关注点分离的原则要求每个关注点都用于其自己的特定目的,即用于样式的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