0

I have a doubts about this HTML structure. Is it correct according to BEM approach?

<div class="boxWithBorder">
  <div class="header">
    <h2 class="boxWithBorder__element"></h2>
  </div>
</div>

To my mind it should look like that

<div class="boxWithBorder">
  <div class="header">
    <h2 class="header__element"></h2>
  </div>
</div>

What keeps elements encapsulated.

FeDev
  • 27
  • 3
  • 1
    what is block1 and block2? can you use a real case scenario instead of what you are trying to do? – Dejan.S Jun 07 '17 at 09:11
  • You're probably right, but given that 'block1' is not semantic, who can say? If you can avoid BEM completely, it would make life so much easier, in my experience. BEM is HTML pollution in the name of CSS avoidance (avoiding Cascade conflicts). Application developers that do not understand CSS will not thank you for making them produce HTML in this ridiculous style. – Lee Kowalkowski Jun 07 '17 at 09:45
  • @Dejan.S According to BEM block1 and block2 are functionally independent page component that can be reused? So it's up to you if it will be nav and search_box or something else. I just want to know in general if putting **block1__element** inside block2 is correct? Please see my second code spippet. – FeDev Jun 07 '17 at 09:48
  • @LeeKowalkowski why it's not semantic? Blocks can be nested according to BEM. – FeDev Jun 07 '17 at 09:54
  • block1 is not semantic because it doesn't mean anything. I've no idea whether block2 makes sense to exist within block1 or whether block1__element makes sense as a child of block2. If you replace block1 and block2 with a real example, then it might make sense. Whether or not it is correct to have block1__element as a child of block2 may have different answers depending on what block1 and block2 really are. – Lee Kowalkowski Jun 07 '17 at 10:01
  • @LeeKowalkowski Do you base that on own experience? What would you suggest instead, I mean Application developers that don't understand CSS wont understand any CSS regardless right? – Dejan.S Jun 07 '17 at 10:10
  • For example, suppose block1 meant it was a movable container, ('window'), and 'block1__element' was the area of the container you have to click and drag to move it ('window__handle'). Your interface has several styles of windows, some can have titles, some can have no title. Suppose block2 was the title bar container of the window ('titlebar'). It would be conceivable for the window__handle to be situated inside the titlebar for windows that had them... – Lee Kowalkowski Jun 07 '17 at 10:12
  • Generally we do components and structures, that means structures are compositions of components. It will require nesting so that part is ok. As far as your first approach that is not ok by our standards and not used. `block1` should not live inside `block2` but `block2` has to live inside `block1` as it's a nested component. Makes sense? BTW BEM is perfectly fine to use and a lot of frontend devs do it, heavyweights as well, check out https://csswizardry.com/ for instance, he got some great articles about BEM – Dejan.S Jun 07 '17 at 10:14
  • @LeeKowalkowski I mean your statement that you should avoid BEM all in all? "I mean Application developers that don't understand CSS wont understand any CSS regardless right". – Dejan.S Jun 07 '17 at 10:22
  • Classes are NOT CSS though, they're HTML. When you add a class to a HTML element you're classifying it, you're saying "this HTML element belongs to some author-invented collection". CSS can select HTML elements according to their class, but many times it's more appropriate to select elements according to aria attributes, not modifiers, for example - because aria attributes actually have real value. Many CSS methodologies *over* classify the HTML. In the name of making their CSS more maintainable, this is backwards. Content is king, not CSS. Weaving BEM through your content is devaluing it. – Lee Kowalkowski Jun 07 '17 at 10:31
  • So, @Dejan.S, from experience I would hear application developers complain about having to use BEM (especially modifiers) when the information they're adding is already present in the HTML. It's noise, usually. – Lee Kowalkowski Jun 07 '17 at 10:34
  • @LeeKowalkowski So what style of html/css should a developer use for a non frontend developer to understand, in your case? This does not make any sense, for me at least. – Dejan.S Jun 07 '17 at 13:09
  • @Dejan.S The style of HTML should be clean, semantic, predictable - BEM is often not. Classes should be used only where necessary, like Lea Verou's HTML (github: leaverou). Large teams of content producers would more likely use markdown or a CMS and be very uncomfortable working with HTML at all. Good CSS design limits class names to containers only, where possible. On significant projects, CSS is also accompanied with a user-guide for the content producers. If you want to make something easy to use, write the user-guide first, just like how writing tests first, makes software easy to test. – Lee Kowalkowski Jun 07 '17 at 17:17

1 Answers1

0

Generally we do components and structures, that means structures are compositions of components. It will require nesting so that part is ok. As far as your first approach that is not ok by our standards and not used. block1 should not live inside block2 but block2 has to live inside block1 as it's a nested component. Makes sense? BTW BEM is perfectly fine to use and a lot of frontend devs do it, heavyweights as well, check out csswizardry.com for instance, he got some great articles about BEM

Also I would suggest the following using BEM (or any html/css for that matter) is that skip the camleCase and use "-" instead

<div class="box-with-border">
  <div class="header">
    <h2 class="header__element"></h2>
  </div>
</div>


<div class="hero hero--red-with-border">
  <h1 class="hero__title>Title...</h1>
  <p class="hero__body-text">Text...</p>
</div>
Dejan.S
  • 18,571
  • 22
  • 69
  • 112