Question

我希望有人知道什么是最佳解决方案

class dom

<div class="col-md-6">I'm on the left</div>

与

css mixin

<div class="left">I'm on the left</div>
  /* --- with css --- */
  .left {
    .make-sm-column(1);
    .make-md-column(7);
    .make-lg-column(4);
  }

我一无所知:)我想问社区

Answer 1

在表现和他们取得的成就方面，两者都没有比另一方更好。

但是，绝大多数Bootstrap开发人员习惯于编写和维护使用HTML方法的代码。很少有开发人员会接触Bootstrap的mixins，并且会发现mixin方法更难以使用。

维护使用mixin方法编写的代码很困难，因为您需要花时间学习开发人员的代码。

HTML方法几乎绝对是最佳解决方案。

<div class="col-sm-1 col-md-7 col-lg-4">I'm on the left</div>

Answer 2

取决于，为简单起见，当然可以使用“html方法”，但如果你坚持使用“语义网”和HTML5背后的想法，这是一种非常糟糕的做法。

HTML应仅用于描述内容，样式应完全由CSS完成。

它是html5的基础，正如我所说，是语义网。

你能更好地理解这一点：

<div class="row">
  <div class="col-sm-1 col-md-7 col-lg-4">I'm a div with a lot of content.</div>
  <div class="col-xs-12 col-md-7 col-lg-4">This is just a lorem ipsum dolor sine valor.</div>
</div>

......还是这个？

<article class="main-content">
  <div class="fact-box">I'm a div with a lot of content.</div>
  <div class="body-text">This is just a lorem ipsum dolor sine valor.</div>
</article>

如果你记住所有的bootstrap类，它可以更快，也许看起来更容易构建一个类似于第一个例子的网站，但是如果你想要更改一个更大的列你需要不仅要更改该列的html，还要更改代码中的所有相关部分。另一方面，如果你有一个_layout.sass文件，你只需要编辑一些可能非常接近的行。

TL; DR：我在上面提到的只是一个例子，主要思想是：将该死的内容与分开fu * ing 风格！ ; - ）

此（内容样式分隔）也是html5中<b>和类似html标记替换为<strong>的主要原因，b代表“粗体“，即样式，strong代表”文本的重要部分“。

注意：我使用随机引导类，仅作为示例。

Answer 3

这实际上取决于你想用html / css做什么。

我个人使用现有的类，以便更容易理解并查看不同屏幕尺寸的特定元素会发生什么，而无需检查css规则。

如果您要多次重复使用该类，请使用mixins，这对您的网站特别有用。

bootstrap3网格系统 - 类dom vs css mixin

3 个答案: