css - 我从未见过的 css 编码答案

【问题标题】：css - css coding that I have never seencss - 我从未见过的 css 编码
【发布时间】：2017-02-01 10:55:48
【问题描述】：

我正在研究一个名为 zerofour 的免费 css 模板，该模板位于 http://html5up.net/zerofour/，并且正在运行我以前从未见过的 css 编码。在 HTML 中，一些 div 具有诸如“4u”之类的类，但是当我检查 css 文件时，这是唯一包含这些术语的文本部分，它看起来像这样：

/* Grid */

/* Cells */

    .\31 2u { width: 100% }
    .\31 1u { width: 91.6666666667% }
    .\31 0u { width: 83.3333333333% }
    .\39 u { width: 75% }
    .\38 u { width: 66.6666666667% }
    .\37 u { width: 58.3333333333% }
    .\36 u { width: 50% }
    .\35 u { width: 41.6666666667% }
    .\34 u { width: 33.3333333333% }
    .\33 u { width: 25% }
    .\32 u { width: 16.6666666667% }
    .\31 u { width: 8.3333333333% }
    .\-11u { margin-left: 91.6666666667% }
    .\-10u { margin-left: 83.3333333333% }
    .\-9u { margin-left: 75% }
    .\-8u { margin-left: 66.6666666667% }
    .\-7u { margin-left: 58.3333333333% }
    .\-6u { margin-left: 50% }
    .\-5u { margin-left: 41.6666666667% }
    .\-4u { margin-left: 33.3333333333% }
    .\-3u { margin-left: 25% }
    .\-2u { margin-left: 16.6666666667% }
    .\-1u { margin-left: 8.3333333333% }

当我使用 chrome developer 删除 4u 类时，页面会受到影响。但是，当我从 css 文件中删除此部分时，什么也没有发生。我对此感到很困惑，真的很烦我！

【问题讨论】：

检查类是否存在于任何脚本文件中
这看起来是生成的。
就是这样！我发现类 js/skel.min.js 我不知道可以从 javascript 中获取类。看起来像往常一样要学习更多的东西。谢谢！

标签： css

【解决方案1】：

阅读此规范：http://www.w3.org/International/questions/qa-escapes#cssescapes。反斜杠后面的字符代表一个 unicode 代码点。如果允许下一个字符作为十六进制值的一部分，则需要空格。

【讨论】：

【解决方案2】：

它看起来类似于 Foundation。我也是 Html5up 的新手，但这是我的猜测。它通常如何工作（至少在 Foundation 中）你有一个“行”，它是页面的整个宽度（通常）。在该行中，您有列（或出于某种原因，此处为“u”），每列占用相同的宽度百分比。通常 Foundation 的标准是 12 列/行，我猜这里也一样。所以基本上如果你希望一行的前 50% 是一个巨大的 div，然后是两个 div 来分割剩余的 50%，它看起来像：

<div class="row">
  <div class="6u">
    Big Div Here.
  </div>

  <div class="3u">
    Small Div Here.
  </div>

  <div class="3u">
    Small Div here (same size as the other small div)>
  </div>
</div>  (This ends the row).

所有这些疯狂的原因在于它使您的页面响应更容易（这是 Foundation 和 HTML5Up 的要点之一）。

查看 Foundation 的 Dev Docs 以获得更深入的解释和其他示例（尽管不一定是 Foundation）- Here

【讨论】：

【解决方案3】：

这是我第一次看到这样的类名，我想知道它的含义。 W3C 页面说：

在 CSS 2.1 中，反斜杠 (\) 字符可以表示三种类型之一字符转义。在 CSS 注释中，反斜杠代表本身，并且如果反斜杠后面紧跟样式表，它也代表它自己（即，一个 DELIM 标记）。第一的，在字符串中，后跟换行符的反斜杠被忽略（即，该字符串被认为不包含反斜杠或新队）。在字符串之外，反斜杠后跟换行符代表为自己（即，一个 DELIM 后跟一个换行符）。

第二，它取消了特殊CSS字符的含义。任何字符（十六进制数字、换行符、回车符或换页）可以用反斜杠转义以删除其特殊的意义。例如，"\"" 是一个由一个双引号组成的字符串。样式表预处理器不得从样式表，因为那会改变样式表的含义。

第三，反斜杠转义允许作者引用他们所使用的字符不能轻易放入文件中。在这种情况下，反斜杠是后跟最多六个十六进制数字 (0..9A..F)，代表具有该编号的 ISO 10646 ([ISO10646]) 字符，不能为零。（在 CSS 2.1 中未定义如果样式表会发生什么确实包含一个 Unicode 代码点为零的字符。）如果一个字符在[0-9a-fA-F] 范围内跟随十六进制数，结束这个数字需要说清楚。有两种方法可以做到这一点：带空格（或其他空白字符）：\26 B (&B) [...]

注意：反斜杠转义总是被认为是标识符或字符串（即 \7B 不是标点符号，即使 { 是，并且 \32 允许在类名的开头，即使 2 不是）。 标识符 te\st 与标识符完全相同 test.

据我了解，这里的\3+number+space 部分是用来只能用数字作为类名的。

【讨论】：

正如引用的文字所说，例如\31 指代号为 31 的十六进制 Unicode 字符，即数字“1”。没有单独的\3 部分（但数字恰好具有从 30 到 39 的代码编号）。符号\- 指的是连字符“-”字符，在这种情况下需要转义；见stackoverflow.com/questions/2812072/…
@JukkaK.Korpela 感谢您的澄清，Jukka，我已经编辑了我的答案以改写。

【解决方案4】：

html5up.net 使用一个名为 skel 的框架来使布局具有响应性。

如果您的问题是“我如何理解这些类”而不是“这些转义序列是如何工作的”，那么您要查找的参考资料位于 https://github.com/n33/skel/blob/master/docs/skel-layout.md#usage-1。

【讨论】：

【解决方案5】：

我认为这种类型的 css 用于移动兼容性。

【讨论】：

这些是用于创建基于网格的布局的辅助类，现在被广泛使用。它们可以提供很多帮助，并且可以在桌面和移动设备上使用。