Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Jitendra Vyas
    @jitendravyas
    In BEM is it suggsted to never style HTML selectors?
    Aleksei Gurianov
    @Guria
    what do you mean exactly? selectors for html tags?
    it acceptable only in cascades within block/elements. global css resets not recommended
    Jitendra Vyas
    @jitendravyas
    @Guria like h1{} h2 {}
    Alexej Yaroshevich
    @zxqfox
    Usual usage for me is (styl):
    .user-content {
      h1 { }
      h2 { }
      p { }
      // etc.
    }
    Where user-content is a helper block
    Jitendra Vyas
    @jitendravyas
    @zxqfox is it not against BEM standards?
    Alexej Yaroshevich
    @zxqfox
    A little bit. But if you have another idea how to pass html from admin panel — a lot of people will honor you ;-)
    Jitendra Vyas
    @jitendravyas
    @zxqfox Some WYSIWYG editors provides ability to add classed to user generated html during render time
    Alexej Yaroshevich
    @zxqfox
    @jitendravyas Yep, but just some. Anyway, BEM is not a religion, it's a set of rules, and we know that rules have been made to be broken. ;-)
    Feel free to adopt methodology for your needs. Just don't overdo.
    Yelena Jetpyspayeva
    @mursya
    Guys, we really encourage you to ask your questions here https://en.bem.info/forum/ and not in this chat. So that answers will be public and helpful to anyone. We used this chat room as a temporary method but now we have fully functional forum for this. Thanks! We really DO appreciate this!
    Alexej Yaroshevich
    @zxqfox
    @mursya :+1:
    Craig Muth
    @trogdoro
    I see your twitter page (https://twitter.com/bem_en) links to this chat. Maybe it should link to https://en.bem.info/forum/ instead?
    Alexej Yaroshevich
    @zxqfox
    Nice catch.
    Jitendra Vyas
    @jitendravyas
    Anyone using Bootstrap and BEM both in same project?
    Alexander Savin
    @apsavin
    Hi @jitendravyas
    Any problems with it?
    Jitendra Vyas
    @jitendravyas
    @apsavin No. I'm just asking. I want to use BEM but most of the work I get in Bootstrap only. I mean people request to use bootstrap only
    Alexej Yaroshevich
    @zxqfox
    @jitendravyas I've tryed to do that. Atm just using some blocks like glyphs
    The main problem is bootstrap has custom classes and project structure and that's hard to use just needed parts of it
    Jitendra Vyas
    @jitendravyas
    yes
    it's hard to use any new approach unless whole team is intersted in it
    Alexej Yaroshevich
    @zxqfox
    And to use it correctly we should refactor their modules (widgets/blocks), write dependencies, etc.
    ye
    Actually, it would be great if bootstrap will support BEM-like naming and file structures
    Jitendra Vyas
    @jitendravyas
    Yes
    Alexej Yaroshevich
    @zxqfox
    I'm just not sure they are interested in it ;-)
    Jitendra Vyas
    @jitendravyas
    but to do that they will have to be convinced that BEM approach is better for maintainability of large projects
    Alexej Yaroshevich
    @zxqfox
    Actually, they should consider it for themselves
    They can build anything for end-user
    Even several options
    I mean several different builds
    Ivan Strelkov
    @istrel

    BEM adepts, please tell me, how to solve this problem using BEM:

    I have upper element with two possible modifiers _light and _dark (for theme applied). Also I have child elements which have different styles depending on upper element modifier. The first thing that goes in mind is setting classes like

    .upper_light .child { background: white; }
    .upper_dark .child { background: black; }

    But this is not the right way, I guess.

    Yuri Tkachenko
    @tyv

    @istrel It is called 'inheritance modification' and it is ok. You can do in another way: each component (block) may has own theme modifier, and if you need to style elem, you can do it like

    .block_dark .block__elem { background: black; }

    it is best way if you want to make a lib of blocks with different themes or make a theme to a lib, that don't have any theme.

    Ivan Strelkov
    @istrel
    @tyv Thanks
    Ivan Strelkov
    @istrel
    @tyv Could you please point me to some docs which prove that it is ok to perform inheritance modification in BEM this way?
    Yuri Tkachenko
    @tyv
    @istrel nope, not sure they are
    Alexej Yaroshevich
    @zxqfox
    @istrel Just if you will use .child (it's a block, right?) you will have more cohesion
    Ivan Strelkov
    @istrel
    @zxqfox I just hurried up. I meant .block_dark .block__child { ... }
    Alexej Yaroshevich
    @zxqfox
    ah
    It's vaiable since elements can have only one "parent" block
    So it's already connected
    Christian Petersen
    @fnky

    I'm unsure of how to tackle this; I have a component outline-view which has grouping like so

    <div class="outline-view">
      <div class="outline-view__group">
        <div class="group__item--header">A</div>
        <div class="group__item">Aruba</div>
        <div class="group__item">Afghanistan</div>
        <div class="group__item">Algeria</div>
      </div>
      <div class="outline-view__group">
        <div class="group__item--header">B</div>
        <div class="group__item">Bahamas</div>
        <div class="group__item">Bahrain</div>
        <div class="group__item">Bangladesh</div>
        <div class="group__item">Barbados</div>
      </div>
    </div>
    .outline-view { /* ... */ }
    .outline-view__group { /* ... */ }
    .group__item { /* ... */ }
    .group__item--header { /* ... */ }

    Let's say I introduce another similar component, that uses the naming of __group as well for a list, what would be the "correct" way to style these independently? My current solution is being specific:

    .outline-view__group > .group__item { /* ... */ }
    .outline-view__group > .group__item--header { /* ... */ }
    
    .another-view__group > .group__item { /* ... */ }
    .another-view__group > .group__item--header { /* ... */ }
    Aleksei Gurianov
    @Guria

    group__item is element of block group. But seems you treat them as elements of outline-view__group. BEM hasn't elements of elements. Just change naming of group__item to outline-view__group-item.

    PS. There is forum on bem.info site made for such sort of questions. You can move your question there to get answers from more broad community and BEM-team.

    Christian Petersen
    @fnky
    Thanks for the clarification, @Guria much appreciated!
    Vasiliy Yorkin (meow)
    @vyorkin
    hey! I've got some stupid question for you guys
    Alexej Yaroshevich
    @zxqfox
    Oh, really?
    Vasiliy Yorkin (meow)
    @vyorkin
    For example I have class .form, .form__button, .form__button--submit, than comes .form--sign-up with --sign-up modifier specifically for sign-up form
    and than I need to introduce another modifier like form--sign-up__button--submit sign-up form submit button
    and than I have class names like