Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Alexej Yaroshevich
    @zxqfox
    Both ;-) Use what you like more
    ssyz1988
    @ssyz1988
    ok
    Alexej Yaroshevich
    @zxqfox
    One more thing is tools that works atm only with block__elem_mod_val. So if you mind to use bemjson, bemhtml, and enb/bem-tools to build html then better to stick to _
    ssyz1988
    @ssyz1988
    yeah, thanks a lot
    Mike Morici
    @himedlooff
    anyone ever run into issues commenting out HTML that has class names using --? For example, <!--<div class="something--something"? Technically this is not a valid comment. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/The_Importance_of_Correct_HTML_Commenting
    ssyz1988
    @ssyz1988
    i want get a job in usa as fe, is it easy?
    Jitendra Vyas
    @jitendravyas
    @ssyz1988 try at yelp.com
    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 { /* ... */ }