css扩展语言

by Sarah Dayan

通过莎拉·达扬

如何决定是否应该链接或扩展CSS类 (How to decide whether you should chain or extend CSS classes)

If you’re building an app or a website that changes often, modular CSS methods solve many issues. Instead of copying your HTML structure in CSS and decorating it, you create consumable libraries of components. This makes projects more scalable and keeps the CSS codebase under control.

如果您要构建经常更改的应用程序或网站，则模块化CSS方法可以解决许多问题。您无需创建CSSHTML结构并对其进行修饰，而是创建可使用的组件库。这使项目更具可伸缩性，并使CSS代码库处于受控状态。

CSS modularity relies on composition, which inevitably fattens the HTML. This collateral effect can be a significant deterrent for many people because of the “bloat” it creates.

CSS模块化依赖于组合，这不可避免地会使HTML泛滥。由于这种附带效应会造成“膨胀”，因此对许多人来说可能是很大的威慑力。

In this article, we’ll compare two techniques: chaining and extending. We’ll see what they provide and what their shortcomings are so that you can make more informed choices.

在本文中，我们将比较两种技术：链接和扩展。我们将看到它们提供的功能以及它们的缺点是什么，以便您可以做出更明智的选择。

链式 (Chaining)

Chaining CSS classes means composing the desired look by adding granular modifiers together onto an HTML selector. The composite styles create the final visual outcome. This is the default behavior with most modular CSS methodologies.

链接CSS类意味着通过将粒度修饰符一起添加到HTML选择器上来组成所需的外观 。复合样式创建最终的视觉效果。这是大多数模块化CSS方法的默认行为。

Let’s take the following OOCSS code for a button:

让我们为按钮使用以下OOCSS代码：

.btn {  display: block;  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);}.btn-default {  border: 3px solid grey;}.btn-primary {  background: purple; color: white;}

If you were to chain modifiers, your HTML would look like this:

如果要链接修饰符，则HTML如下所示：

<button class="btn btn-primary">Primary button</button><button class="btn btn-default">Default button</button>

Now let’s do something a bit more complex, this time with BEM (block, element, modifier):

现在，让我们用BEM(块，元素，修饰符)做一些更复杂的事情：

<div class="media-object media-object--reverse media-object--outlined">  <div class="media-object__media">    <img class="media-object__img media-object__img--faded img img--square" src="..." alt="...">  </div>  <div class="media-object__body">...</div></div>

Here we have a lot more interacting classes:

在这里，我们还有更多的交互类：

The .media-object block has several modifiers (.media-object--reverse and .media-object--outlined).
.media-object块具有多个修饰符( .media-object--reverse和.media-object--outlined )。
The .media-object__img element has one modifier (.media-object__img--faded).
.media-object__img元素具有一个修饰符( .media-object__img--faded )。
The .media-object__img element is also an .img block with its own modifier (.img--square).
.media-object__img元素也是具有自己的修饰符( .img--square )的.img块。

优点 (Pros)

The top highlight of chaining classes is separate responsibility. It keeps your CSS codebase clean, light, comfortable to read, and non-repetitive. What each class does is crystal clear, and you immediately know what you should use and what you shouldn’t.

链接类的最高亮点是单独的责任 。它可使您CSS代码库保持整洁，轻巧，易于阅读且不重复。每个班级的工作都非常清楚，您立即知道应该使用什么和不应该使用什么。

It also prevents dead code: since you’re dealing with building blocks, everything is potentially useful. When you remove a component, you only need to remove the HTML.

它还可以防止代码失效：由于您正在处理构建基块，因此一切都可能有用。 删除组件时，只需删除HTML。

Separate modifiers are great to represent state. Thus it makes life easier for JavaScript engineers. All they have to do is add and remove classes.

单独的修饰符可以很好地表示状态。因此，它使JavaScript工程师的工作变得更加轻松。他们要做的就是添加和删除类。

On large projects, this method can save you a lot of time.

在大型项目中， 此方法可以节省大量时间 。

缺点 (Cons)

One of the most common issues people have with modular CSS is that it creates “class madness” in the HTML. Strictly speaking, this is true.

人们使用模块化CSS时最常见的问题之一是，它在HTML中造成了“类疯狂”。严格来说，这是真的。

Design patterns that split responsibilities almost always result in more files and verbose code. CSS is no exception: if you pick a method that’s supposed to make your codebase more maintainable, the counterpart is lengthy HTML files.

划分职责的设计模式几乎总是会导致更多文件和冗长的代码。 CSS也不例外： 如果您选择一种应该使您的代码库更具可维护性的方法，则对应的方法将是冗长HTML文件 。

Having to type so much code is becoming less and less of a problem these days, as most editors and IDEs offer powerful autocompletion. But now, it’s still more code to write every time you make a new page or compose a new component. Over time, this can induce a feeling of clutter and redundancy that will put off some developers.

由于大多数编辑器和IDE提供了强大的自动补全功能，因此如今不得不键入那么多的代码越来越成为一个问题。但是现在，每次创建新页面或组成新组件时，仍然需要编写更多代码。随着时间的流逝，这可能会导致混乱和冗余的感觉，从而使某些开发人员望而却步。

延伸 (Extending)

If you don’t want to chain classes, you can extend them. We still have the same separate blocks, but instead of chaining them in the HTML, we inherit the properties of the base class to its modifiers. This way, we can use them all at once.

如果您不想链接类，则可以扩展它们。我们仍然具有相同的独立块，但是我们没有将基本块的属性链接到HTML中， 而是将基类的属性继承为其修饰符 。这样，我们可以一次全部使用它们。

Let’s use the @extend function in Sass to do so:

让我们在Sass中使用@extend函数：

.btn {  display: block;  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);  &-default {    @extend .btn;    border: 3px solid grey;  }  &-primary {    @extend .btn;    background: purple;    color: white;  }}

This will turn into the following CSS snippet:

这将变成以下CSS代码段：

.btn,.btn-default,.btn-primary {  display: block;  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);}.btn-default {  border: 3px solid grey;}.btn-primary {  background: purple; color: white;}

With the above CSS, our HTML would look like this:

使用上述CSS，我们HTML看起来像这样：

<button class="btn-primary">Primary button</button><button class="btn-default">Default button</button>

Instead of having a slew of seemingly repetitive classes, we only have one. It has an explicit name and keeps the code readable. We can still use .btn alone, but if we need a variation of it, we only need to append the modifier part on it instead of chaining a new class.

我们没有一堆看似重复的类，而只有一类。它有一个明确的名称，并使代码可读。我们仍然可以单独使用.btn ，但是如果我们需要它的一个变体，我们只需要在其上附加修饰符部分，而不是链接一个新类即可。

优点 (Pros)

The highlight of this method is a clutter-free, more readable, and lighter HTML. When you go for modular CSS, you also decide to do more HTML and less CSS. The CSS becomes a library instead of a list of instructions. Thus, you spend more time in the HTML, which is why you may want to keep it light and easy to read.

该方法的重点是无杂乱，更易读和更轻巧HTML。 当您使用模块化CSS时，您还决定使用更多HTML而减少使用CSS。 CSS变为库，而不是说明列表。因此，您在HTML上花费了更多的时间，这就是为什么您可能希望使其保持简洁和易于阅读的原因。

缺点 (Cons)

Your CSS may look DRY, especially if you’re using a pre-processor, but extending classes results in a much heavier CSS file. Plus, you don’t have much control over what happens: every time you use @extend, the class definition is moved to the top and added to a list of selectors sharing the same ruleset. This process can result in weird style overrides and a lot more generated code.

您CSS 看起来很干，尤其是在使用预处理器的情况下，但扩展类会导致CSS文件重得多 。另外，您对发生的事情没有太多控制：每次使用@extend ，类定义都移到顶部，并添加到共享同一规则集的选择器列表中。此过程可能导致怪异的样式覆盖和更多的生成代码。

There’s also the case of wanting to use several modifiers together. With the extend method, you don’t compose in the HTML anymore. You’re left with one solution if you’re going to create new combinations: create even more classes by extending modifiers. This is hard to maintain and results in more code. Every time you need to blend classes, you’ll need to edit the CSS and create a potentially non-reusable new rule. If you ever remove the HTML that uses it, you’ll also have to delete the CSS class.

也有需要一起使用多个修饰符的情况。使用extend方法，您不再需要在HTML中编写代码。如果要创建新的组合，则剩下一个解决方案：通过扩展修饰符创建更多类。 这很难维护，并导致更多代码。 每次需要混合类时，都需要编辑CSS并创建可能不可重用的新规则。如果删除了使用HTMLHTML，则还必须删除CSS类。

事后思考 (Afterthoughts)

Modular CSS comes at the price of more verbose HTML, but it’s not much to pay for all the benefits it provides. If you’ve already determined you need modularity, don’t shoot yourself in the foot by using incompatible practices. It will result in more work for half the benefits. Inheritance is tempting, but composition has more than once been recognized as a far better strategy.

模块化CSS的代价是更冗长HTML，但要付出其提供的所有好处并不多。如果您已经确定需要模块化，请不要通过使用不兼容的做法而陷入困境。这将导致工作量增加，但收益却减半。继承是很诱人的，但是不止一次地将组合视为一种更好的策略。

HTML “bloat” is not that big of a deal when you look at its actual impact. Modularity inevitably creates more code — the method you pick only determines where it goes. From a performance standpoint, more HTML is far better than more CSS.

当您查看HTML的实际影响时，HTML的“膨胀”并不是那么重要。模块化必然造成更多的代码-你只挑方法确定哪里就有奇迹。从性能的角度来看，更多HTML比更多CSS更好。

Don’t focus on small things that don’t matter. Instead, leverage tools that help you write and navigate code more efficiently. Try to look at the big picture and make choices based on facts, not personal preferences.

不要专注于无关紧要的小事情。 相反，请利用可帮助您更有效地编写和导航代码的工具。尝试着眼全局，根据事实而不是个人喜好做出选择。

Originally published at frontstuff.io.

最初发布在frontstuff.io上。