使用CSS类进行JS标记是一种不好的做法吗?

时间:2011-12-04 02:07:21

标签: php javascript jquery css

情景:

  • 使用PHP和模板引擎生成的主页。
  • 该网页正在重新设计。
  • 新设计基于jQuery UI。
  • 当前的CMS使用多个模板:页面模板,文章详细信息模板,评论模板等。

问题: 一些模板(如文章详细信息模板)生成应使用jQuery UI元素(如选项卡)的html片段。目前,页面模板的数据源不包含任何信息,哪些元素应该在文档头的主jQuery调用中转换为jQuery UI元素。

可能的解决方案 添加一个CSS类,如" jqTabs"到子模板的html标记,并在主jQuery脚本中使用选择器.jqTabs

问题 这是一个坏主意吗?

BTW:"使用不同的CMS"这不是一个有效的答案,因为现在一个选项(截止日期,预算,......你将它命名为-.-)。

2 个答案:

答案 0 :(得分:3)

根本不是一个坏主意。

这是课程的主要用途之一。

类(和ID)既可以用作样式元素的样式,也可以用作脚本的钩子。

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

它很容易逆转。

答案 1 :(得分:2)

我认为使用CSS类作为JavaScript的钩子确实是一种不好的做法。我说这个的原因是因为这种方法混合了你的CSS和JavaScript,并且经常会导致不必要的混淆。

让我解释一下:现在我正在努力向现有系统添加新模板,该系统使用动态用户控制的管理设置来控制CSS属性(页面宽度,字体大小,颜色等)。这些设置也会影响JS属性(幻灯片选项,幻灯片之间的延迟等)。

问题是因为有很多CSS类被用作JavaScript钩子,所以我很难确定哪些类用于样式,哪些用作JS钩子,哪些用于两者!因此,在执行新模板时,很难从头开始使用新标记,因为我将遗漏CSS和JS功能的各种重要类。

如果CSS类仅用于样式化,则任务会更容易,而其他JS钩子仅用于JS。我设想这是通过HTML5数据属性完成的,看起来像这样:

<a href="#" class="button" data-lightbox="true" data-slide-delay="250">my link</a>

通过使用JavaScript钩子的HTML5数据属性和CSS样式的类属性,我们可以确保所有类只与CSS相关,并且任何与JavaScript相关的内容都只是获取其自定义属性。

我使用的另一个选项是为任何带有js-的css类添加前缀,该类由JavaScript引用。这样你就可以知道哪些类可以安全地删除样式以及哪些类必须保留现有功能。

<a href="/mylink" class="my-style-class my-other-style-class js-my-hook-1 js-myhook-2">
    My link
</a>