BEM и макет Rich Texts

Я читал здесь , что хорошая практика BEM заключается в использовании компонентов компоновки для организации streamа и позиционирования других компонентов. Ресурс предлагает следующий пример:

  • […]
    […]
  • […]
    […]

Хотя вышеизложенное имеет смысл, я не уверен, как применить этот подход к типичному блочному streamу страниц, например, перечисленному ниже:

  

Page Title


...

...

...

  • Java
  • PHP
  • HTML
  • CSS/SASS

Я не уверен, следует ли применять поля внутри h1 , hr и p или создавать дополнительные компоненты компоновки вокруг них?

Заранее спасибо!

BEM – хороший инструмент для компоновки веб-сайта, он также является отличным инструментом для структурирования внешнего вида веб-приложения. Но, используйте 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-коде:

  

Page Title


...

...

...

  • Java
  • PHP
  • HTML
  • CSS/SASS

Затем вы должны помнить, что другие компоненты BEM не могут быть вложены в этот компонент с rich-text (из-за каскадов). Но даже с помощью методологии BEM вы не можете вставить какой-либо компонент в богатый текст. Из-за семантического ограничения тегов

или которые не могут вставлять

например.

Обратите внимание: я предлагаю не .rich-text как блок: не padding ни margin ни background . Это более многократно используется, если все свойства компонента богатого текста относятся только к богатым текстовым элементам. Вам может потребоваться отобразить на странице несколько богатых текстов, и они не будут использовать один и тот же фон или paddings. Если вам нужно отобразить богатый текст в белом прямоугольнике с границами, просто создайте для этого настоящий компонент BEM и сделайте его контейнером богатого текста.