bem/talk

Let's communicate via our forum on BEM http://bit.ly/en-forum

Aleksei Gurianov

@Guria

@cmnstmntmn is it about bem-bh-php?

Constantin Angheloiu

@cmnstmntmn

@Guria yes

Aleksei Gurianov

@Guria

I think is better create issue on repo https://github.com/bem/bh-php or post on forum https://en.bem.info/forum

Alexej Yaroshevich

@zxqfox

@cmnstmntmn It shouldn't print anything, easier to make echo $bh->apply than ob_start(); $bh->apply...; $result = ob_get_clean();right?

Sten Hougaard

@netsi1964

What is the best way to classify sub elements in BEM? Like if I have an InputGroup where I inside it have an Input class. The Input component could appear on its own, so I think that having a class like this .InputGroup-Input would not be perfect. On the other hand .InputGroup .Input is (I guess) not very BEM'ish :-)

Alexej Yaroshevich

@zxqfox

Actually cascading in this case is totally fine. Also you could add modifiers like .input--grouped if you have this info in templates.

And there are no subelements in BEM :-)

Sten Hougaard

@netsi1964

So it's down to good old cascading :-)

Thanks @zxqfox

Aleksei Gurianov

@Guria

@netsi1964 official bem-components library has control-group block https://github.com/bem/bem-components/tree/v3/common.blocks/control-group
but it has no styles. blocks that could appear in control-group defines how its looks on its own:

Sten Hougaard

@netsi1964

Now that I have a BEM evangelist: Is it correct that most (western) developers have only adapted the CSS part of BEM, and is not using the whole system? Wereas in Russia you are using the whole system.

Aleksei Gurianov

@Guria

@netsi1964 https://en.bem.info/ has links to Telegram chat, Facebook group and Twitter which are better places to ask such questions (Personally, I would recommend Telegram). Also https://en.bem.info/forum is good way to share persistent question and answer with whole community.

Sten Hougaard

@netsi1964

ok, thank you

Aleksei Gurianov

@Guria

Wereas in Russia you are using the whole system:

Most promoted as I know

Lot of Yandex services
Alfa Bank in its Alfa-labaratory subdivision
http://factory.mn/ru

Valery Semenenko

@gearmobile

hi guys. tell me, the picture - is BEM? drive quote this code to my reviewer:

"Still weird BEM. For example, "topheader__center" is an element, not block. So he should not be nested elements.

I understand that this wrapper is the affordable system, but it is better then to ask for this separate class (block), without reference to "topheader"."

undercloud

@undercloud

Всем привет! Такой вопрос по БЭМ'у - добавлять вспомогательные классы которые не имеют отношения к методологии нормальная практика? <span class='block-name clearfix'>...</span>
и помогите понять что такое миксы?

Hello! This question BEM- added the helper classes that are not related to the methodology of normal practice? <span class = 'block-name clearfix'> ... </ span>
and help to understand what mix?

Sergey Belozyorcev

@belozyorcev

@undercloud то что ты написал - и есть миксин (примиксовывание свойств другого блока). Часто используется для выравнивания.

class='block-name__item next-block'

next-block - основной блок, но в данном случае является элементом block-name.
Чтобы его вырновнять в блоке block-name (margin, padding и т.д.) - добавляется миксин элемента.

Т.е.

.next-block { /* здесь стили блока */}
.block-name__item { /* здесь выравнивание блока внутри другого блока */ }

@gearmobile u can use mixins.

topheader center

Example:

.topheader { /* styles */}
.center { text-align: center; }

undercloud

@undercloud

@belozyorcev спасибо большое за ответ!

Sergey Belozyorcev

@belozyorcev

@undercloud здесь лучше не задавать вопросы (чёт здесь глухо). Лучше пиши на форуме, либо в телеграм, либо в slack.

Sten Hougaard

@netsi1964

Hi - just wondered. If I have a block which has a modifier, should the modifier then be a part of element classes? Imagine Block: "block", Modifier:"dark" with element: "button".
Element class where modifier is used on elements:

<div class="block--dark block">
  <div class="block-button">

Element class where modifier is not used on elements:

<div class="block--dark block">
  <div class="block--dark-button">

Which one is best practice?

Alexej Yaroshevich

@zxqfox

No, it shouldn't. Elements bound to blocks but you don't need to show modifiers in elements' classes.
The first sample is right.

Sten Hougaard

@netsi1964

@zxqfox okay. Should I then write this code to address modifing changes to the button:

.block--dark .block-button { content: "DARK"; }

..or should I create a new block element?

(skipping the modifier for a new block..)

Alexej Yaroshevich

@zxqfox

Yes, sure. It's a common case for modifying elements of modified blocks. You can do it because elements can't be used without blocks.

Sten Hougaard

@netsi1964

Thanks @zxqfox

Alexej Yaroshevich

@zxqfox

You are welcome. Btw, if you using telegram: https://telegram.me/bem_en

Sten Hougaard

@netsi1964

Looks interesting - however I do not know/use telegram. Will look at it.

Sten Hougaard

@netsi1964

@zxqfox Searching for "bem_en" on telegram has no hits...

Alexej Yaroshevich

@zxqfox

Huh? But do the link work?

Sten Hougaard

@netsi1964

I installed the ios app, where I could not find you in a search

Kasper

@aventic

Hello guys.. How would I go around solving this issue:

    <div class="header">
        <ul class="main-menu header__main-menu">
            <li class="main-menu__item"><a href="#" class="main-menu__link">Herretøj</a></li>
            <li class="main-menu__item"><a href="#" class="main-menu__link">Brands</a></li>
        </ul>
    </div>

I have margin on both main-menu (margin-left: 0) and header__main-menu (margin-left: 20px), but header__main-menu wont override my main-menu styles. Am I doing this the wrong way, or do I have to refactor something here? Thanks! :)

Kasper

@aventic

Thats actually because my header styling is written first in my CSS, should I keep the header__main-menu styling next to my main-menu styling - should I place that styling after?

nunofreitasbotelho

@nunofreitasbotelho

Hello, i’m new to BEM so i’m struggling a bit with this simple thing.
I have this:

<ul class="list">
        <li class="list__item">Item 1</li>
        <li class="list__item list__item--red">Item 2</li>
      </ul>

Whats the difference if in the second <li> i put it like this?

<li class="list__item--red">Item 2</li>

Alexander Kuzmenko

@eightalex

Привет! Есть у кого-то опыт интегрирования БЭМ в симфони? Можно ли как-то собирать блоки твигом?

Или это извращение?

Sergey Berezhnoy

@veged

@eightalex привет! этот чат практически мёртвый — приглашаем в https://telegram.me/bem_ru

Bruno Torrinha

@akazorg

Hello! I was wondering if Bootstrap and Bulma are using BEM. Do you know about?

Adam Bohannon

@abohannon

Hi all, I'm laying out the structure for an app and this is my first time using BEM. I'm 99% sure i'm getting the naming conventions wrong:

<div id="js-app" class="app">
    <div class="app__main">
      <div class="app__main__top">
        <div class="app__main__top__temp">

        </div>
        <div class="app__main__top__city">

        </div>
      </div>
      <div class="app__main__image">

      </div>
    </div>
    <div id="js-sub1" class="app__secondary">
      <div class="app__secondary__left"></div>
    </div>
    <div id="js-sub2" class="app__secondary">
      <div class="app__secondary__left"></div>
    </div>
    <div id="js-sub3" class="app__secondary">
      <div class="app__secondary__left"></div>
    </div>
  </div>

tayurus

@tayurus

hi there
Is it correct to locate elements and blocks on one level?

Vladimir Grinenko

@tadatuta

@akazorg

I was wondering if Bootstrap and Bulma are using BEM. Do you know about?

nope, for some reason they don't use BEM. But modern component libs like Material Design Lite (https://getmdl.io/faq/#css-naming-conventions) do.

Vladimir Grinenko

@tadatuta

@abohannon the main missing this is the fact that you avoid elements of elements (see https://en.bem.info/methodology/quick-start/#nesting-1).

Here's how it can be solved:

<div id="js-app" class="app">
    <div class="app__main">
        <div class="app__top">
            <div class="app__top-temp"></div>
            <div class="app__top-city"></div>
        </div>
        <div class="app__image"></div>
    </div>
    <div id="js-sub1" class="app__secondary">
        <div class="app__secondary-left"></div>
    </div>
    <div id="js-sub2" class="app__secondary">
        <div class="app__secondary-left"></div>
    </div>
    <div id="js-sub3" class="app__secondary">
        <div class="app__secondary-left"></div>
    </div>
</div>

@tayurus

Is it correct to locate elements and blocks on one level?

Sure, absolutely!

gitter group is kinda dead :(
please, ask your questions at https://telegram.me/bem_en

tayurus

@tayurus

@tadatuta thanks!

Adam Bohannon

@abohannon

@tadatuta Thanks for the top. This makes more sense.

Where communities thrive

People

Repo info

Activity