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来设计丰富的文本？它只是...不是好工具。

我建议你创建一个＆＃34;而不是BEM组件＆＃34; ，名为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方法，您也无法将任何组件嵌套在richtext中的任何位置。由于标签<p>或<em>的语义限制，例如无法嵌入<div>。

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

BEM和布局丰富的文本

1 个答案: