代码挑战＃2：4 CSSBATTATTER.DEV中更高分数的技巧

CSSBattle.dev：提升CSS技能的绝佳挑战

核心要点

• CSSBattle.dev 的挑战是提升 CSS 技能的绝佳途径；优先使用免费的“内置元素”，记住空输出面板并非真正为空，它包含两个不可见的元素——HTML 和 BODY 元素。
• 为了在 CSSBattle 中节省字符，请仔细选择度量单位，充分利用 CSS 的“继承”和“特异性”，记住现代浏览器会对简短且略有不规范的代码表示友好。
• 参加 CSSBattle.dev 的目的并非鼓励不良的编码习惯，而是测试、实验并最终比编写正常的、健壮的生产代码更深入地理解 CSS。

一周多前，您可能已经看到我们推出了第二个代码挑战——与我们在 CSSBattle.dev 的朋友合作。CSS 战斗是一个相对较新的概念——该网站于 4 月推出——其工作原理并不总是显而易见的。

CSSbattle中的默认输出和编辑器面板。

简单来说：

• 您的目标是仅使用 HTML 和 CSS 创建“目标”图像的副本。
• 您不能使用外部图像。
• 您不能使用 SVG（即使是内联 SVG）或特殊字符。
• 所有解决方案都会根据准确性和效率（字符数）自动评分。
• 以最高分重现目标图像的玩家获胜。

我必须承认，当我第一次看到这个想法时，我有点难以置信。究竟谁能用少于“推文长度”的 HTML 和 CSS 创建那些设计？这肯定不可能吧？

所以我尝试了一下，大部分都失败了——但我也有所收获，并逐渐开始理解一些需要的技巧。如果您好奇，我想我会介绍 4 个技巧来帮助您获得更高的分数。

让我明确一点：当我撰写这篇文章时，我的排名在这个战斗回合中排名第 24 位。我已经完成了迄今为止的所有目标，并且总体排名第 26 位，因此肯定至少有二三十名玩家的解决方案比我好得多。但是，我很乐意分享我的知识——并接受任何有更好想法的人的建议。

技巧 #1：空输出面板永远不是真正的空

第一次加载任何目标时，您会看到类似上图的内容。您的编辑器始终预先填充了示例 HTML 和 CSS，提供了一个基本的起始位置。但是，即使您删除编辑器中的每个字符，您的输出面板在技术上也不会为空。

为什么？如果您检查输出面板的源代码（提示：现在先关闭“滑动和比较”功能），您会发现一个包含两个不可见元素的

如下面的图像所示，您可以看到它们存在于一行 CSS 中。当然，您可以随意设置这两个 HTML 元素的样式，而无需花费任何字符来创建它们。

总是有一个HTML和一个BODY元素可以设置样式。

这并不意味着您永远不会添加自己的 HTML 元素——

、、等——但始终尝试优先使用免费的“内置元素”。

技巧 #2：仔细选择度量单位

CSSBattle 目标始终为 400px 宽，300px 高，因此您可以正确地将中心点描述为 left:200px（10 个字符）和 top:150px（9 个字符）。但是，您可以同样轻松地将该确切位置描述为 left:50%（8 个字符）和 top:50%（7 个字符）。这是一个方便的 4 个字符的节省。

但是，百分比并不总是胜出。位置 top:100px（9 个字符）转换为 top:33.33%（10 个字符）——倒退一步。找到最佳匹配需要大量的反复试验。潜在有用的测量单位包括：

• 像素：px
• 百分比：%
• Rems：rem
• Ems：em
• 英寸：in
• 毫米：mm
• 磅：pc
• 点：pt
• 视口高度单位：vh
• 视口宽度单位：vw
• 四分之一毫米：q

最后一个单位类型——“q”——是一个相对鲜为人知的单位。但因为它是一个字符——我发现它在 CSS 战斗中非常有用。我发现 50px 转换为 53 q。

另请注意，如果您没有显式声明单位类型，则某些 CSS 属性会假定您指的是像素。换句话说，width:80 与 width:80px 相同。高度和边距也是如此。另一方面，如果您不声明度量单位，则 box-shadow 会完全失败。

技巧 #3：CSS 是级联的——充分利用它

CSS 非常擅长“继承”和“特异性”。继承允许子元素从其父元素获取其样式。“特异性”意味着广泛的规则会被更仔细或最近声明的规则覆盖。

在 CSS 中，最广泛的规则是 * 通配符，这意味着“应用于所有元素”。因此，以下规则将 #222 背景应用于所有内容。如果我们不添加任何额外的 HTML，这就是 和

。

<code>*{background:#222}</code>

如果我们随后添加一个更具体的规则来仅定位

，我们只需设置 的样式，而无需直接命名它——节省了 3 个字符。

<code>*{background:#222}
body{background:#F2994A}</code>

让我们更进一步。

在 CSS 中，“>”运算符表示“仅当 X 是 Y 的父级时”（即 x>y{}）。因此，如果我们编写：

<code>*{background:#222}</code>

……我们说的是“仅将此规则应用于任何位于任何其他元素内的元素”——换句话说，任何子元素。由于 元素永远不是子元素，只有

获取第二个规则。我们又节省了一个字符。

<code>*{background:#222}
body{background:#F2994A}</code>

技巧 #4：浏览器很强大。让它们工作

一旦您获得了所有唾手可得的成果，就到了唯一切实可行的削减字符的方法是删除在技术上是必需的但对最终渲染绝对不重要的代码。您可能会说，现代浏览器会对简短且略有不规范的代码表示友好。这包括但不限于：

• 删除结束
• 删除结束 HTML 标记（即

）

删除样式块的最终结束 }

删除大多数空格和回车符。这里反复试验是您的朋友。

当然，在生产 CSS 中采用这种极端的优化是没有意义的。您会为了微不足道的节省而损害代码的可靠性。但是 CSSBattles 会教您更多关于浏览器如何思考以及它们喜欢和不喜欢什么的知识。

那么，CSSBattle 是否鼓励不良的编码习惯？

我听到一些人提到这是一个潜在的缺点。事实上，CSS 元老 Eric Meyer 最近在 CSSBattle.dev Spectrum 反馈中提出了这个问题：

对利用解析器瑕疵（特别是关于分隔空格）以获得较低分数的依赖是故意的，还是一种副作用？ –Eric Meyer

我认为不是。对我来说，这是一种测试、实验并最终比编写正常的、健壮的生产代码更深入地理解 CSS 的方法。

您可以将它与日本俳句诗歌进行很好的比较。俳句是一种建立在严格限制之上的格式——3 行和 17 个音节的任意限制。

即使是世界上最伟大的俳句大师也不指望每天都用精心构建的俳句来说话或写作。但是，这并不意味着当我们阅读（或写作）俳句时，我们不能从词语选择、节奏、平衡和美感中吸取重要的教训。

编写好的“CSS Battles 代码”与编写好的“生产代码”并不相同——但它将教会您在其他地方学不到的课程。

关于 CSSBattle Dev 的常见问题解答 (FAQ)

什么是 CSSBattle Dev，它是如何工作的？

CSSBattle Dev 是一个在线平台，开发人员可以在其中相互竞争进行 CSS 编码挑战。该平台提供一个目标图像，您的任务是使用 HTML 和 CSS 复制它。您的输出越接近目标图像，您的分数就越高。该平台使用独特的评分系统，该系统考虑了输出的准确性和代码的长度。代码越短越准确，分数越高。

如何提高我在 CSSBattle Dev 中的分数？

提高您在 CSSBattle Dev 中的分数需要结合准确性和简洁性。您的输出需要尽可能接近目标图像，并且您的代码需要尽可能短。您可以通过掌握 CSS 属性和值、了解不同的 CSS 属性如何相互交互以及学习如何编写简洁高效的代码来实现这一点。

掌握 CSSBattle Dev 的一些技巧是什么？

掌握 CSSBattle Dev 需要实践和对 CSS 的深入了解。以下是一些技巧：

1. 了解盒子模型：CSS 盒子模型是布局设计的基石。了解填充、边框和边距的工作原理至关重要。
2. 掌握定位：了解不同的定位值（静态、相对、绝对、固定）如何影响元素的位置可以帮助您准确地放置元素。
3. 学习使用简写属性：简写属性允许您在一行中指定多个属性，从而帮助您编写更短、更简洁的代码。

我如何学习更多关于 CSS 属性和值的知识？

网上有很多资源可以学习 CSS 属性和值。MDN Web Docs、CSS-Tricks 和 W3Schools 等网站提供关于 CSS 的全面指南和教程。此外，在 CSSBattle Dev 等平台上练习可以帮助您了解不同的属性和值如何在实际场景中工作。

如果我是 CSS 新手，我可以参加 CSSBattle Dev 吗？

当然！CSSBattle Dev 是初学者学习和练习 CSS 的绝佳平台。挑战的难度从简单到困难不等，因此您可以从简单的挑战开始，随着技能的提高逐渐转向更复杂的挑战。

CSSBattle Dev 的评分系统是如何工作的？

CSSBattle Dev 的评分系统基于两个因素：准确性和代码长度。该平台将您的输出与目标图像进行比较，并根据它们匹配的程度计算分数。它还考虑了代码的长度——代码越短，分数越高。

我可以在 CSSBattle Dev 中查看其他参与者的解决方案吗？

是的，提交自己的解决方案后，您可以查看其他参与者的解决方案。这是一种学习解决相同挑战的不同方法的好方法，可以帮助您提高自己的编码技能。

在 CSSBattle Dev 中应避免的一些常见错误是什么？

在 CSSBattle Dev 中应避免的一些常见错误包括：不完全理解 CSS 盒子模型、不使用简写属性以及不优化代码以使其简洁。彻底测试您的代码以确保它能够准确地复制目标图像也很重要。

我可以使用 CSSBattle Dev 来准备求职面试吗？

是的，CSSBattle Dev 是准备求职面试的有用工具。它可以帮助您提高解决问题的能力、学习编写高效的代码以及更深入地了解 CSS。但是，请记住，求职面试还可能涵盖 Web 开发的其他方面，因此它不应成为您唯一的准备工具。

我如何在通过 CSSBattle Dev 学习 CSS 的过程中保持动力？

通过 CSSBattle Dev 学习 CSS 可能具有挑战性，但也可能非常有趣。该平台的竞争性方面可以激励您提高技能。您还可以设定个人目标，例如达到一定的分数或完成一定数量的挑战，以保持动力。记住，掌握 CSS（或任何技能）的关键是坚持练习和耐心。

以上是代码挑战＃2：4 CSSBATTATTER.DEV中更高分数的技巧的详细内容。更多信息请关注PHP中文网其他相关文章！