BEM 和布局富文本

Posted 2023-02-23

【中文标题】BEM 和布局富文本

【英文标题】：BEM And Layout Rich Texts

【发布时间】：2018-02-28 15:31:28

【问题描述】：

我读到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 组件内应用边距还是在它们周围创建额外的布局组件？

提前谢谢你！

【参考方案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 组件并使其成为富文本的容器。

【讨论】：

感谢@Paleo。所以我应该应用 .rich-text 方法在富标签内定位标准标签（p、hr、ul、h1 等）吗？那我什么时候使用布局组件呢？我猜对于更复杂的场景，例如具有多列的网格系统？

@AndreasLukas > “仅在富标签内定位标准标签（p、hr、ul、h1 等）” 这就是我所做的。这是处理由 TinyMCE 等编辑器生成的内容的好方法。特殊组件 .rich-text 是 BEM 的一个例外。

我明白了，但是您何时会使用布局组件，例如我在上面的问题中展示的示例？

哦，我终于明白你的意思了：）谢谢！

不是.rich-text + ul，而是.rich-text > ul（子选择器）。但是你必须考虑所有情况：<ul> 或<p> 在<blockquote> 等内部。我不确定是否有可能涵盖所有情况。但为什么不呢。我个人使用嵌套组件“richtext-proof”，例如.inline-fig 组件（用于带有标题但不在<figure> 元素中的图像）并且我验证级联规则不干扰它。