2

I'm seeing conflicting documentation and opinions on whether "--" is still invalid in an HTML comment. Most of the documentation I've seen on this is 5-10 or more years old. Consider the following simplified code in HTML using BEM syntax for CSS class names.

<html>
    <head>
        <meta charset="utf-8">
        <title>Page</title>
    </head>
    <body>
        <div>
            <header>
                <div>
                    <div>
                        <div><a href="/">link</a></div>
                        <!-- <div class="block__element--modifier"></div> -->
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </header>
        </div>
    </body>
</html>

I'm looking at using a parser that reads this and autocloses my header producing this resulting output. Looking at the code it is identifying the "--" in the commented class as the close of the comment, the commented closing div tag gets consumed, and later it determines that the level requires that the header be closed.

<html>
    <head>
        <meta charset="utf-8">
        <title>Page</title>
    </head>
    <body>
        <div>
            <header>
                <div>
                    <div>
                        <div><a href="/">link</a></div>
                        <!-- <div class="block__element--modifier"></div> -->
                        <div></div>
                        <div></div>
                    </div>
                    </header>
                </div>
            </header>
        </div>
    </body>
</html>

While leaving commented code isn't the best, this is a completely normal thing within the typical development cycle. In our case this output causes a very broken rending of this page.

This output is obviously not correct, but I want to understand what should be correct. According to this and other posts there is the idea that "--" or double hyphens shouldn't be used in HTML because it isn't allowed in XML. Indeed, the HTML4 spec discourages this, but it appears HTML5 doesn't make this same distinction. I've always had the understanding that XML logic and parsing really shouldn't be used for HTML because it isn't actually a subset of xml. In fact I've never been happy when I've gone down that path .

The impact here is that BEM is a common convention and if the current HTML spec forbids this we may want to avoid BEM or modify it for future use. While HTML and parsers are by default pretty forgiving, sticking to the spec is typically a best practice for future stability. Thoughts?

Joshua Morgan
  • 678
  • 6
  • 18
  • 1
    never seen comments break a page before - even with bem. What parser are you using? – Pete Jun 21 '19 at 14:51
  • It's actually a parser built into a minification library called nuglify (https://github.com/xoofx/NUglify). I was able to fix it, but I'm trying to figure out based on the spec whether this is a bug or a feature. – Joshua Morgan Jun 21 '19 at 15:09
  • maybe the answer is in => https://stackoverflow.com/a/26600218/584266 ? – anderssonola Jul 02 '19 at 19:31
  • I don't think that answer is correct, or at least it isn't strictly correct any more. According to this https://stackoverflow.com/a/16186093/567446 and the referenced links "HTML" parsing isn't based on something else now, but its own spec. – Joshua Morgan Jul 08 '19 at 15:49

1 Answers1

0

That's why original BEM naming scheme is different:

block-name__elem-name_mod-name_mod-val

  • Names are written in lowercase Latin letters.
  • Words are separated by a hyphen (-).
  • The block name defines the namespace for its elements and modifiers.
  • The element name is separated from the block name by a double underscore (__).
  • The modifier name is separated from the block or element name by a single underscore (_).
  • The modifier value is separated from the modifier name by a single underscore (_).
  • For boolean modifiers, the value is not included in the name.

See https://en.bem.info/methodology/naming-convention/ for more info.

tadatuta
  • 2,007
  • 11
  • 12