时间戳

首页 > 解决方案 > 如何为 HTML/CSS 使用“带有 BEM 的原子设计”方法？

html - 如何为 HTML/CSS 使用“带有 BEM 的原子设计”方法？

问题描述

我刚开始使用原子设计方法来编写我的 HTML。我知道使用 BEM，但不知道将它与 Atomic 一起使用的最佳实践。诸如 , 等之类的东西element of an organism往往element of a molecule会modifier of an element of a molecule造成一些混乱，并且不确定我是否正确使用了这些内容。有人可以解释一下。任何帮助表示赞赏

示例代码：

<div class="container cl-organism-learn">
  <div class="row cl-molecule-learn-row cl-organism-learn__elem">
    <div class="col-sm cl-atom-first cl-molecule-learn-row__elem cl-atom-first--background-blue">
      One of three columns
    </div>
    <div class="col-sm cl-atom-second cl-molecule-learn-row__elem cl-atom-first--background-red">
      Two of three columns
    </div>
    <div class="col-sm cl-atom-third cl-molecule-learn-row__elem cl-atom-first--background-yellow">
      Three of three columns
    </div>
  </div>
</div>

标签： htmlcssatomicbem

解决方案

推荐阅读