正文 

当前位置： 首页 > 问答 >

用于 jQuery 选择器的 CSS 类命名的最佳实践

     2023-03-05     237

关键词：

【中文标题】用于 jQuery 选择器的 CSS 类命名的最佳实践【英文标题】：Best practice for CSS class naming for use with jQuery selectors 【发布时间】：2011-08-06 16:00:23 【问题描述】：

在构建重 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 > .items > .item > .delete 
  color: blue;


// Javascript
$("#list > .delete").show();
$("#list > .items > .item > .delete").hide();

优点：

命名感觉更自然，名称简短明了

缺点：

选择用于样式或操作的元素很麻烦 更改 HTML 结构需要更改很多选择器，因为名称与层次结构相关联

选项 3...n：一些混合方法？完全不同的方法？

以后添加更多元素时，请记住名称冲突的问题，尤其是当您有嵌套元素时。此外，理想的解决方案是可以轻松更改现有元素的 HTML 结构，而不会对其他任何地方造成太多干扰。

【问题讨论】：

【参考方案1】：

我建议在向 HTML 添加类和 ID 时尽可能保守。在大多数情况下，对内容的主要部分使用 ID 并使用标签选择器将与在所有内容上放置类一样有效。您示例中的 HTML 可以更简洁地重写为：

<div id="list">
  <button class="delete" />
  <div class="items">
    <div>
      <button class="delete" />
      <h1>Item 1</h1>
    </div>
  </div>
</div>

然后 jQuery 选择器将是：

$("#list > .delete").show();
$(".items .delete").hide();

（您可以使用更具语义性的 HTML5 标签，因此对类的依赖更少，但我认为这超出了问题的范围。）

【讨论】：

尽可能使用 ID 实际上更好，因为它使用原生 JavaScript getElementById，这比 jQuery 按类选择要快。【参考方案2】：

最简洁的解决方案是将所有内容解耦：HTML - CSS - JS。

为此，您将使用您的第一种方法（单独命名允许将 CSS 类应用于任何 HTML 元素），但另外为 JS 添加特殊命名的类。像这样，如果他们删除 CSS 类，您不必害怕破坏您的 JS，反之亦然。

关于如何最好地实现这样的命名约定的好读物： http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

// HTML
<div id="list">
  <button class="list-delete js-list-delete" />
  <div class="list-items">
    <div class="item">
      <button class="item-delete js-item-delete" />
      <h1 class="item-name">Item 1</h1>
    </div>
  </div>
</div>

// CSS
.list-delete 
  color: black;


.item-delete 
  color: blue;


// Javascript 
$(".js-list-delete").show();
$(".js-item-delete").hide();

【讨论】：

我喜欢（并使用）相同的方法：当我无法使用 ID 时，我使用样式类（在 CSS 中）和“选择”类（按行为分组）。但是我对 jQuery 相当陌生，我想知道：它被认为是最佳实践吗？有哪些优点和缺点？ 主要优点是可维护性。使用这种方法可以避免 js 和 css 的相互依赖：在 js 代码中没有出现用于样式的类，因此您可以根据需要添加或删除它们，无论您是在使用 js 还是使用 css 进行样式设置，都没有任何安全性会破裂。此外，我会建议特定的状态类，例如：'state-selected'、'state-valid'、'state-error'等......这些是用于样式目的但通过 js 添加的类，所以它们是一种特殊情况，因为您无法避免它们同时出现在 css 和 js 代码中。【参考方案3】：

尝试处理唯一名称对于小型项目很有效，但越大越容易发生冲突。

这就是我喜欢第二种方法的原因。

不过，为了方便起见，您可以使用SASS 来预处理您的 css 文件。然后你可以像这样嵌套：

#list 
    .delete 
    
    .items 
        .item

您将获得与第二个示例类似的代码，而无需全部写出。

至于 jQuery 选择器，如果你想这样做的话，仍然需要用手写的方式写出来，但是像这样复杂的选择器通常被认为是糟糕设计的标志。

【讨论】：

我试过这个，然后我得到了很多长长的 jQuery 选择器，当我想稍微改变 HTML 的结构时，我不得不改变很多行 jQuery 代码。难道没有更好的办法吗？ 更好的方法是不要过多依赖 jQuery 选择器。使用像这样的大型选择器会导致您描述的问题。相反，模块化你的代码并使用 jQuery.find() 从组件中获取元素，而不是总是使用全局选择器。【参考方案4】：

这实际上取决于页面的结构和大小。

有些情况下使用选项 1 会更好，有些情况下使用选项 2 会更好。

我通常选择“最适合这个特定场景的东西”

【讨论】：

【参考方案5】：

选项 1：命名每个元素 独一无二。

这几乎是不可能的，而且绝对不是最佳做法。我认为如果您可以通过对相关样式和属性进行分组来使用有意义的类，那会更好。

选项 2：命名每个元素 语义上，并选择元素 分层。

我更喜欢这个。至少你知道流程和事情在哪里。

选项 3...n：一些混合方法？一种 完全不同的方法？

总是有一种混合方法和完全不同的方法。我认为每个开发人员都有自己的编码风格。如果它在语义上正确且结构良好，那将是最好的方法。

【讨论】：

【参考方案6】：

这是一个很好的问题。我认为您的第一个选项（唯一地命名每个元素）是正确的，因为：

元素类（不是名称）没有那么长， 无论如何强调整个组，所以组的 HTML 结构不应该经常变化，并且 这样可以更轻松地发现 UI 结构中的缺陷。

也就是说，我会使用稍微不同的标记：

<div id="list">
    <button class="delete" />
    <div class="list-items">
        <div class="list-item">
            <button class="delete" />
            <h1 class="list-item-name">Item 1</h1>
        </div>
    </div>
</div>

【讨论】：

但是它们可以变得很长，对吧？每一层嵌套都会为类名增加一层。另外，在您的标记中，您将如何专门选择list-item 的删除按钮？ @Chetan，不一定非得如此，您始终可以在图层之间交错一个容器元素并将其用作参考点。我会将第一个列表项的删除按钮与$("#list .list-item:first button.delete") 匹配。

css选择器的种类有哪些？怎么用？

CSS选择器的种类有哪些？怎么用？CSS选择器的种类有标签选择器、类选择器、层级选择器(后代选择器)、id选择器、组选择器、伪类选择器，作为程序员应该具备根据不同的场景选择适合的CSS选择器。CSS选择器学习目... 查看详情

css选择器的1.13ui元素状态伪类选择器

参考技术A:enabled，指定元素处于可用状态时的样式，一般用于input，select和textarea　　:disabled，指定元素处于不可用状态时的样式，一般用于input，select和textarea:read-only，指定元素为只读状态时的样式，FF为-moz-read-only，一般用于in... 查看详情

包含类、子选择器和相邻兄弟选择器的 CSS 选择器的等效 XPath 是啥？

】包含类、子选择器和相邻兄弟选择器的CSS选择器的等效XPath是啥？【英文标题】：What’stheequivalentXPathforaCSSselectorcontainingaclass,childandadjacentsiblingselector?包含类、子选择器和相邻兄弟选择器的CSS选择器的等效XPath是什么？【发布... 查看详情

许多选择器和添加类

】许多选择器和添加类【英文标题】：Manyselectors&addclass【发布时间】：2012-06-2114:13:35【问题描述】：我正在使用jQuery来处理IE7和8中不受支持的选择器（主要是:nth-child和:last-child）。我读到addClass比使用jQuery的css方法性能更高... 查看详情

jquery 选择器与 css3 选择器的性能

】jquery选择器与css3选择器的性能【英文标题】：Performanceofjqueryselectorsvscss3selectors【发布时间】：2012-02-0807:02:41【问题描述】：我对css3使用选择器（或一般的简单css选择器）相当陌生，我对这些css选择器与jquery或javascript选择器... 查看详情

用于 jQuery 日期范围选择器的按钮，用于发送“从”和“到”日期

】用于jQuery日期范围选择器的按钮，用于发送“从”和“到”日期【英文标题】：ButtonforjQueryDateRangePickertosend\'from\'and\'to\'dates【发布时间】：2019-08-1504:27:21【问题描述】：我正在尝试使用jquery创建一个日期范围选择器，这部分... 查看详情

选择器的类型

...这个选择器的性能非常低；一般只会在测试的时候使用，用于css的初始化，但是在项目当中不要使用；3、类选择器：给同一类（同一个群体）标签添加样式；要先给同一类标签取一个名字；属性-- 查看详情

jQuery 选择器的性能特征与 CSS 选择器的性能特征有何不同？

】jQuery选择器的性能特征与CSS选择器的性能特征有何不同？【英文标题】：HowdotheperformancecharacteristicsofjQueryselectorsdifferfromthoseofCSSselectors?【发布时间】：2010-12-2304:48:57【问题描述】：我昨天遇到了Google的Firebug页面速度插件。Thepa... 查看详情

5css类选择器的使用

<!doctypehtml><html><head><metacharset="utf-8"><title>css样式标签</title><styletype="text/css">/*css类选择器用法*/.stess{color:red;font-size:36px;}</style></he 查看详情

css——类和id选择器的区别

1.相同点，可以应用在任何元素。2.不同点，ID选择器只能在元素里只能分别引用，不能同时引用。如：<styletype="text/css">.stress{（类选择器）color:red;}.bigsize{font-size:25px;}#stressid{（ID选择器）color:red;}#bigsizeid{font-size:25px;}</style... 查看详情

伪类选择器与伪元素选择器的区别

参考技术A只有一个冒号作用是：用于向某些选择器添加一些特殊的效果，常见的有：作用：表示元素中的一些特殊的位置，常见的有：看是否添加了新的元素（只是从视觉效果上添加了，但并没有在文档树中真正的添加）有时... 查看详情

如何使用类选择器覆盖 id 选择器的 jQuery 事件处理程序？

】如何使用类选择器覆盖id选择器的jQuery事件处理程序？【英文标题】：HowcanIoverrideajQueryeventhandlerofanidselectorwithaclassselector?【发布时间】：2012-02-1822:38:13【问题描述】：我有几个带有id和类选择器的元素的点击事件处理程序：$(fu... 查看详情

JQuery：.dialog() 不适用于 .classe 选择器的下一个元素

】JQuery：.dialog()不适用于.classe选择器的下一个元素【英文标题】：JQuery:.dialog()notworkingfornextelementof.classeselector【发布时间】：2018-12-2412:55:05【问题描述】：我使用phpwhile循环来生成一些带有少量描述的项目。每个项目都有相同的... 查看详情

在 Sass 中修改选择器的中间（添加/删除类等）

...时间】：2015-04-2000:52:15【问题描述】：我的菜单中有以下用于样式链接的SCSS：navulliacolor:redul.openedliacolor:green这会生成以下（正确的）CSS：navulliacolor:red; 查看详情

jquery选择器

选择器，用于选取页面上的元素对象。jQuery选择器完全继承了CSS选择器的方式。学会了CSS的选择器就会jQuery的选择器了。jQuery选择器是学习jQuery的基础 DOM如何获取页面中的元素对象？ document.getElementById(‘id‘); document.getElementsB... 查看详情

用于 JQuery 日期时间选择器的 ASP.Net 包装器控件

】用于JQuery日期时间选择器的ASP.Net包装器控件【英文标题】：ASP.NetwrappercontrolforJQuerydatetimepicker【发布时间】：2011-02-1911:43:03【问题描述】：我希望为JQuery日期时间选择器控件创建一个包装器控件，以便在asp.net网站中使用。一... 查看详情

css-尺寸与边框

...位1.尺寸单位1.px像素1024*768px2.in英寸1in=2.54cm3.pt磅1pt=1/72in用于描述文字的单位4.cm厘米5.mm毫米6.em相对于父元素乘以倍数（12 查看详情

CSS 正则表达式 id 选择器与类选择器的性能

】CSS正则表达式id选择器与类选择器的性能【英文标题】：PerformanceofCSSregexidselectorvsclassselector【发布时间】：2017-07-2412:40:15【问题描述】：假设我有第2000页的元素。我想从自定义模块中注入此页面元素（横幅）。该模块的css文... 查看详情