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上。