标记/样式最佳实践：如何有效地在CSS类上分配样式规则？ [英] Markup/Style best practices: How to efficiently distribute style rules over CSS classes?

问题描述

假设我有一些HTML页面和一个相应的CSS文件。我想为一些元素添加圆角。我想在每个其他部分交替背景颜色。我想为每个部分标题添加悬停状态。

我发现有三个极端，其中涉及到谁，什么，什么时候，

极限＃1：每一个样式规则基于ID。

极限＃2：每个样式规则都基于一个类。

极限＃3：每个样式规则都基于DOM层次结构。

很明显， - web开发将包括类重用与唯一规则与层次结构之间的健康平衡，因为任何三个极端将严重破坏浏览器性能，可维护性和代码大小。我认为。还是我错了？如何判断何时需要新的 .class ，或者您想应用的样式规则是否可以安全地嵌入到现有定义中？什么时候两个 #id 规则类似，你应该把公共代码拉到类中？什么时候分叉一个类（有时你保留原始，并添加派生的所有偏离情况（渗出在OOP术语），其他时候推普通规则下降到每个不相交的偏差 - 明显这取决于偏差本身的性质（即涉及的规则的数量））。

问题：有没有任何规则来控制这种辩论？您的经验和/或建议是什么？有没有好的文章，资源，书籍，讲座（技术说话风格的视频的奖励积分）或其他内容可用的话题？我想以几个关键点（尽管欢迎任何评论）为基础进行讨论：

• 可维护性（易于阅读，修改和添加代码）


• DRY（不要重复自己）


• 时间效率渐进渲染）


• 空间效率（标记和关联样式的组合大小）

解决方案

亲自体验一下， SASS 。

虽然有编译CSS的优点和缺点，在预编译的CSS中拥有真正的变量，混合和帮助程序的收益是值得考虑的。 p>

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)

解决方案

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.

这篇关于标记/样式最佳实践：如何有效地在CSS类上分配样式规则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！