BEM 和布局富文本

Question

我读到 here 使用布局组件来安排其他组件的流动和定位是一个很好的 BEM 实践。该资源建议使用以下示例：

   <ul class="l-grid">
       <li class="l-grid__item">
           <div class="c-card">
               <div class="c-card__header">
                   […]
               </div>
               <div class="c-card__body">
                   […]
               </div>
           </div>
       </li>
       <li class="l-grid__item">
           <div class="c-card">
               <div class="c-card__header">
                   […]
               </div>
               <div class="c-card__body">
                   […]
               </div>
           </div>
       </li>
   </ul>

虽然上面的内容非常有道理，但我不确定如何将这种方法应用于典型的基于块的页面流，如下所列：

        <section class="c-page-section c-page-section--white-bg">

           <div class="l-container">

               <h1 class="c-page-section__title">Page Title</h1>
               <hr class="c-separator c-page-section__separator">

               <p class="c-paragraph">
                   ...
               </p>
               <p class="c-paragraph">
                   ...
               </p>
               <p class="c-paragraph">
                   ...
               </p>
               <ul class="l-horizontal-list">
                   <li class="l-horizontal-list__item c-tag">Java</li>
                   <li class="l-horizontal-list__item c-tag">PHP</li>
                   <li class="l-horizontal-list__item c-tag">HTML</li>
                   <li class="l-horizontal-list__item c-tag">CSS/SASS</li>
               </ul>

           </div>

    </section>

我不确定是在基于 h1、hr 和 p 的 c 组件内应用边距，还是在它们周围创建额外的布局组件？

提前致谢！

Answer 1

BEM 是布局网站的好工具，也是构建 Web 应用程序外观的好工具。但是，使用 BEM 来设置富文本的样式？只是……不是什么好工具。

我建议你创建一个 "not BEM component"，命名为 rich-text，级联：

.rich-text p {
  /* style here, including margins and paddings */
}
.rich-text hr {
  /* style here, including margins and paddings */
}
.rich-text ul {
  /* style here, including margins and paddings */
}
.rich-text ul > li {
  /* style here, including margins and paddings */
}
// etc.

在您的 HTML 代码中：

    <section class="c-page-section c-page-section--white-bg">
       <div class="l-container rich-text">
           <h1>Page Title</h1>
           <hr>
           <p> ... </p>
           <p> ... </p>
           <p> ... </p>
           <ul>
               <li>Java</li>
               <li>PHP</li>
               <li>HTML</li>
               <li>CSS/SASS</li>
           </ul>
       </div>
    </section>

然后，您必须记住，其他 BEM 组件不能嵌套到此 rich-text 组件中（因为级联）。但即使使用 BEM 方法，您也无法在富文本中的任何位置嵌套任何组件。由于标签 <p> 或 <em> 的语义限制，无法嵌入 <div> 例如。

注意：我建议不要将 .rich-text 本身设置为一个块：不要 padding 也不要 margin 或 background。如果富文本组件的所有属性都只与富文本元素有关，那么可重用性更高。您可能需要在页面中显示多个富文本，并且它们不会共享相同的背景或填充。如果您需要在带边框的白色矩形中显示富文本，只需为此创建一个真正的 BEM 组件并将其作为富文本的容器。

BEM 和布局富文本

BEM And Layout Rich Texts

html

layout

components

sass

bem