Сочетание БЭМ и Vue?

Question

[eugenedrvnk]

Есть, к примеру у меня пост.

<div class="post">
  <img ckass="post__image>
  <div class="post__title"></div>
  <div class="post__description"></div>
</div>

В какой-то момент, мне необходимо сделать тот же пост, но без изображения. Как будет правильнее поступить, повесить модификатор post--img_hidden и там прописать .post_image {display: none}. Или просто убрать из вёрстки блок с картинкой, без навешивания всяких модификаторов? Или же к картинке добавить какой-то глобальный миксин "post__image hidden" ?

И касаемо ситуации с Vue. Есть компонент с той же вёрсткой. Есть ситуация в которой нужно убрать картинку. Правильнее её убирать через навешивание класса на компонент ('post--img_hidden') или прокидывать какой-то пропс :imgHidden="true' и просто выпиливать картинку из темплейта? Или же при прокидывании пропса навешивать класс на нужный блок?

Comments

[Ярослав Иванов]

Сочетание красного цвета на ваз 2101 и радио шансон ?

Answer 1

[Арсений Матыцин]

1. Вешать модификатор для сокрытия изображения хуже, чем не заносить изображения, т.е. если ты пишешь стили для выключенной пикчи, то уже выстрелил себе в ногу.
2. Vue, как логика компонтент→компонент как нельзя кстати вписывается в БЭМ-логику.

Comments

[eugenedrvnk]

Арсений Матыцин в этой ситуации, это допустимо будет?

[Арсений Матыцин]

eugenedrvnk, (눈_눈)
Я же уже ответил на этот вопрос. Зачем писать модификатор ради только того, чтобы убрать картинку, которую ты можешь вообще не заносить (v-if)?

Как не заносить, да вообще пофиг жи. Но вешать класс, чтобы скрыть это же ну бред.

Да и Aetae ответил(-а) правильно, не надо пытаться воздействовать на Vue-компонент как-то, кроме пропсами. Это просто в принципе аукнется.

Answer 2

[Aetae]

Компоненты в Vue должны по хорошему быть капсулированы. Соответственно снаружи компонента post ты никак не должен навешивать класс post__<some>, это внутренний класс компонента. Если снаружи предполагается какая-то модиикация содержимого компонента - то только через props или slot. Назначаемый компоненту класс должен иметь влияние только на сам компонент целиком и не должен ничего знать о внутренней структуре.
Внутри же самого компонента ты можешь поступать любым образом, как будет удобнее. Но поскольку Vue предоставляет v-if и v-show, то предпочтительнее юзать оные.

Comments

[eugenedrvnk]

Я обычно навешиваю классы на компоненты для добавления им margin-padding и иногда, дабы пробраться по селекторам вниз и изменить какие-то размеры для единичных случаев, не знаю, правильно ли такое применение, но вроде как самый удобный и простой вариант (:

А вот в такой ситуации, по идее удобнее будет просто не отображать картинки через модификатор?

[Aetae]

Второй вариант в рамках Vue не существует же.

Если внутри компонента, то там что-то вида:

<div :class="{'post':true, 'post--img-hidden':imgHidden}">
  <img class="post__image post__image-top>
  <div class="post__title"></div>
  <img class="post__image post__image-center>
  <div class="post__description"></div>
  <img class="post__image post__image-bottom>
</div>

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

Если снаружи компонента, то там что-то вида:
<my-post :data="..." class="post--img-hidden" />
и тут мы уже имеем нарушение капсуляции, т.к. используем внутренний класс снаружи.
С точки зрения БЭМ - это нормально, потому что БЭМ ничего не знает о компонентах и работает с классами, но вот с точки зрения Vue - это нежелательно, т.к. вы снаружи вмешиваетесь во внутреннюю работу компонента.
С компонентами надо работать как с чёрным ящиком, предполагая что внутренняя структура может поменяться как угодно, только функционал и "api" в виде props остаётся неизменными.
Единственный вариант когда так делать можно, это если класс

.post--img-hidden {
  .post__image {
    display: none;
  }  
}

вы задаёте не где-то снаружи вручную по мере необходимости, а он идёт в комплекте с компонентом как один из стандартных классов-модификаторов и документирован в месте с описанием компонента.
Но это усложнит поддержку самого компонента, т.к. при любых изменениях надо будет учитывать возможность постановки такого класса.

[eugenedrvnk]

Aetae, благодарю за ответ. То есть как я понял, использование класса с display: none всё же иногда можно считать уместным, когда, как в примере, есть необходимость скрыть сразу определённое кол-во блоков?

[Aetae]

eugenedrvnk, само собой.
С точки зрения Vue - внутри компонента вы свободны поступать как пожелаете и как вам удобнее.
С точки зрения БЭМ - вы свободны добавлять любому блоку любые модификаторы.