css怪异盒子_学习这个怪异？ 技巧调试CSS

css怪异盒子

by ZAYDEK

由ZAYDEK

设计师讨厌他！ ？ (Designers HATE him! ?)

学习这个怪异？ 技巧调试CSS (Learn This One Weird ? Trick To Debug CSS)

*不是点击诱饵* (*Not clickbait*)

Before I get to the article, I just want to share that I’m building a product, and I would love to collect some data about how to better serve web developers. I created a short questionnaire to check out before or after reading this article. Please check it out—thanks! And now, back to our regular scheduled programming.

在开始阅读本文之前，我只想分享我正在开发的产品，并且我希望收集一些有关如何更好地为Web开发人员提供服务的数据。 在阅读本文之前或之后，我创建了一个简短的问卷调查表以进行检查。 请检查出来-谢谢！ 现在，回到我们的常规计划编程。

Hi! ? I’m Zaydek! When I first set out to learn how to make websites, it was far more painful than anticipated. After all, I’m an experienced graphic designer and programmer — how could websites be that hard?

嗨！ ？ 我是Zaydek！ 当我第一次开始学习如何制作网站时，它比预期的要痛苦得多。 毕竟，我是一个有经验的平面设计师和程序员-怎么可能网站为t 的帽子硬？

In this article, I detail the decisions that led me to create a CSS debugger.

在本文中，我详细介绍了导致我创建CSS调试器的决策。

我还在Scrimba上教授了免费HTML / CSS课程，在该课程中，我教如何从头开始构建漂亮的博客。 点击这里报名！ ？ (I also taught a free HTML/CSS course on Scrimba where I teach how to build a beautiful blog from *scratch*. Click here to enroll! ?)

Scrimba.com是一个交互式前端平台，在该平台上，网站被记录为事件，而不是视频，并且可以被编辑！ ？ (Scrimba.com is an interactive front-end platform where websites are recorded as events — not videos — and can be edited! ?)

什么是调试器？ (What’s a debugger?)

There’s a great Donald Knuth quote about debugging. To paraphrase, it goes something like this.

关于调试，Donald Knuth引用了很多。 换句话说，它是这样的。

Someone: “What’s the best programming language?”

有人：“什么是最好的编程语言？”

Donald Knuth: “Which one has the best debugger?”

唐纳德·克努斯(Donald Knuth)：“哪个是最好的调试器？”

I didn’t come to appreciate this idea until CSS. Programming languages have this reasonableness about them, where logic exceeds opinion. But CSS is different because CSS “feels” opinionated.

直到CSS出现，我才开始欣赏这个想法。 编程语言对此具有合理性，因为逻辑超出了意见。 但是CSS是不同的，因为CSS感到“自以为是”。

So what can we do? Well, we can listen to the good advice of Donald Knuth and use a debugger!

所以，我们能做些什么？ 好吧，我们可以听听Donald Knuth的好建议并使用调试器！

Where a programming language is a tool, a debugger is tooling we can use to understand our tool — our code. Not all comp-sci folk like debuggers, and I understand this.

如果编程语言是一种工具，那么调试器就是一种工具，我们可以使用它来理解我们的工具-我们的代码。 并非所有comp-sci的人都喜欢调试器，我理解这一点。

Don’t make the computer do what we don’t understand. I think there’s merit in this, but what I’m talking about here is revealing structure where it was otherwise invisible.

不要让计算机做我们不了解的事情。 我认为这是有好处的，但是我在这里谈论的是揭示原本不可见的结构。

Take the following:

采取以下措施：

What can we do to see our website’s structure? Here are two solutions I’m aware of: we can make one-off CSS rules to emphasize an element, or we can use Chrome’s, Firefox’s, or Safari’s Debugger Tools. But that’s still more-or-less a one-off solution. What we need is a general solution.

我们该怎么做才能查看我们网站的结构？ 我知道以下两个解决方案：我们可以制定一次性CSS规则来强调元素，或者可以使用Chrome浏览器，Firefox或Safari的调试器工具。 但这还是一种一次性的解决方案。 我们需要的是一个通用的解决方案。

我们的调试器 (Our debugger)

Not long ago I was designing this header, and it wasn’t simple. The intent was to hover an image over multi-line text. Should be simple, right?

不久前，我正在设计此标头，这并不简单。 目的是将图像悬停在多行文本上。 应该简单吧？

Well CSS is the antagonist ? here. What would otherwise be simple in Photoshop can be a hero’s journey in CSS, and this led me to experimenting with outline:

那么CSS是反对者吗？ 这里。 在Photoshop中原本简单的事情可能是英雄使用CSS的旅程，这使我开始尝试utline:

* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }

Nothing too special—just soft-white lines. What we do have, however, is a rule that applies to all elements as long as we use an * and not the name of the id, class, or element.

没什么特别的-只是柔和的白色线条。 但是，只要我们使用*而不是id ， class或element的名称，我们所拥有的就是一条适用于所有元素的规则。

Yet the introduction of the * { … } was profound for me. I thought, “Where would I not want this?” So I added a few more lines and developed a more formal debugger:

但是，对我来说， * { … }的介绍意义深远。 我想：“我在哪里不想要这个？” 因此，我增加了几行，并开发了更正式的调试器：

* {    color:                    hsla(210, 100%, 100%, 0.9) !important;    background:               hsla(210, 100%,  50%, 0.5) !important;    outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;}

Much improved! Here we’ve created a schematic-like feel for our website. I was careful to not use solid colors, but instead chose soft-colors or colors with an alpha channel so that nested elements appear deeper in color, with bluer blues and whiter whites. I also added !important because of the infamous CSS Specificity Wars.

大有改善！ 在这里，我们为网站创建了类似示意图的感觉。 我小心不要使用纯色，而是选择柔和的颜色或带有Alpha通道的颜色，以使嵌套元素的颜色看起来更深， 蓝色更蓝 ， 白色更白。 由于臭名昭著CSS 特殊性战争，我还添加了!important 。

What can sometimes feel like CSS screwing with us is how and when the cascade applies. That is, “How is it that styles are sometimes applied and sometimes not?”

有时感觉就像CSS与我们纠缠在一起的是级联的应用方式和时间。 也就是说，“有时应用样式，有时不应用样式？”

This isn’t Schrodinger's CSS, it’s simple math. CSS uses a simple calculator to determine which rules are more specific, and the result determines whether or not CSS is applied.

这不是SchrodingerCSS，它是简单的数学运算。 CSS使用一个简单的计算器来确定哪些规则更具体，然后结果确定是否应用CSS。

The mother of all specificity is !important, which overrides all inline, IDs, classes, and element rules. It’s like the Death Star as compared to The Empire. Despite the fact that the use of !important is discouraged in general, it’s perfect for a debugger — because we won’t ship our website with it “turned on.” Instead, we use the debugger just in the design and development of our website.

特殊性之母是!important ，它会覆盖所有内联，ID，类和元素规则。 与《帝国》相比，它就像是死亡之星 。 尽管通常不建议使用!important ，但它对于调试器来说是完美的-因为我们不会在网站“打开”的情况下发货。 相反，我们仅在网站设计和开发中使用调试器。

The more I used the debugger, the more I realized that using *:not(path):noth(g) as the selector was preferred. This way, I wouldn’t get extraneous lines from vector graphics. I also noticed that disabling box-shadow was cleaner, as the debugger doesn’t need a sense of depth.

我使用调试器的次数越多，我越意识到使用*:not(path):noth(g)作为选择器是首选。 这样，我不会从矢量图形中得到多余的线条。 我还注意到禁用box-shadow更干净，因为调试器不需要深度感。

So, here’s the final debugger:

因此，这是最终的调试器：

*:not(path):not(g) {    color:                    hsla(210, 100%, 100%, 0.9) !important;    background:               hsla(210, 100%,  50%, 0.5) !important;    outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;

box-shadow: none !important;}

I think we humans hate what we don’t understand. And CSS is no exception. It’s mischaracterized because it’s misunderstood. I propose: think of CSS as a double-edged sword. It can be used to both construct and deconstruct websites. Yes, CSS is not Photoshop, but that doesn’t mean it can’t do things that Photoshop can’t. Creating our own debugger is one thing we can do.

我认为我们人类讨厌我们不了解的东西。 CSS也不例外。 它被误解了，因为它被误解了。 我建议： 将CSS视为一把双刃剑。 它可以用于构建和解构网站 。 是的，CSS不是Photoshop，但这并不意味着它无法完成Photoshop无法完成的工作。 创建我们自己的调试器是我们可以做的一件事。

如何使用此调试器？ (How to use this debugger ?)

1. Go to zaydek.github.io/debug.css

   转到zaydek.github.io/debug.css

2. Bookmark “Debug CSS” (source code here)

   收藏“ Debug CSS”( 此处为源代码 )

3. Click the bookmark to toggle it *on* and *off* ?
   单击书签以*打开*和*关闭*切换它？

不要忘了Scrimba上的免费HTML / CSS课程 ，我在那里教如何从头开始构建漂亮的博客。 点击这里报名！ ？ (Don’t forget the free HTML/CSS course on Scrimba where I teach how to build a beautiful blog from *scratch*. Click here to enroll! ?)

翻译自: https://www.freecodecamp.org/news/heres-my-favorite-weird-trick-to-debug-css-88529aa5a6a3/

css怪异盒子