Question

关于如何构建CSS和HTML似乎有两个主要的思想流派。我被教导要尽可能保持HTML的清晰，风格应该在样式表上。到目前为止，这对我有利，但通过这种方法，我经常注意到冗余和低效率。

我读了atomic approach，我真的很喜欢这个主意。无论如何，这似乎是我自然倾向于的方法。

我的问题： 考虑到以下两个代码块，哪种方式真的更快： 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，我可以看到它只需要一个匹配来获得所有样式。然而，权衡的是，除了在子段落上使用它之外，你可以用这些样式做很多其他事情，或者在应用于其他东西时用其他规则覆盖它的一些属性。

我认为通过这两种方法，决定是否要花费数据大小或处理时间。

修改 ~~我很感谢所有的反馈。我忘了提到我对不同方法的处理速度特别感兴趣。~~ 尽管如此，这很有意思。

Answer 1

如果你开始挑选个人风格，你最终会得到一个样式表，如：

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

哪个不太可维护。

听起来你正在寻找的是一种用预先存在的类扩展某些类（即.sub-paragraph）的方法，将其他类的样式添加到.sub-paragraph中。 SASS's .extend指令是一种很好的方法。 Sass和其他预处理器非常擅长将可维护代码和语义代码的概念合并在一起。

编辑1：

如果您正在研究哪种方法（更多类/更少属性或更少类/更多属性）更快，我建议您使用Chrome开发工具'Timeline进行一些测试。这两种编码方法并不是唯一会影响页面呈现/绘制速度的方法，因此如果您关注速度，最好先测试这些。

Answer 2

CSS旨在为某些样式组使用类。 .sub-paragraph方法通常比单独的类方法更好。如果要单独为每种样式分配类，也可以通过style属性使用内联样式。出于维护原因，您通常应该尽量避免这种情况。

Answer 3

我通过将某些类型的类分组在一起来组织我的CSS。在创建CSS类时，我问自己，我是否会将此类定义重用于其他任何内容？我将这个课程的定义分开是否符合逻辑，那些在我之后必须阅读此内容的人是否想要自己拍摄？

基本上我会说，为了可维护性，你的Css额外1Kb不会扼杀任何人。

Answer 4

我认为两者都有一席之地我不认为抽象属于像.p1-gr-brdr这样的类名。

如果您正在编写非常紧密组合的原子HTML部分模板（对于像AngularJS指令这样的东西），那么您可能会获得.title，.subtitle，{{ 1}}，.just，您可以在其中为这些组件指定非常具体的输出。

更改这些组件非常简单明了，因为它们非常紧凑且独立。

如果你发现自己处于需要覆盖一个的位置，要构成一个继承的类，那么你可以选择组成一个新的类名，现在可能不是100％语义/泛型（“ .big-green-subtitle“），但对于那些你希望你的特殊情况感受到爱的时刻，它仍然是100％独立的......

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

如果你的.content有填充，但你不希望你的.header受到那个填充底部，在移动电话上，横向，在星期二，那么你可以只有一个例外，表明.update > .header > .subtitle。

否则，级联将继续正常运行，并且事物将堆叠在一起，或者您将使用涵盖相同属性的专门类别取消副作用...

否则，我不明白为什么所有的CSS表都不像：

.update > .header { padding-bottom : 0; }

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

这似乎是对你一天的可怕使用，为每个可能的边缘案例写一个独特的类名：

.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来说似乎很重要。

然而，如果您可以编写CSS规则，将它们提供给类，您希望灵活性，以及后来有这些规则的硬编号，那么不会是一个坏主意。登记/> 比如说，你写出一个期望在<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"> s处理高度的类，rem s中的边距，percent s中的边界半径，将采用背景色和图像精灵（假设它是公司/零售网站的背景容器，带有水印和徽标，其他内容将在其上滚动）。

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

如果您可以简单地拥有一些可以存在于单独文件中的变量，并且可以被您的类引用，那么您的单元不一定需要更改，但是您可以修改所有的在一个或两个地方编码，并为不同的客户交换不同的变量值，就像指向不同的表格一样容易...

...但这就是SASS已经做的事情，如果你花时间坐下来弄清楚你想要如何设计一些东西，并使你的构建过程符合预期的结果。

清理CSS（原子方法）与干净的HTML，这更快？

4 个答案:

编辑1：