将内联样式作为类（搞笑） | CSS-Tricks

如果您厌恶使用内联样式，只需将该 style 移动到 class 属性！然后确保您的 CSS 已就位，您知道，它会按照预期工作。

我彻底革新了 CSS。 pic.twitter.com/1AWCldyCwP
— sam "zerowidthspace" thor (@samthor) 2021年6月10日

好的，让我深入研究一下，彻底破坏这个玩笑。

首先，这是一个玩笑，所以不要真的这样做。我甚至不介意偶尔为一次性内容使用内联样式，但这并非如此。
对我来说，最奇怪的部分是那个句点 (.) 字符。使用反斜杠 () 转义更不常见的字符感觉很正常，但这个句点是怎么回事？**更新**：这是因为空格。HTML 中有两个类，而不是一个。笨蛋。
当后面的字符是数字时（例如 .padding:.1rem;），那点小技巧不起作用。**更新**：因为以数字开头的类无效。笨蛋。
如果您使用属性选择器（如 [class*="display: flex;"]），可以避免转义和技巧。
这让我想起了 Mathias Bynens 的研究：CSS 字符转义序列。但是……这似乎不再起作用了？我想知道是浏览器发生了变化，还是工具坏了，不再输出它应该输出的内容（例如，.color\3A \ #f06d06 看起来是否正确？）。

以下是所有这些尝试

Jan Boddez

# 2021年6月16日

句点在那里是因为应用了两个类，用空格分隔：display: 和 flex;。

这与（在 CSS 中）类似的东西没有什么不同，例如 .post.has-thumbnail { display: block; }。

Chris Coyier

评论永久链接# 2021年6月16日

是的！哎呀。真是个脑筋急转弯。谢谢。

Adam

# 2021年6月16日

关于句点字符，class 属性是一个用空格分隔的列表，因此元素有两个类名：display: 和 flex;。

这也解释了数字问题：1rem 以数字开头，因此它不是有效的类名。

Kyrodes

# 2021年6月16日

好吧，人们使用像 .align-left 和 .bg-red 这样的类。这并没有糟糕多少。

# 2021年6月16日

这可不就是原子化。

Mathias Bynens

# 2021年6月17日

感谢您提及我的旧研究和工具 :) 为了回答您的问题，该工具仍然准确。

您在演示中使用的标记是

<div class="color: #bada55;">

这是使用演示中的输入的工具的直接链接：https://mothereff.in/css-escapes#0color%3A%20%23bada55%3B 它显示了一个红色的警告，提示“不允许使用空格！”，因为它被构建为一次转义一个标识符。但是该示例使用了两个类名而不是一个！

类似于 <div class="foo bar"> 应用两个不同的类名 foo 和 bar，<div class="color: #bada55;"> 应用两个不同的类名 color: 和 #bada55;。

您可以使用该工具分别转义它们。color: 变成 color\3A（它也可以是 color\:，因为现在不再需要考虑 IE < 8 的支持）而 #bada55; 变成 \#bada55\;。

要修补演示，有一些选项

使用 id="…" 而不是 class="…"（因为只有 class 可以用空格分隔）。但这将意味着 HTML 无效，因为 ID 不能包含空格，但至少样式会起作用。
根据两个类名进行选择：.color\3a.#bada55\;
删除空格，以便仅应用一个类名。

Chris Coyier

评论永久链接# 2021年6月17日

LOL @ 非常红色的 不允许使用空格！

这就解释了！

在其他转义选择器中，我也犯了同样的错误。

Archontt

# 2021年6月17日

我把它理解为对所有试图使 CSS 库/框架更简单/更容易/更好使用的“革命性”CSS 库/框架的讽刺性取笑（如 tachyons、所有奇怪的 css-in-js 库等）。

某人

评论永久链接# 2021年6月18日

这基本上就是 TailwindCSS。

Kellen Green

# 2021年6月17日

即将在您附近的 CSS 框架中推出！

<div display="flex">

[display="flex"] {
  display: flex;
}

Raphael

评论永久链接# 2021年6月21日

看，这实际上是有道理的！文章中所做的事情似乎完全没有意义，因为在 HTML 文档中投入了同样多的工作，并且产生了与使用 style 属性一样多的混乱（加上 CSS 文档中的额外工作，如果您不真正理解 CSS，它也很难阅读）。我当时在想“如果您不想键入所有这些内容，只需分配一个具有正常名称的类！如果您想键入所有内容，使用 style 有什么坏处？”但是，如果评论中的内容确实可用，那实际上是理想的。如果只需要设置一个属性，因此类不值得，但您不喜欢 style 属性（我自己也不喜欢），能够直接设置该属性将非常棒！

Mike

# 2021年6月17日

您听说过 Tailwind CSS 吗？

NoxArt

评论永久链接# 2021年6月20日

没错，这基本上是人们现在编写酷炫 CSS 的方式

Egir Ogurtsiv

# 2021年6月17日

我要报警了！

Daan Pazsoto

评论永久链接# 2021年6月23日

加油

Alec

# 2021年6月17日

我太喜欢这个了，我计划在我的所有项目中都使用它。但是我越来越沮丧，因为必须手动编写 CSS。

这是一个很棒的 JS 函数，它将为您动态创建样式表。只需按照指示编写您的 HTML，然后将其添加到页面底部。

<script>
    const styles = new Set();

    document.querySelectorAll('*').forEach((el) => {
        el.className
            .toString()
            .split(';')
            .map((style) => style.trim())
            .filter(style => !!style)
            .forEach(style => styles.add(`[class*="${style}"] { ${style} }`))
    });

    const style = document.createElement('style');
    style.innerHTML = [...styles].join("\n");
    document.getElementsByTagName('head')[0].appendChild(style);
</script>

Nikunj Bhatt

评论永久链接# 2021年6月20日

现在我开始使用转义了。

.width-100\% { width: 100%; }
.width-50\% { width: 50%; }

全宽 Div

半宽 Div

我现在也会考虑使用 Kellen Green 的技巧。

Valtteri Laitinen

# 2021年6月17日

本身，以数字开头的类是完全有效的。只是类选择器不能以数字开头。您必须通过在数字前添加 \3 来转义它，因此选择器应该是 .padding\:.\31rem\;。

Marcel

# 2021年6月17日

看看 TailwindCSS，避免让自己陷入实验的黑洞 :)

Frankie Pagan

# 2021年6月17日

这种类型的 CSS 实际上有一些好处。原子 CSS 或实用程序 CSS 越来越受欢迎……但学习曲线也比较陡峭。并且随着您不断使用实用程序类，您会失去对 CSS 的掌握。CoCreateCSS 会动态自动生成 CSS，没有学习曲线。只需应用您的 class="display:flex flex-wrap:wrap ..." 或任何其他类，它就会自动生成它。仅 11.2kb，不像 tailwinds 的 1mb 以上……它还在开发中，因此请原谅任何指向文档和演示的损坏链接。

https://ws.cocreate.app/docs/utility
https://github.com/CoCreate-app/CoCreateCSS

Lunarmare

评论永久链接# 2021年6月22日

如果您正确使用 tailwind，1mb 会迅速缩小。Tailwinds 的构建步骤会修剪未使用的类（如您所想，有很多……）

悖论

# 2021年6月17日

我既惊叹又害怕。

Tino Zijdel

# 2021年6月18日

是的，终极实用程序类系统！Tailwind，吃掉它！

Binyamin

# 2021年6月20日

CSS 和 HTML 是关于语义的。
在类名中提及颜色和大小，说明您“取得了”什么成就，因为一两天后您可能需要将其更改为不同的颜色和大小……

Dalibor Sojic

# 2021年6月23日

不。错误的方法。HTML 标记不应该处理样式。

Michael Soriano

# 2021年6月24日

他们不是已经在使用 TailWindCSS 做类似的事情了吗？Tailwind 只是拥有更好的类名 LOL。

评论

发表评论 取消回复

发表评论取消回复