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

Question

我目前正在使用CSS-Frameworks转换为编写自己的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>

如果我选择第二个选项，那么我将不得不为网站上的每个部分编写网格样式。更多内容=更多重复代码，因为每个块都需要“row”和“columns”mixin。

哪种方法更好？

Answer 1

如果我理解你的话;你可以纠正我。我和你现在面临着类似的挑战。我试图让现代css布局成为框架所做的黑客，以穿越dom和造型的障碍。但是，你需要清醒自己的思想，看看现代CSS所拥有的力量。它呈现了它们的框架 - 黑客。

让我们尝试使用css grid和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：flexbox

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>

Answer 2

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

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

真的，使用哪种方法对你正在做的事情最有意义，但是我要提醒你不要编写你自己的CSS，它实际上只是复制了Bootstrap / Foundation / Bulma /百万其他人已经完成的工作。