Подтвердить что ты не робот

Кто-нибудь действительно использует пространства имен css?

Каковы причины, по которым люди предпочитают такие методы, как SMACSS для размещения имен, над фактическим css namespaces?

Я немного искал это, но я не смог найти какие-либо хорошие ресурсы. (Это заставляет меня волноваться, что либо мой google-fu - это дерьмо (очень вероятно), либо спецификация пространства имен css бесполезна (менее вероятно))

Ответ 1

Они охватывают совершенно разные варианты использования.

Пространства имен CSS предназначены для применения документов CSS к XML, которые смешивают элементы из разных пространств имен XML. например поэтому вы можете нацеливать <foo:p> и <bar:p> без путаницы.

SMACSS охватывает методы написания надежного CSS, который не мешает другим частям страницы. например так что .title в вашей адресной книге HTML не путается с .title в вашем списке публикаций HTML.

Подробнее о spec:

Примечание. В HTML атрибут xmlns абсолютно не влияет. Это в основном талисман. Это позволяет просто облегчить миграцию в XHTML и обратно. При анализе парсером HTML атрибут не имеет пространства имен, а не " http://www.w3.org/2000/xmlns/" пространство имен, такое как атрибуты объявления пространства имен в XML.

Ответ 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 до сих пор, - это CSS по умолчанию для Webkit для SVG или MathML, и они используют другой синтаксис: @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
}

...