作为一名在团队中工作的前端开发人员，我发现自己多次解决一个反复出现的问题。 例如，我们的许多前端javascript代码是使用jQuery和CSS选择器编写的（主要针对CSS“类”）。问题是，很多时候修复一些CSS代码的另一个开发人员会删除一个类，或者会更改嵌套在另一个元素下的DOM元素，从而使JS代码中断。
为了防止这种情况，我的想法是使用/添加“data-js”属性到我们想要用于Javascript的每个元素。但是我不确定这样编写的jQuery选择器的性能：
$('[data-js="my_js_selector"]').click();
我的另一个想法是将一个特定于js的类添加到以某种方式由Javascript操纵的dom元素中：
<a href="lol.com" class="js-link">link</a>
然后使用$('.js-link').click()
非常好的是，您只能查看HTML并告诉某些元素附加了一些Javascript操作而不实际查看JS代码。
这是个好主意吗？或者是否有一些其他最佳实践将JS触发与CSS样式分开？
答案 0 :(得分：1)
在Scalable and Modular Architecture for CSS（SMACSS）中，乔纳森·斯诺克（Jonathan Snook）教导了一个状态＆＃34;您使用.js-link建议的类是最好的方法。
相关讨论见State Rules：
部分子模块样式在渲染时应用于元素，然后 永远不会改变。但是，状态样式适用于 在页面仍在运行时指示状态更改的元素 在客户机上。
例如，单击选项卡将激活该选项卡。因此，一个 is-active或is-tab-active类是合适的。单击对话框 关闭按钮将隐藏对话框。因此，一个隐藏的类是 合适的。
这与两位评论者所说的相矛盾。 CSS代码和类应该是灵活的; CSS开发人员应该能够重构和改进代码，而不必担心破坏与表示无关的功能。
@ArunPJohny提出的观点支持州级方法。遗憾的是，引擎未进行优化以识别data-属性，而不是识别任意自定义属性，例如foo-。