使用CSS类来标记JS是否是一种不好的实践?

6
场景: 一个由PHP和模板引擎生成的主页正在重新设计。新设计基于jQuery UI。当前的CMS使用多个模板:页面模板、文章详情模板、评论模板等。 问题: 一些模板(如文章详情模板)生成应该使用jQuery UI元素(如选项卡)的HTML片段。目前,页面模板的数据源不包含任何信息,它应该将哪些元素转换为jQuery UI元素,以在文档头中的主jQuery调用中使用。 可能的解决方案: 将“jqTabs”这样的CSS类添加到子模板的HTML标记中,并在主jQuery脚本中使用选择器.jqTabs问题: 这是个好主意吗?
顺便说一下,“使用不同的CMS”不是有效的答案,因为现在不是一个选择(时间表、预算等等)。

2
你为什么认为这可能是一个不好的主意? - Jared Farrish
2
不错的想法。我更喜欢使用类的引用。 - wdm
有许多“简单”的解决方案在长期内被证明是“不好的想法”。最好在 Stack Overflow 上询问,而不是在几个月内重建一切。 - Oliver A.
3
不,这不是一个坏主意。只需正确使用类和ID;即,使用类来“类别”或对不同元素进行分组,并使用ID属性指向一个且仅一个元素(不要在页面上的任何其他元素中重复使用ID值)。 - Jared Farrish
2个回答

3

这真是个好主意。

这是类的主要用法之一。

类(像ID一样)既可以用作元素样式的方式,也可以用作脚本的挂钩。

在这种情况下,它可能是最好的解决方案,因为它允许在更广泛的重新设计中进行最小标记更改。

而且它很容易撤消。


2
我认为将CSS类作为JavaScript钩子可能确实是一种不好的做法。我这么说的原因是因为这种方法将你的CSS和JavaScript混合在一起,往往会导致不必要的混淆。
让我解释一下:现在我正在为一个现有系统添加新模板,该系统使用动态用户控制的管理设置来控制CSS属性(页面宽度、字体大小、颜色等)。这些设置也可以影响JS属性(幻灯片选项、幻灯片之间的延迟等)。
问题在于,由于有太多的CSS类被用作JavaScript钩子,我很难确定哪些类被用于样式,哪些被用作JS钩子,哪些同时被用于CSS和JS功能!因此,在创建新模板时,如果从头开始编写新标记,则很难开始,因为我会忽略各种重要的类,既包括CSS功能,也包括JS功能。
如果仅将CSS类用于样式,并且其他JS钩子仅用于JS,则任务将变得更加容易。我设想可以通过HTML5数据属性来实现这一点,它看起来像这样:
<a href="#" class="button" data-lightbox="true" data-slide-delay="250">my link</a>

使用HTML5数据属性作为JavaScript钩子和class属性作为CSS样式的方式,我们可以确保所有的class仅与CSS相关,任何与JavaScript相关的内容只需使用自定义属性。
我还使用了另一种选项,即给所有被JavaScript引用的css class加上“js-”前缀。这样你就能知道哪些类可以安全地移除以进行样式设置,哪些类必须保留以维持现有功能。
<a href="/mylink" class="my-style-class my-other-style-class js-my-hook-1 js-myhook-2">
    My link
</a>

这只能在支持HTML5的浏览器中工作,对吧?我们网站的70%用户是政府机构,其中一半以上仍在使用IE7,并且在接下来的2-3年内没有升级的计划。 - Aleks G
2
@Brian:最终我是这样解决的:由于我大量使用jquery ui和tal模板,我使用了一组文档化的类来应用默认的外观(ui-dialog、ui-list...),所有这些类都以ui为前缀。所有其他“样式”类都以cs(自定义样式)为前缀。但我同意你的方法更加简洁。 - Oliver A.

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接