css - bootstrap3 网格系统 - 类 dom 与 css mixin

Question

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

类dom

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

对比

css 混合

<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

视情况而定，为简单起见，您可以当然使用“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:我在上面展示的只是一个示例，主要思想是:将 damn 内容与 分开他妈的风格! ;-)

这(内容-风格分离)也是 <b> 的主要原因。和类似的 html 标签已被替换为 <strong>在 html5 中，b代表“大胆”，这是风格和strong代表“文本的重要部分”。

注意:我使用了随机 Bootstrap 类，仅作为示例。