【问题标题】:Double Hyphens in Html CommentHtml 注释中的双连字符
【发布时间】:2019-11-04 10:18:58
【问题描述】:

我看到关于“--”在 HTML 注释中是否仍然无效的文档和意见相互矛盾。我在这方面看到的大多数文档都是 5-10 年或更长时间。考虑以下 HTML 中的简化代码,使用 BEM 语法作为 CSS 类名。

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

我正在考虑使用一个解析器来读取这个并自动关闭我的标题以产生这个结果输出。查看代码,它将注释类中的“--”标识为注释的关闭,注释的关闭 div 标记被消耗,然后它确定该级别要求关闭标题。

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

虽然留下注释代码并不是最好的,但这在典型的开发周期中是完全正常的事情。在我们的例子中,这个输出会导致这个页面的渲染非常糟糕。

这个输出显然不正确,但我想了解什么应该是正确的。根据this 和其他帖子的说法,“--”或双连字符不应在 HTML 中使用,因为它在 XML 中是不允许的。确实是HTML4 spec discourages this,但它似乎是HTML5 doesn't make this same distinction。我一直理解XML logic and parsing really shouldn't be used for HTML because it isn't actually a subset of xml。事实上,当我走上那条路时,我从来没有快乐过????。

这里的影响是 BEM 是一种通用约定,如果当前的 HTML 规范禁止这样做,我们可能希望避免使用 BEM 或对其进行修改以供将来使用。虽然 HTML 和解析器默认情况下非常宽容,但坚持规范通常是未来稳定性的最佳实践。想法?

【问题讨论】:

  • 以前从未见过 cmets 打破页面 - 即使使用 bem。你用的是什么解析器?
  • 它实际上是一个内置在名为 nuglify (github.com/xoofx/NUglify) 的缩小库中的解析器。我能够修复它,但我试图根据规范确定这是错误还是功能。
  • 我认为这个答案不正确,或者至少不再严格正确。根据这个stackoverflow.com/a/16186093/567446 和引用的链接“HTML”解析现在不是基于其他东西,而是它自己的规范。

标签: html css bem


【解决方案1】:

这就是原始 BEM 命名方案不同的原因:

block-name__elem-name_mod-name_mod-val

  • 名称以小写拉丁字母书写。
  • 单词用连字符 (-) 分隔。
  • 块名称为其元素和修饰符定义namespace
  • 元素名称与块名称之间用双下划线 (__) 分隔。
  • 修饰符名称与块或元素名称之间用一个下划线 (_) 分隔。
  • 修饰符值与修饰符名称之间用一个下划线 (_) 分隔。
  • 对于布尔修饰符,名称中不包含该值。

请参阅https://en.bem.info/methodology/naming-convention/ 了解更多信息。

【讨论】:

  • 这是有道理的,但我是否误读了不允许使用双连字符的 HTML5 规范?
猜你喜欢
  • 2014-12-23
  • 2015-03-23
  • 1970-01-01
  • 2011-02-04
  • 2013-02-18
  • 2015-06-08
  • 2019-11-13
  • 1970-01-01
  • 2018-01-01
相关资源
最近更新 更多