边界和布局富文本 [英] BEM And Layout Rich Texts

问题描述

我读了这里指出，使用布局组件来安排其他组件的流动和定位是一个很好的BEM实践。资源建议如下示例：

I read here that it is a good BEM practise to use layout components to arrange the flow and positioning of other components. The resource suggests the following example:

   <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>

尽管上述方法非常合理，但我不确定如何将此方法应用于典型基于块的页面流，例如下面列出的：

While the above makes perfect sense, I'm not sure on how to apply this approach to a typical block based page flow such as the listed below:

        <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的组件，或者在它们周围创建额外的布局组件？

I am uncertain whether to apply margins inside the h1, hr and p based c-components or to create additional layout components around the them?

预先感谢您！

Thank you in advance!

推荐答案

BEM是布置网站的好工具它也是构建Web应用程序外观的极好工具。但是，使用BEM来设计富文本？这只是...不是好的工具。

BEM is a good tool to layout a website, it is also an excellent tool to structure the appearance of a web application. But, use BEM to style rich texts? It's just... not the good tool.

我建议你创建一个名为not BEM component > rich-text ，带瀑布：

I suggest you to create a "not BEM component", named rich-text, with cascades:

.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代码中：

And in your HTML code:

    <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组件不能嵌套到富文本组件（由于级联）。但即使使用BEM方法，您也无法在富文本中的任何位置嵌套任何组件。由于标记< p> 或< em> 的语义限制无法嵌入< div> 例如。

Then, you have to remember that other BEM components cannot be nested into this rich-text component (because of cascades). But even with the BEM methodology you could not nest any component anywhere in a richtext. Due to the semantic limitation of tags <p> or <em> that cannot embed <div> for example.

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

Notice: I suggest to not style .rich-text itself as a block: no padding neither margin or background. It is more reusable if all properties of the rich text component are only about the rich text elements. You could need to display several rich texts in the page and they won't share the same background or paddings. If you need to display the rich text in a white rectangle with borders, just create a true BEM component for that and make it a container of the rich text.

这篇关于边界和布局富文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！