Как подружить BEM и WP?

Question

[BB 8]

Добрый вечер! Работаю в команде, тиммейт, который пишет на WP, жалуется, что когда все повешано на классы - это плохо:

<section class="sec1">
 <h1 class="title title_black">
 <p class="text text_with_some_css_style">
</section>

Говорит, что нужно вот так:

<section class="awesomeClass">
 <h1>
<p>
</section>

.awesomeClass h1
.awesomeClass p

Это слишком упрощенный вариант, потому что имея в проекте больше, чем 40-50 страниц, всё выливается в...........Предлагает все завязывать на 1 класс и заранее предусматривать возможные вариации: т.е. если во втором случае в секцию вставляется еще и UL, то он должен заранее быть застайлен в css:

.awesomeClass ul

Что делать, если параграфы или те же самые списки отличаются внутри секции ?? Делать так:

.someClass1 ul:first-child
.someClass1 ul:nth-child(2)

?????????????????????????????????

Comments

[alvvi]

Работаю в команде, тиммейт, который пишет на WP, жалуется, что когда все повешано на классы - это плохо:

Что значит "повешано на классы"? Как это связано с БЭМ, где все крутится вокруг блоков?

[Алекс Глебов]

Есть контент который вводится из админки вместе с p и h1, туда вообще классы не повешать.
Еще есть меню, хлебные крошки, пагинации и прочее штуки. Быстрее вам переверстать, чем wp под ваши классы подгонять.

[BB 8]

Алекс Глебов, А как быть если то, что выводится из админки может содержать разные стили ? Допустим, выводится блок из 10 параграфов, 6 из которых - разные по стилю, что делать в таком случае ? nth-child ? Проблема в том, что если повесить nth-child, это затронет все блоки на всех страницах, где, например, может быть не 10 параграфов, а 6-4-2-8 и т.д. и т.п., что делать в таком случае ? Вешать доп.класс на родителя ?

Answer 1

[Владимир Проскурин]

Ну вообще, в WP почти все штуки, виджеты, меню и.т.д., всем им можно поменять шаблон и проблем не будет.

Comments

[BB 8]

Изначально можно выводить h1,p,ul и весь динамический контент с классами ? К примеру, в одной секции заголовок черного цвета - один класс, в той же самой секции, но на другой странице - белый - другой класс ?

[BB 8]

В данном случае, секция = шаблон.

[Владимир Проскурин]

BB 8, нужно смотреть, если блоки редактируются через редактор WP в админке, то там не должно быть классов. Такие блоки как каркас новостей, футер, меню, шапка и.т.д., им можно задавать любые классы.

[alvvi]

BB 8, внутри контента не должно быть классов, как вам правильно сказали. Тут небольшой чейнинг допустим, e.g.

.post__content {
  p {} // стили для параграфов из админки
  ul {} // стили для списков из админки
}

Этого достаточно для контента обычных статей в 99% случаев. Какие-то особенные списки надо выводить либо шорткодами, либо менять совсем редактор контента на что-то другое.

[alvvi]

BB 8, да и причем тут секции и шаблоны совершенно не понятно. У вас что весь контент сайта выводится динамически через редактор WP?

[BB 8]

Илья Ростопка, Не весь. Но многие секции которые содержат в себе загаловки, параграфы и списки часто повторяются, но могут содержать те же самые параграфы и списки отличиющиеся друг от друга. К примеру:

<div class="one">
<h1>
<p class="Здесь одни стили">
<p class="Здесь другие стили">
</div>

[alvvi]

BB 8, и? Как это связано с БЭМ-ом? В чем вопрос?
Если вы используете БЭМ вы в темплейте сразу пишите

<div class="section">
<h1 class="section__heading heading"></h1>
<p class="section__paragraph paragraph"></p>
<p class="section__paragraph paragraph paragraph--special"></p>
</div>

к примеру, и все.
Не понятно вообще как тут связан WP и БЭМ.

[BB 8]

Илья Ростопка, Ну, БЭМ тут связан с тем, что я пишу по БЭМу(bem здесь не самая важная часть, просто было бы прекрасно услышать людей, которые пишут по БЭМу на WP), а wp-мэйт просит чтобы у динамического контента не было КЛАССОВ ВООБЩЕ :) Т.е. Ваш последний коммент - это плохой стиль для формирования шаблона, который может переиспользоваться/дополняться.

[alvvi]

BB 8, ну так шлите его изучать БЭМ. Или пишите как он хочет, тут как бы не понятен вопрос просто.

чтобы у динамического контента

Меня смущает что вы эту часть сюда вставляете. Динамический контент - это то что выводится из админки через the_content() или кастомное поле. Шаблоны/partials/все остальное - это статическая верстка с вставленным в них контентом, не важно переиспользуется ли она на странице или через шотркод выводится, единственный "динамический контент" в котором есть верстка у меня на сайтах это обычно the_content() и для стилей внутри него действительно лучше использовать чейнинг.

[BB 8]

Илья Ростопка, Понял, спасибо, что разжевали :D

Answer 2

[Игорь Воротнёв]

BB 8,

wp-мэйт просит чтобы у динамического контента не было КЛАССОВ ВООБЩЕ

Вот это ключевой момент. И в комментах вам уже написали, что проще ваш CSS поменять, нежели редактор WP. Технически, редактор WP научить можно. Но он сохраняет весь динамический контент в БД вместе с HTML (и классами). Это означает, что если вам понадобится класс переименовать, или добавить новый модификатор к "всем таким же блокам или элементам" - то вам придется лазить по всем старым записям и менять это там тоже. Что, разумеется, не очень ок.

Какие есть варианты? Всякие Visual Composer'ы, но они тоже сохраняют HTML в базу, поэтому риски те же. ACF и подобные решения для произвольных полей, которые позволят разбить контент на "блоки", и каждому блоку на выводе можете давать свой темплейт. Но если контента много, по нему надо искать и тд - опять же, вагон лишней работы бекендеру. Ради чего? Какой профит?

Есть надежда лишь на новый редактор, Gutenberg, который в этом году должен заменить TinyMCE. Там все на реакте, контент редактируется именно блоками, и каждый блок может иметь свой темплейт. По идее, это должно решить эту проблему раз и навсегда.

Comments

[BB 8]

Спасибо за развернутый ответ. Обязательно почитаю о Gutenberg'е

[Роман Назаркин]

Немного исправлю: каждый блок в visual composer'e является обычным шорткодом, собственно так в базу и сохраняется, поэтому меняя темплейт шорткода базу данных трогать не нужно. По сути, принцип работы гутенберга аналогичный.

[Игорь Воротнёв]

Роман Назаркин, не, у Gutenberg другой принцип работы, а по поводу VC да, спасибо за корректировку. Я его стараюсь стороной обходить, поэтому не помню в деталях.

Answer 3

[Programmist_Kolxozn1k]

На сколько я понял вам нужно делать контентную област и задать там класс какой нибудь. А для того чтобы все это можно было с админки менять нужно уж стиллизовать все остальное по тегам например:

.inner-section - это облось секции в котором уже не будут теги с классом а будут так.

.inner-section h1
.inner-section h2
.inner-section h3
.inner-section h4
.inner-section p
.inner-section ul
.inner-section ol
.inner-section и т.д.

вот тут посмотрите на эту тему видео
ссылка

Comments

[BB 8]

Именно, но с точки зрения верстки такой подход не очень удобен, т.к. все завязывается на общий класс секции. Спасибо за ответ, обязательно посмотрю видео

[Programmist_Kolxozn1k]

BB 8, не знаю, я пока с этим не сталкивался.