用于jQuery选择器的CSS类命名的最佳实践
在构建Javascript密集的Web应用程序时，命名CSS类以保持Javascript代码和CSS样式表清洁以及UI结构灵活的最佳实践是什么？
选项1： 唯一地命名每个元素 。
例如，
// HTML Item 1
// CSS .list-delete { color: black; } .item-delete { color: blue; } // Javascript $(".list-delete").show(); $(".item-delete").hide(); 优点：
- 选择样式或JS操作项很容易
缺点：
- 元素名称开始变得非常长并且难以跟踪
- 更改HTML结构需要大量重命名
选项2：在语义上为每个元素命名，并分层选择元素 。
例如，
// HTML Item 1
// CSS #list > .delete { color: black; } #list > .items > .item > .delete { color: blue; } // Javascript $("#list > .delete").show(); $("#list > .items > .item > .delete").hide();
优点：
- 命名感觉更自然，名字简短明了
缺点：
- 选择用于样式或操作的元素是不实用的
- 更改HTML结构需要更改大量选择器，因为名称与层次结构相关联
选项3 … n：一些混合方法？ 一个完全不同的方法呢？
在将来添加更多元素时，请记住名称冲突的问题，尤其是当您有嵌套元素时。 此外，理想的解决方案可以轻松更改现有元素的HTML结构，而不会在其他任何地方中断太多。
尝试处理唯一名称可以很好地适用于小型项目，但是越大，您就越有可能发生冲突。
这就是我喜欢第二种方法的原因。
但是，为了使其更容易，您可以使用SASS来预处理您的css文件。 然后你可以像这样嵌套：
#list { .delete { } .items { .item { } } }
你会得到类似于你的第二个例子的代码，而不必全部写出来。
对于jQuery选择器，如果你想这样做那些仍然需要用手写出来，但是像这样复杂的选择器通常被认为是糟糕设计的标志。
在向HTML中添加类和ID时，我建议尽可能保守。 在大多数情况下，使用内容主要部分的ID并使用标签选择器，就像在所有内容上放置类一样。 您的示例中的HTML可以更简洁地重写为：
Item 1
然后jQuery选择器将是：
$("#list > .delete").show(); $(".items .delete").hide();
（你可以使用更具语义的HTML5标签，因此更少依赖于类，但我认为这超出了问题的范围。）
最干净的解决方案是将所有内容分离：HTML – CSS – JS。
为此，您将使用第一种方法（单个命名允许将CSS类应用于任何HTML元素），另外您还可以为JS添加特别命名的类。 像这样你不必害怕破坏你的JS，如果他们删除CSS类，反之亦然。
关于如何最好地实现这样的命名约定的好读物： http ： //nicolasgallagher.com/about-html-semantics-front-end-architecture/
// HTML Item 1
// CSS .list-delete { color: black; } .item-delete { color: blue; } // Javascript $(".js-list-delete").show(); $(".js-item-delete").hide();
这实际上取决于页面的结构和大小。
有些情况使用选项1会有所改善，有些情况会更好用选项2。
我通常会选择“对于这个特定的场景最好”
选项1：唯一地命名每个元素。
这几乎是不可能的，绝对不是最佳做法。 我认为如果你可以通过分组相关的样式和属性来使用有意义的类更好。
选项2：在语义上为每个元素命名，并分层选择元素。
我更喜欢这个。 至少你知道流程和事物的位置。
选项3 … n：一些混合方法？ 一个完全不同的方法呢？
总有一种混合方法和完全不同的方法。 我认为每个开发人员都有自己的编码风格。 如果它在语义上正确且结构良好，那将是最好的方法。
这是一个非常好的问题。 我认为你的第一个选项（ 唯一地命名每一个元素 ）是正确的选项，因为：
- 元素类（不是名称）不是那么长，
- 无论如何，重点都集中在整个组，因此组的HTML结构不应经常更改，并且
- 可以通过这种方式更容易地发现UI结构中的缺陷。
也就是说，我会使用稍微不同的标记：
Item 1