html - Html 注释中的双连字符

标签 html css bem

关于“--”在 HTML 注释中是否仍然无效,我看到了相互矛盾的文档和意见。我在这方面看到的大多数文档都已有 5-10 年或更长时间了。使用 BEM 考虑以下 HTML 中的简化代码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>

我正在考虑使用一个解析器来读取它并自动关闭我的 header 以生成此结果输出。查看代码,它将注释类中的“--”标识为注释的结束,注释的结束 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 和解析器默认情况下相当宽容,但坚持规范通常是 future 稳定性的最佳实践。想法?

最佳答案

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

block-name__elem-name_mod-name_mod-val

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

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

关于html - Html 注释中的双连字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56705555/

相关文章:

javascript - Electron :复选框未更改值?

javascript - 语义 UI 将初始化为下拉菜单的选择恢复为常规 HTML 选择菜单

css - 在 CSS 网格中创建隐式行

html - 不显示导航栏元素

css - BEM 通用样式

html - 使用 BEM CSS 制作 slider

html - 在 Asp.Net 元素中为 google chrome 引用 .css 和 .js 文件

html - CSS3 : show border on focus to the both textbox

html - CSS url() 的 <base> 标签

html - td标签中的单词