Question

人们似乎更喜欢SMACSS这样的技术用于命名空间而不是实际css namespaces？

我用谷歌搜索了一下，但我一直无法想出任何好的资源。（这让我担心我的google-fu是废话（非常可能）或者css命名空间规范是无用的（不太可能））

Answer 1

它们涵盖完全不同的用例。

CSS名称空间用于将CSS应用于混合来自不同XML名称空间的元素的XML文档。例如这样您就可以毫不费力地定位<foo:p>和<bar:p>。

SMACSS涵盖了编写不会干扰页面其他部分的健壮CSS的技术。例如因此，地址簿HTML中的.title不会与您的出版物HTML列表中的.title混淆。

spec的详细信息：

注意：在HTML中，xmlns属性绝对没有效果。它基本上是一个护身符。只允许轻松地迁移到XHTML和从XHTML迁移。当由HTML解析器解析时，该属性最终没有命名空间，而不是像XML中的命名空间声明属性那样的“http://www.w3.org/2000/xmlns/”命名空间。

Answer 2

命名空间在CSS中有一个相当讨厌的语法，因为“：”命名空间字符必须由前导反斜杠转义，以区别于伪类：

html\:img {
  border: 2px solid black;
}
html\:a:visited html\:img {
  border-color: grey;
}

这在将HTML嵌入到XML文档中时非常有用。添加html命名空间时，HTML命名空间中的元素会正确显示，因为它们会出现在HTML中，允许访问CSS尚未提供的功能。

<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
  ...
  <restaurant>
    <name>Red Apple Inn</name>
    <logo>
      <HTML:A href="javascript:alert('Visit the Red Apple Inn!')">
        <HTML:IMG src="red-apple.gif" height="50" width="200"/>
      </HTML:A>
    </logo>
    ...

在HTML5环境中，我无法想到你需要它的任何情况。到目前为止，我在CSS中看到名称空间的唯一地方是Webkit的SVG或MathML的默认CSS，它们使用不同的语法：@namespace at-rule。

例如，这是来自WebKit/webkit/blob/master/Source/WebCore/css/mathml.css的代码：

@namespace "http://www.w3.org/1998/Math/MathML";

math {
    -webkit-line-box-contain: glyphs replaced;
    text-indent: 0;
    direction: ltr;
}
mtext {
    line-height: 1.0;
}

...

这是来自WebKit/webkit/blob/master/Source/WebCore/css/svg.css的代码：

@namespace "http://www.w3.org/2000/svg";
@namespace html "http://www.w3.org/1999/xhtml";

svg:not(:root), symbol, image, marker, pattern, foreignObject {
    overflow: hidden
}

svg:root {
    width: 100%;
    height: 100%
}

text, foreignObject {
    display: block
}

...

Answer 3

上班太麻烦了。解析 HTML 的浏览器将所有内容都粘贴到默认命名空间中，但某些标记名称除外（例如：svg）。也就是说你可以在一个特殊的命名空间中创建一个元素：

<html>
<head>
  <style>
    @namespace foo "http://foo";
    foo|div { color: red; }
  </style>
</head>
<body>
    <div>I'm an HTMLDIVElement</div>
</body>
<script>
  const div = document.createElementNS('http://foo', 'div');
  div.textContent = 'I am namespaced.';
  document.body.appendChild(div);
</script>
</html>

据我所知，HTML 解析器无法为您选择另一个命名空间。浏览器的 HTML 解析器创建的任何元素都是在默认命名空间中创建的。此外，一旦您转义 HTML 命名空间，它们就不再是 HTMLElement 元素。您不能只使用 button 的标记名并期望它是具有所有样式、交互和属性的 HTMLButtonElement。这也意味着没有 .innerText、.dir、.offsetTop 等 HTML 属性。最大的属性是没有 .style。这也意味着设置 style 属性没有任何作用。您必须在 CSS 文件中指定所有样式。

这真的意味着这仅适用于非常有限的 XML 上下文，并不适用于一般的 HTML 内容。可能有一种方法可以让您的组件实现 HTMLElement，但我还没有找到（也许是 Web 组件？）。尽管如此，这意味着您的所有元素都必须使用 document.createElementNS 构建，这可能比寻找另一种方法来定义 CSS 组件的范围要多得多。

有人真的使用css命名空间吗？

3 个答案: