31

人们似乎更喜欢诸如SMACSS 之类的命名空间技术，而不是实际的css 命名空间的原因是什么？

我已经用谷歌搜索了一下，但我一直无法找到任何好的资源。（这让我担心我的 google-fu 是垃圾（很可能）或者 css 命名空间规范没用（不太可能））

4

3 回答 3

28

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

CSS 命名空间用于将 CSS 应用于混合来自不同 XML 命名空间的元素的 XML 文档。例如，这样您就可以定位<foo:p>而<bar:p>不会混淆。

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

规范中的更多详细信息：

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

于 2012-05-22T13:46:26.213 回答
5

命名空间在 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，它们使用不同的语法：@namespaceat-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
}

...
于 2015-07-30T11:07:24.307 回答
0

上班太麻烦了。解析 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元素。您不能只使用 of 的标记名button并期望它HTMLButtonElement具有所有样式、交互和属性。这也意味着没有 HTML 属性，如.innerText, .dir,.offsetTop等。最大的属性是 no .style。这也意味着设置style属性什么都不做。您必须在 CSS 文件中指定所有样式。

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

于 2021-01-23T19:41:21.370 回答