阶级斗争的作用

by Den McHenry

丹·麦克亨利(Den McHenry)

21世纪的阶级斗争 (Class Struggle in the 21st Century)

Not that kind of class struggle. I’m talking CSS classes, which — Whoa! What was that?! Wait a minute. Important message incoming.

不是那种阶级斗争。 我在说CSS类，哇！ 那是什么？！ 等一下。 重要消息传入。

You need a second level heading, text in red, in 60 seconds or this bus will explode. What do you do, hotshot? WHAT DO YOU DO?

您需要60秒内第二个标题，红色文本，否则此总线会爆炸。 你是做什么工作的热门人物？ 你是做什么？

Welp, it’s go time! So, if you’ve followed a Web tutorial or a popular framework I guess you go ahead and create a class called .red-text. And … done.

快点，该走了！ 因此，如果您遵循了Web教程或流行的框架，我想您应该继续创建一个名为.red-text的类。 并做了。

Boy, that was fast. Why does Keanu make it look like so much work?

男孩，那太快了。 为什么基努使它看起来像这么多工作？

It’s such a great idea, too, because anyone looking at the HTML knows what the visual style will be! Because those are two layers we definitely don’t want to separate. We have a style sheet for some other reason, I think.

这也是一个好主意，因为任何查看HTML的人都知道视觉样式是什么！ 因为那是两层，所以我们绝对不想分开。 我认为，出于其他原因，我们有一个样式表。

Well, as the project grows and the site ages the memos keep coming in that more and more bits of text need to be red. Maybe everyone is convinced users won’t notice the really important stuff (i.e., the stuff they own) without it. And so you throw that class everywhere like tinsel on a bare Christmas tree.

好吧，随着项目的发展和网站的老化，备忘录不断出现，越来越多的文本需要变成红色。 也许所有人都相信，没有它，用户将不会注意到真正重要的东西(即他们拥有的东西)。 这样一来，您就像把金属丝放在一棵光秃秃的圣诞树上一样随处可见。

<p class=“red-text”>, <span class=“red-text”>, <div class=“red-text”>, <li class=“red-text”>, und so weiter.

<p class =“ red-text”>，<span class =“ red-text”>，<div clas s =“ red-text”>，<li class =“ red-t ext”>，等等。

So easy. So efficient. But you know what, Peter? We’re going to have to go ahead and ask you to change all of the red text to blue text. Yeah … we’re rebranding and market research says the kids feel really safe with blue, so … ‘k. Thanks!

太简单。 如此高效。 但是你知道吗，彼得？ 我们将不得不继续，要求您将所有红色文本更改为蓝色文本。 是的...我们正在重新命名，市场研究表明，孩子们穿蓝色衣服真的很安全，所以...'k。 谢谢！

No problem.

没问题。

.red-text {

.red-text {

color: blue;

颜色：蓝色；

Oh. Hm. Well, let’s change .red-text to .blue-text. Wait — all of the text is blue now, but says it’s red. Oh, snap! I have to go into every document on the site and change the class assignment “red-text” to “blue-text”. But I’m clever. I’m computer savvy. I can do a quick search and replace and fix all … whoa … 9,347 instances of ‘red’. Well, here goes … and … BOOM!

哦。 嗯 好吧，让我们改变.red，文字 的.blue文本 。 等等-现在所有的文本都是蓝色的，但是说是红色的。 哦，快点！ 我必须进入站点上的每个文档，然后将类分配“红色文本”更改为“蓝色文本” 。 但是我很聪明。 我精通计算机。 我可以快速搜索并替换和修复所有………9,347个“红色”实例。 好吧，这里…………轰！

Now we’re talking. The text is blue all over the place. The site makes me feel safe and cozy. They were right about that market research. People can still view source and see that, yep, the blue text sure is labeled “blue-text”. All is right with the world.

现在我们在谈论。 整个地方的文字都是蓝色的。 该网站使我感到安全和舒适。 他们对那个市场研究是正确的。 人们仍然可以查看源代码，并且可以看到蓝色文本确实标记为“ blue-text” 。 世界是对的。

But suddenly you hear hurried footsteps across the floor, and the boss is back.

但是突然间，您听到匆忙的脚步声穿过地板，老板回来了。

Peter, Stephanie Redner’s assistant just called in from the home office. They want to know why the site says “Stephanie Bluener (pictublue here) usheblue in a new era.” This isn’t good, Peter. This isn’t good at all.

斯蒂芬妮·雷德纳(Stephanie Redner)的助手彼得刚刚从家庭办公室打来电话 。 他们想知道为什么网站会说“ 新时代的斯蒂芬妮·布鲁纳(此处是pictublue)usheblue。” 不好，彼得。 这一点都不好。

Silly example? Maybe. But it’s happened. Maybe not exactly that way, but it’s happened. But it’s not even that scenario that’s really the problem. It’s that when you name your classes in this way, you — almost — may as well be writing inline styles.

愚蠢的例子？ 也许。 但是发生了。 也许不完全是这样，但是确实发生了。 但这并不是真正的问题所在。 就是说，当您以这种方式命名类时，您- 几乎 -也可能正在编写内联样式。

This happens naturally as a consequence of unintentional design. The site looks and functions a given way because it was tinkered with, piecemeal. And refactoring is hard to do in the real world when the culture doesn’t value it.

由于无意的设计，自然会发生这种情况。 该网站的外观和功能采用了给定的方式，因为它是零散的。 当文化不重视重构时，在现实世界中很难进行重构。

You’re short on time. The people with the money don’t get why it’s important — or that it can be problematic in the first place. And really, when your kid smashes a hole through the drywall, you patch it up. You don’t tear down the wall and build it up again. It’s also a super fast fix when someone over your head has notes on an existing site.

你时间紧。 有钱的人不明白它为什么重要的原因，或者一开始它可能有问题。 的确，当您的孩子砸破石膏板的一个洞时，您会修补它。 您无需拆除墙壁并重新建造。 当您的头顶上有人在现有站点上记录笔记时，这也是一种超快速解决方案。

So I get it. But it’s kind of become the default. And that’s not a good thing.

所以我明白了。 但这已成为默认设置。 那不是一件好事。

Here’s a related issue: you’re using a framework and want buttons to look and act like buttons. It’s not enough to add a <button>: you have to load it up like a baked potato:

这是一个相关的问题：您正在使用一个框架，并且希望按钮外观和行为类似于按钮。 添加<butt on>还不够：您必须像烤土豆一样将其加载：

<button class=“btn btn-default”>

<button class =“ btn btn-default”>

So what might you do differently?

那么，您可能会做些什么？

In the last example, maybe <button> should be enough for the default. Do we really need to say that button is part of the class of buttons, and should we ever need to declare a default?

在最后一个示例中，对于默认值，也许<butto n>应该足够了。 我们真的需要说按钮是按钮类的一部分吗，我们是否需要声明默认值？

In our hypothetical business, maybe it turns out that when you look more closely the <h2> is only red when it falls within a div in the .widget class. Maybe <p> is only red in those financial terms divs that accounting made you add, the one with that dumb .notice class (so garish, but they insisted). And so on.

在我们的假设业务中，可能会发现，当您更仔细地观察时， < h2>仅当它位于div内时才是红色。 小部件类。 可能是<p>时，只有红色的金融方面的div会计让你添加，一个机智h上哑.notice类(那么扎眼，但他们坚持)。 等等。

Well, here’s a better way: leave your HTML uncluttered, and get to know your CSS selectors. We don’t even need to get fancy (yet). We can use a simple descendent selector, which you may know better as a space.

好吧，这是一个更好的方法：使HTML保持整洁，并了解CSS选择器。 我们甚至都不需要花哨的东西。 我们可以使用一个简单的后代选择器，您可能会更好地将其理解为空格。

.widget h2, .notice p {

.widget h2，.notice p {

color: red;

红色;

This is what I dreamed about almost 20 years ago when I was making websites for myself and getting so excited about the future of CSS. It’s kind of heartbreaking now come back into the field, only to find that CSS is blamed for the baffling prevalence of a bad practice.

这是我近20年前梦dream以求的事情，当时我自己为自己制作网站，并对CSS的未来感到非常兴奋。 现在，这令人心碎，回到了领域，却发现CSS归因于不良做法的令人困惑的普遍性。

Littering your HTML elements with classes — especially overly declarative classes—creates maintenance nightmares, produces cluttered markup, and kind of defeats the purpose of separating semantics and style.

用类(尤其是过于声明性的类)乱扔HTML元素会造成维护方面的噩梦，产生混乱的标记，并且有损于分离语义和样式的目的。

So if you can, just don’t ever get on that bus. But if you do, try to mitigate things where you can. And in the end, remember what you’re trying to do in each document, and don’t duplicate your efforts.

因此，如果可以，那就永远不要上那辆公共汽车。 但是，如果这样做，请尽一切可能减轻影响。 最后，请记住您在每个文档中要执行的操作，不要重复您的工作。

翻译自: https://www.freecodecamp.org/news/class-struggle-in-the-21st-century-ae670f700794/

阶级斗争的作用