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 来设置富文本的样式？只是……不是好工具。

我建议你创建一个“非 BEM 组件”，命名为 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 组件并使其成为富文本的容器。