制作网格类并污染 HTML 或独立创建页面部分样式？

Question

我目前正在从使用 CSS 框架切换到编写自己的 CSS。 我的网页需要一个网格，但我不知道该选择什么路径。

我将使用 flexbox。让我困惑的是我有两个选择。

第一个选项是让我的网格表现得像 Foundation 或 Bootstrap 中的网格。 制作 .row、.column 等类并在 HTML 中使用它们。

例如：

<div class="row">
  <div class="column large-12">
    Some content
  </div>
</div>
<div class="row">
  <div class="column large-6">
    content
  </div>
   <div class="column large-6">
    content
  </div>
</div>

但它会使我的模板更重，污染更严重。

第二种选择是使用带有 BEM 表示法的语义 HTML，并为每个部分独立制作样式。 例如：

<section class="first-section">
  Some content
</section>

<section class="second-section">
   <div class="second-section__element">
      content
   </div>
    <div class="second-section__element">
      content
   </div>
</section>

如果我选择第二个选项，那么我必须为网站上的每个部分编写网格样式。更多内容 = 更多重复代码，因为每个块都需要“行”和“列”混合。

哪种方法更好？

Answer 1

我个人会选择第一轮，因为我不喜欢根据我在文档中的位置重新声明样式。我可以肯定地说，因为我从事的一个项目最初是由我们客户的开发人员开发的，我对其进行了更改以进行测试以确定 UI/UX 修改的盈利能力。

现在我从未真正与他们的开发人员谈过这件事，但从我在项目中看到的是，他喜欢响应式框架的想法，但不想处理 Bootstrap / Foundation / Bulma ，所以他建立了自己的。问题是，由于他是这个项目的开发人员（据我所知，他是一个人），有时他必须从另一个组件中复制代码，并且由于文件稍后编译的方式，他不能只是使用@extend 呼叫，因为该项目可能可用也可能不可用。

真的，使用最适合您正在做的事情的方法，但我会提醒您不要编写自己的 CSS 来有效地复制 Bootstrap / Foundation / Bulma / 百万其他人已经完成的工作。

Answer 2

如果我理解你的话；你可以纠正我。我遇到了和你现在类似的挑战。我试图让现代 css 布局像框架所做的 hack 一样工作，以跨越 dom 和样式的障碍。然而，你需要清醒一下，看看现代 CSS 所拥有的力量。它呈现框架的本质 - 黑客。

让我们尝试使用 CSS 网格和 flexbox 重新创建上面的布局。你会意识到你不需要 BEM 来实现你正在寻找的东西。您会意识到 HTML 没有污染，而是标记更干净、更精简、更有效，同时又不会丢失样式。

CSS Grid（一个选项。有很多方法可以做到这一点。在不到 10 行中，我拥有与框架相同的样式。HTML 干净且易于访问）

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}
.one {
  grid-column: span 2;
}

.one, .two {
  background: #a03;
}

.three {
  background: #bada55;
}

<div class="one">Full width container with some content</div>
<div class="two">Container two with content</div>
<div class="three">Container two with content</div>

选项 2：弹性盒

body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.one {
  flex-basis: 100%;
  background: #b3ac03;
} 

.two, .three {
  flex-basis: 50%;
  background: #a03;
}

.three{
  background: #bc2dc2;
}

<div class="one">Full width container with some content</div>
<div class="two">Container two with content</div>
<div class="three">Container two with content</div>