清理CSS（原子化方法）和清理HTML，哪个更快？

Question

似乎有两种主流的思路来构建CSS和HTML。我被教导要尽可能保持HTML的简洁，所有样式都应该在样式表中。这种方法到目前为止一直为我服务得很好，但是我经常注意到冗余和低效。

我阅读了关于原子化方法的内容，我真的很喜欢这个想法。它似乎是我自然而然倾向于的方法。 我的问题：考虑以下两个代码块，哪种方式真正更快： HTML：

<div class="main">
  <h1 class="m-10 theme-c1">header with margin and theme color 1</h1>
  <p class="fz-1 theme-c1 m-10">paragraph with font-size 1em.</p>
  <div class="m-10">
    <p class="fz-1 m-10">blah</p>
    <p class="sub-paragraph">Sub paragraph</p>
  </div>
</div>

样式表：

/*margin-left rule*/
.ml-10 {margin-left: 

/*font-size rule*/
.fz-1 {font-size:1em}

/*theme color*/
.theme-c {color: #333};

/*display rule*/
.dps-blk {display: block}
/
/*sub paragraph styles*/
.sub-paragraph {
  margin-left: 10px;
  font-size: 1em;
  font-color: #333;
}

以上HTML中的元素都会得到它们需要的样式，除了.sub-paragraph，上面的样式都不是后代样式。

那么每个元素挑选需要的样式会更快，还是直接给它一大堆样式（比如.sub-paragraph）会更好？对于.sub-paragraph，我可以看到只需一个匹配就能获得所有样式。然而，这种折衷的方法是，除了将其用于子段落或在应用于其他内容时覆盖其中一些属性之外，没有太多其他可做的事情。

我认为这两种方法是在数据大小和处理时间之间进行权衡的决策。

编辑：我感谢所有的反馈。我忘了提到我特别关注不同方法的处理速度。

- Hsin

---

我假设这只是一种转录错误，但是你在.sub-paragraph块正上方有一个斜杠，这将阻止.sub-paragraph选择器的工作。 - Joeytje50

哎呀，我10年前就这么做了。那个项目依然存在，而我每有机会就替换那些"原子样式"。在低级别的边框和背景颜色上应用样式会导致不一致性。我希望我的界面保持一致性，而这种方法与此目标相反。 - bishop

@hsin，自从你提出这个问题已经过去了四年多了。最近我也在思考同样的问题，并偶然发现了你的问题。希望你现在已经有了答案。你能否告诉我和其他来到这里的人你选择了哪种方法，它是否像你预期的那样易于维护？你会转向另一种方法吗？原子CSS是否意味着更多的处理时间？ - Gurmeet Singh

Answer 1

如果您开始挑选单个样式，那么您最终得到的样式表将会像这样：

如果你要开始挑选单个样式，你会得到这样的样式表：

.red{ color: red; }
.green-background{ background: green; }
.w500{ width: 500; }
.ml20{ margin-left:20px; }

这听起来像是您需要一种方法来扩展某些类（即.sub-paragraph），通过将其他类的样式添加到.sub-paragraph中。 SASS的 .extend指令很适合做这件事。Sass和其他预处理器非常擅长将可维护代码和语义代码融合在一起。

编辑1:

如果您想了解哪种方法（更多类/更少属性或更少类/更多属性）更快，我建议使用Chrome Dev Tools的时间轴进行测试。编码的两种方法并不是影响页面渲染/绘制速度的唯一因素，因此如果您关心速度，最好进行测试。

- Fillip Peyton

---

+1 我认为对于独立或私人开发的网站来说，可维护性是关键。下载或绘制所需时间通常只是次要考虑因素。在几年内硬件会让它变得更快。一个网站是否继续有用和得到维护将取决于它最初的构建质量。例外可能是像一张单页宣传册的网站，具有保证的使用寿命。但根据我的经验，如果它运行良好，那么其使用寿命往往会被延长。 - Michael Durrant

@Fillip: 我更加好奇的是处理速度的差异。但就预处理器而言，我同意你所说的。 至于你的CSS示例-抱歉，在我原帖中的示例中我误导了你。我的类名中不会那么具体地指定颜色和像素数。它会更像.this-region-padding或.that-widget-display这样的东西。 - Hsin

我明白了。很抱歉你的问题被偏离了。我进行了一些编辑。希望它们能对你原本想问的问题有所帮助。 - Fillip Peyton

@FillipPeyton：完全没有问题。是我的解释不够清晰导致了误解。 感谢您提供的时间轴链接。虽然我认为我还没有找到答案，但我觉得它在我的脑海中有些成形了。我知道其他因素也会影响渲染/绘制速度；我现在想先看看这个因素，然后再关注其他因素。 - Hsin

好的，希望你找到你想要的！ - Fillip Peyton

Answer 2

我认为两者都有其适用的场合。
但我不认为抽象应该出现在类名中，例如.p1-gr-brdr。

如果你正在编写非常紧密组合的原子HTML部分模板（例如AngularJS指令），那么你可能会更喜欢使用.title、.subtitle、.just、.content等类名，这样你可以为这些组件指定非常具体的输出。

更改这些组件将非常简单和直接，因为它们非常紧凑且自包含。

如果你发现自己需要覆盖其中一个组件以组成继承类，那么你可以选择组成一个新的类名，这个类名可能不是100%语义化/通用（例如“.big-green-subtitle”），但对于那些想要特殊情况得到关注的时刻来说，它仍然是100%自包含的...

...或者你可以使用第二级选择器来指定行为。

如果您的.header有填充，但您不希望移动电话上的横向方向的.update > .header > .subtitle受到该填充底部的影响，特别是在星期二，则可以简单地使用一个例外来声明.update > .header { padding-bottom: 0; }。

否则，层叠将继续正常进行，事物要么会相互堆叠，要么您将使用覆盖相同属性的专用类来取消副作用...

否则，我不知道为什么所有CSS样式表都不像：

.p1-br { border-width : 1px; }
.p2-br { border-width : 2px; }
.p3-br { border-width : 3px; }
.p4-br { border-width : 4px; }

.gr-br    { border-color : green;        }
.lgtgr-br { border-color : lightgreen;   }
.sfmgr-br { border-color : seafoamgreen; }
.aqmr-br  { border-color : aquamarine;   }

.em1-wd { width : 1em; }
.em2-wd { width : 2em; }
.em3-wd { width : 3em; }

.rm1-wd { width : 1rem; }
.pc1-wd { width : 1%;   }

......等等，直到您编写出每个原子选项，您可能需要为项目（以及其所有组件）支持的任何主题，在所有平台上。

这似乎是一种可怕的方式来度过您的一天，为那里可能存在的每种边缘情况编写唯一的类名：

<div class="pos-rel
            p1-br
            p18-ng-tp
            mrpc12-br-r
            lggr-bg
            bg-im-spr-id-123
            pc15-bg-im-algn-lf
            ofl-x-hd
            ofl-y-aut
            brd-bx">

比如说，一个单一的 div 看起来很笨重。

然而，如果你能编写 CSS 规则并将其赋予类，以期望获得灵活性，并且稍后有了这些规则的硬数字，那么这并不是一个坏主意。
例如，你编写了一个类，该类希望使用 rem 来处理高度，使用 percent 来处理边距，使用 em 来处理边框半径，会使用背景颜色和图像精灵（假设它是企业/零售网站的背景容器，带有水印和标志，其他内容将在其上滚动）。

现在，你想在同一组件上重用那组类，但是为了不同的客户端...

如果你可以简单地拥有一些变量，这些变量可以存在于一个单独的文件中，并被你的类引用，那么你的单位不一定需要更改，但你可以在一个或两个位置修改所有硬编码的东西，并轻松地为不同的客户端交换不同的变量值，就像指向不同的表格一样...

...但这正是 SASS 已经实现的，如果你花时间坐下来思考你想要设计的东西，并使你的构建过程符合预期结果。

- Norguard

---

嘿，感谢你的想法。虽然我不是很关注预处理器如何帮助构建CSS的结构，但更关注在编写CSS时不同的方法。考虑这个问题：与其为不同的客户重复使用那些代码，你可以将规则降低一个级别，并使它们在整个站点中以较小的级别可重用。例如，您可能希望在几个不同的元素上始终具有相同的左填充，尽管SASS可以为您完成此操作，但问题是它们应该在不同的类中还是共享确定主题填充的类。 - Hsin

Answer 3

CSS旨在使用类来管理一些样式组。使用.sub-paragraph方法通常比单独使用类的方法更好。如果你要为每个样式分别指定类，那么最好直接使用内联样式，通过style属性实现。不过出于维护的考虑，通常应该避免这样做。

- Joeytje50

---

使用内联样式是绝对的噩梦，许多网络开发人员已经深有体会。学习教训并从一开始就正确地做，相信当成千上万的开发人员花费10年时间学习这个基本事实时，这可能是您应该接受的事实。 - Michael Durrant

@MichaelDurrant 现在满意了吗？我原本是想这么说的：“如果你要那样做，不如干脆做这种坏事。” 我想通过互联网传达这样的信息可能行不通... - Joeytje50

请参考我在主题中发布的链接，因为它解决了内联问题。提供几个类不同于做内联样式。例如，如果您有5个元素都具有相同的内联样式--比如padding: 10px; font-size: 1em; font-height 1.6em--那么要更改这些样式，您就必须在5个位置上进行更改，而只需更改3个CSS规则即可。扩大规模，我想它会很快产生差异。 - Hsin

Answer 4

我通过将某些类型的类分组来组织我的CSS。在创建CSS类时，我会问自己，我是否会重用此类定义？将这个类的定义分开是否合理，那些在我之后阅读此内容的人是否会感到头疼？

基本上，我会说，要追求可维护性，多出1Kb的CSS不会让任何人噎住。

- user3189157

---

@llya：抱歉回复晚了。感谢您分享创建类时的思考过程。我肯定不希望有人因我的代码而自杀；这似乎是样式处理过程中不必要的步骤。至于可维护性——是的，我肯定希望它是可维护的，但问题是哪种方法更可维护？关于文件大小，在较小的网站上增加1KB并不会有太大影响，但在大规模应用中，它可能会占用很多空间。为了更好地未来保护它，我希望尽可能地将其最小化。 - Hsin