HTML元素选择器与类选择器对比：为列表项单独加类是否有额外优势？

两种选择器写法的对比结论 #

给li单独添加.my-list-item类、直接用类选择器设置样式，是存在明确实用价值的，尤其在中大型、迭代频繁的项目中优势会更突出，核心好处如下：

• 样式优先级更合理，维护成本更低
  后代选择器.my-list li的优先级是「类选择器+标签选择器」，权重高于单一类选择器.my-list-item。后续如果需要给特殊列表项加额外类覆盖样式（比如选中态类.active），用.my-list-item的话只要按顺序写.active就能覆盖样式；如果用.my-list li，你需要写优先级更高的.my-list li.active才能生效，无形中增加了样式提权的冗余代码。
• 结构灵活性更高
  一是不怕嵌套结构污染：如果后续你的.my-list内部需要嵌套子列表，.my-list li会选中所有层级的li元素，你需要额外写.my-list li li重置嵌套项的样式，而只给目标层级li加.my-list-item就不会有这个问题。二是不怕标签改动：如果后续需求调整，你需要把li替换成div等其他标签实现布局，只要保留.my-list-item类，CSS完全不需要修改，而.my-list li的写法改了标签就会直接失效。
• 样式复用性更强
  如果你项目其他位置有非ul包裹的元素需要使用同样的列表项样式，直接给对应元素加.my-list-item类即可生效，不需要额外套带.my-list类的父容器，也不需要重复写样式代码。
• 匹配性能略优
  现代浏览器CSS选择器匹配性能差异已经非常小，不过类选择器本身是浏览器匹配速度最快的选择器类型之一，后代选择器需要向上遍历DOM树匹配父元素，在列表项数量极多的极端场景下，单一类选择器的性能优势会有可感知的提升。

当然这种写法也有微小的劣势：需要给每个列表项都加类名，手写HTML的时候会略显冗余，不过在组件化开发的当下，列表项通常会封装为通用组件，类名会自动生成，这个劣势基本可以忽略。

内容的提问来源于stack exchange，提问作者John Steed