javascript – 组织用于不同目的的HTML类名和ID(外观,jQuery和Selenium)

关于编写干净的
HTML / CSS,有无数篇文章.

我没有找到的是关于组织用于不同目的的类名和ID的建议(设计与jQuery对比Selenium测试).

对于任何给定的类名和ID,很难说出它的用途.在2人团队中,似乎还有一种倾向,即不断添加越来越多的ID和类,并避免清理那些已经存在的人,因为他们害怕破坏事物.

有智慧的模式,惯例,工具或珍珠会有所帮助吗?

最佳答案 我没有遇到任何帮助解决这种情况的工具.但是我使用了下面的约定,取得了一定的成功.然而,它们都不是一门精确的科学.

关于ID:

因为ID是更快的查找,所以每当我想要解决HTML的特定部分时,我倾向于使用它们,无论我如何使用它(样式/ jQuery / testing / etc).

但是,因为每个元素只能有一个ID,所以实际上没有机会将命名约定或样式用于不同的用途.而且我发现,如果我出于某种原因想要解决某个元素,那么我很有可能会因为其他原因再次想要它.

例如:如果我在页面上有一个按钮并使用jQuery(通过ID)找到它来附加事件处理程序,那么我很可能也想找到该按钮来测试它的行为.

因为ID可以出于多种原因使用,它应该以一般方式命名,理想地描述元素是什么或代表什么,而不是如何使用它.然而它应该有意义,但它被使用.

但正如你所说,对于给定的ID

it’s difficult to tell what it’s being used for

我同意,除非必须,否则一般不会试图找出答案.其他团队成员无法向已有元素的元素添加其他ID,如果符合其目的,则应鼓励他们重新使用现有ID.

使用此方法,不应更新或删除现有ID,并且这些ID将成为HTML的永久功能. (但是像任何规则一样,如果需要它可以被打破并且风险是值得的)

这样,每个人都应该习惯于重用现有ID,而不会让其他人更改它们的代码,并且ID名称应该适用于所有用途.这应该导致没有太多“额外”ID.

关于课程:

In 2+ person teams, there also seems to be a tendency to keep adding more and more … and avoiding cleaning up those that are already there, in fear of breaking things.

我的经历与你相符;人们倾向于添加新类而不是重用现有类.如果他们认为已经删除了使用它的唯一代码,那么有时这也会导致开发人员更容易删除它.这反过来咬了任何重复使用该课程的人,他们认为“下次我只是添加自己的新课程才能安全”.恶性循环的一个很好的例子.

我尝试以与ID相同的方式处理类(如上所述)和:

>使用非特定用途的名称
>重新使用现有的类,如果已经存在一个通过其名称“有意义”的类
>不鼓励更改或删除现有类(以增加重用的可信度)

通过额外的考虑,可以通过使用具有公共前缀(例如“tst”)的类来仅为“外部”原因(例如测试)添加类别.如果使用我会考虑这种方法:

>会创造大量的课程(噪音)
>预计会有很大的改变(因为使用率下降)
>预计未来可能会采用差异化方法进行替换
>由开发团队的外部团队控制

但是使用任何类型的命名约定都只能跟随它(或者没有)的人一样好.当没有编译器告诉你有一个糟糕的引用时,测试确实是知道某些东西是否被破坏的唯一方法.

tldr;

因此,一般来说,我不会尝试按照它们的使用方式来组织我的ID和类,并且我尝试最大化它们的重用并最小化它们的更改.但如果对这个问题给出更有说服力的答案,我会有开放的心态!

点赞