标记/样式最佳实践：如何在 CSS 类上有效地分发样式规则？
假设我有一些 HTML 页面和相应的 CSS 文件。我想为某些元素添加圆角。我想在其他所有部分上替换背景颜色。我想为每个部分标题添加悬停状态。如此等等——我不断地造型、造型、造型。
我发现存在三个极端，涉及按类、按 id 和按层次结构在标记上分发 CSS 规则的“谁、什么、何时、何地、为什么和如何”。
极端#1：每个样式规则都基于 ID。
极端#2：每个样式规则都基于一个类。
极端#3：每个样式规则都基于 DOM 层次结构。
显然，前端 Web 开发的禅宗将包括类重用、独特规则和层次结构之间的健康平衡，因为这三个极端中的任何一个都会对浏览器性能、可维护性和代码大小造成严重破坏。我认为。还是我错了？如何判断何时需要新的 .class，或者您想要应用的样式规则可以安全硬塞到现有定义中？什么时候两个 #id 规则足够相似以至于您应该将公共代码提取到一个类中？你什么时候“分叉”一个类（有时你保留原来的类，并为所有偏差情况添加派生（OOP 术语中的“渗透”），而其他时候则将通用规则推入每个不相交的偏差中 - 显然这取决于偏差本身的性质（即涉及的规则数量）。是否存在使用纯粹等级规则的特定情况？
问题：是否有任何管理此类辩论的经验法则？您的经验和/或建议是什么？是否有关于该主题的好的文章、资源、书籍、讲座（“技术讲座”风格的视频加分）或其他内容？我希望讨论以几个关键点为基础（尽管欢迎任何评论），没有特定的顺序：
- 可维护性（易于阅读、修改和添加代码）
- DRY（不要重复）
- 时间效率（加载时间；渐进式渲染）
- 空间效率（标记和相关样式的组合大小）
Assume that I have some HTML page, and a corresponding CSS file. I'd like to add rounded corners to some elements. I want to alternate background colors on every other section. I want to add a hover state for each section heading. So forth and so on - I keep styling and styling and styling.
It occurs to me that there are three extremes, where it concerns the "who, what, when, where, why and how" of distributing CSS rules over the markup by class, by id, and by hierarchy.
Extreme #1: Every style rule is based on an ID.
Extreme #2: Every style rule is based on a class.
Extreme #3: Every style rule is based on the DOM hierarchy.
Clearly, the zen of front-end web development would include a healthy balance of class reuse vs. unique rules vs. hierarchy, because any of the three extremes would wreak havoc on browser performance, maintainability, and code size. I think. Or am I wrong? How to tell when a new .class is necessary, or the style rules you want to apply can be safely shoe-horned into an existing definition? When are two #id rules similar enough that you should pull common code out into a class? When do you "fork" a class (sometimes you keep the original, and add derivations for all deviate situations ("percolate" in OOP terms), and other times push common rules down into each of the several disjoint deviations - clearly this depends upon the nature (ie, number of rules involved) in the deviation itself). Are there just circumstances for using purely hierarchical rules?
Question: Are there any rules of thumb governing this sort of debate? What is your experience and/or advice? Are there good articles, resources, books, lectures (bonus points for "tech talk" style videos), or other content available on the topic? I'd like to keep the discussion grounded in a few key points (although any commentary is welcome), in no particular order:
- Maintainability (ease of reading, modifying, and adding code)
- DRY (Don't Repeat Yourself)
- Time efficiency (time-to-onload; progressive rendering)
- Space efficiency (combined size of the markup & associated styles)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
帮自己一个忙，查看 SASS。
虽然编译 CSS 有利有弊，但在预编译 CSS 中使用实际变量、混合和帮助程序所带来的好处绝对值得至少考虑一下。
Do yourself a favor, check out SASS.
While there are pros and cons to compiling your CSS, the gains from having real variables, mix-ins, and helpers in your pre-compiled CSS is definitely worth at least passing consideration.