假设我有一些 HTML 页面和一个相应的 CSS 文件。我想为某些元素添加圆角。我想在每个其他部分交替背景颜色。我想为每个部分标题添加悬停状态。依此类推-我一直在造型，造型和造型。
在我看来，存在三个极端，它涉及按类、按 id 和按层次结构在标记上分配 CSS 规则的“谁、什么、何时、何地、为什么以及如何”。
极端 #1：每个样式规则都基于一个 ID。
极端 #2：每个样式规则都基于一个类。
极端 #3：每个样式规则都基于 DOM 层次结构。
显然，前端 Web 开发的禅宗将包括类重用与独特规则与层次结构的健康平衡，因为这三个极端中的任何一个都会对浏览器性能、可维护性和代码大小造成严重破坏。我认为。还是我错了？如何判断何时需要新.class的，或者您想要应用的样式规则可以安全地插入现有定义中？什么时候两个#id规则足够相似以至于您应该将通用代码提取到一个类中？你什么时候“分叉”一个类（有时你保留原来的，并为所有偏离情况添加派生（OOP 术语中的“渗透”），而其他时候将通用规则推到几个不相交的偏离中的每一个 - 显然这取决于偏差本身的性质（即涉及的规则数量）。是否有使用纯等级规则的情况？
问题：是否有管理此类辩论的经验法则？您的经验和/或建议是什么？是否有关于该主题的好文章、资源、书籍、讲座（“技术谈话”风格视频的奖励积分）或其他可用内容？我想让讨论以几个关键点为基础（尽管欢迎任何评论），没有特别的顺序：
- 可维护性（易于阅读、修改和添加代码）
- 干燥（不要重复自己）
- 时间效率（加载时间；渐进式渲染）
- 空间效率（标记和相关样式的组合大小）