Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    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
    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

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

    bem.png
    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?
    image.png
    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.