css 倒三角

by Luuk Gruijs

Luuk Gruijs着

倒三角结构：如何管理大型CSS项目 (The Inverted Triangle Architecture: how to manage large CSS Projects)

You’re assigned a small task to fix some little styling issues here and there. You’ve found the correct CSS rules to apply the fix, so you quickly drop those rules at the bottom of your CSS file, push your changes, and then move on with more important stuff.

您被分配了一个小任务来解决此处和此处的一些小样式问题。 您已经找到了正确CSS规则来应用此修复程序，因此您可以将这些规则快速放在CSS文件的底部，推送更改，然后继续进行其他重要操作。

Over time this happens a couple of times and before you know it “the bottom” of your CSS file consists of a few hundred lines of code that nobody understands and nobody dares to remove as it will inevitably break stuff.

随着时间的流逝，这种情况会发生几次，并且在您不知道CSS文件的“底部”之前，没有几百行代码，没人理解，也没人敢删除，因为它不可避免地会破坏内容。

Do you recognize this scenario because you’ve either done this yourself or you’ve seen colleagues do this? Well, read on and promise yourself that you will never do this again, because here’s an easier way to manage your CSS files.

您是否认识到这种情况是因为您自己完成了此操作，还是您看到同事都这样做了？ 好吧，请继续阅读并向自己保证，您将永远不会再这样做，因为这是一种管理CSS文件的简便方法。

倒三角架构介绍 (Introducing the Inverted Triangle architecture)

The Inverted Triangle architecture, also know as ITCSS, is a methodology for structuring your CSS in the most effective and least wasteful way.

倒三角形架构，也称为ITCSS，是一种以最有效，最不浪费的方式构造CSS的方法。

ITCSS was first introduced by Harry Roberts and can be best visualized by an upside-down, layered triangle. ITCSS defines the shared CSS-rules of a project in a logical and sane manner, whilst also providing a solid level of encapsulation and decoupling that which prevents non-shared CSS-rules from interfering with one another.

ITCSS最初是由哈里·罗伯茨(Harry Roberts)提出的，可以通过上下颠倒的分层三角形来形象地看到。 ITCSS以逻辑和理智的方式定义了项目的共享CSS规则，同时还提供了可靠的封装和解耦级别，从而防止了非共享CSS规则之间的相互干扰。

ITCSS is very flexible as it does not force you to use any specific naming convention methodologies like SMACCS, OOCSS or BEM.

ITCSS非常灵活，因为它不会强迫您使用任何特定的命名约定方法，例如SMACCS，OOCSS或BEM。

原则 (The principles)

ITCSS works by structuring your entire CSS project according to these 3 principles:

ITCSS通过以下三个原则来构建整个CSS项目：

1. Generic to explicit

   泛型到显式

   We start with the most generic, low-level, catch-all styles. This could be font settings or, for example, color variables if you’re using SCSS.

   我们从最通用的，低级的，万能的样式开始。 这可能是字体设置，例如，如果使用的是SCSS，则可能是颜色变量。

2. Low to high specificity

   从低到高的特异性

   The lowest specificity selectors appear at the start of your project. The specificity steadily increases. This way we avoid specificity conflicts and specificity overrides using

   最低的特异性选择器出现在项目的开始。 特异性稳步提高。 这样我们可以避免使用特异性冲突和使用特异性覆盖

   !important.

   !important ！

3. Far-reaching to localized

   深入到本地化

   Selectors at the start of our project affect a lot of DOM-elements, for example your browser reset styles, while selectors later in our project become very localized, for example specific styles for one component.

   项目开始时的选择器会影响许多DOM元素，例如您的浏览器重置样式，而项目后面的选择器则变得非常本地化，例如某个组件的特定样式。

三角形层 (The triangle layers)

Sticking to the above principles means we have to break up our CSS into layers. Each layer must be introduced in a location that honors each of the criteria.

坚持以上原则意味着我们必须将CSS分成多个层。 必须在符合每个标准的位置引入每个层。

It happens often that CSS is grouped by, for example, typographic styles, form styles, and styles for a specific component. These groups are often not imported in the most efficient order and this creates some inheritance or specificity problems.

CSS通常按印刷样式，表单样式和特定组件的样式进行分组。 这些组通常不会以最有效的顺序导入，这会带来一些继承或特异性问题。

In ITCSS, each layer is a logical progression from the last. It increases in specificity, narrows in reach and gets more explicit. This means our CSS is easier to scale, as we’re only adding to what is already there and not overriding what was previously written.

在ITCSS中，每一层都是从最后一层开始的逻辑发展。 它增加了特异性，缩小了范围，变得更加明确。 这意味着我们CSS易于扩展，因为我们仅添加现有内容，而不覆盖先前编写的内容。

Another big advantage of following this structure is that everybody always knows where to find certain CSS rules as they’re logically placed. This avoids the issue of people dropping their CSS rules at the bottom of the file.

遵循这种结构的另一个大优点是，每个人总是知道在逻辑上放置某些CSS规则的位置。 这样可以避免人们将CSS规则放在文件底部的问题。

Harry Roberts, the creator of ITCSS, laid out seven layers. He ordered them as follows:

ITCSS的创建者哈里·罗伯茨(Harry Roberts)布置了七个层。 他命令他们如下：

1. Settings

   设定值

   If you’re using a preprocessor like SCSS, this is your starting point. In this layer you define your variables.

   如果您使用的是SCSS之类的预处理器，那么这就是您的起点。 在这一层中，定义变量。

2. Tools

   工具类

   This layer can be used for your tooling. Think about mixins and functions that need to be globally available. If they don’t need to be, just place them in the layer where they’re needed.

   该层可用于您的工具。 考虑需要全局可用的混合器和功能。 如果不需要，只需将它们放在需要的图层中即可。

3. Generic

   泛型

   In this layer, we house all the very high-level, far reaching styles. This layer is often the same across all your projects as it contains things like Normalize.css, CSS resets, and for example box-sizing rules.

   在这一层中，我们包含所有非常高级的，深远的样式。 在您的所有项目中，此层通常都是相同的，因为它包含Normalize.css，CSS重置以及框大小调整规则等内容。

4. Elements

   元素

   In this layer we put styles for bare, unclassed HTML elements. You could, for example, think about underlines for anchors on hover or font-sizes for the different headings.

   在这一层中，我们为裸露的未分类HTML元素添加样式。 例如，您可以考虑悬停时锚点的下划线或不同标题的字体大小。

5. Objects

   对象

   In the object layer we style the first elements that have classes. Think about your containers, wrappers or rows. You can also define your grid here.

   在对象层中，我们设置具有类的第一个元素的样式。 考虑一下您的容器，包装器或行。 您也可以在此处定义网格。

6. Components

   组件

   The component layer is the place where most of the styling magic happens as you will be styling your UI elements here. In component based frameworks like Angular, Vue or React this is the layer where you import your styling for each component if you don’t include them directly in your component.

   组件层是大多数样式化魔术发生的地方，因为您将在此处对UI元素进行样式化。 在基于组件的框架(如Angular，Vue或React)中，如果不将其直接包含在组件中，则可以在该层中导入每个组件的样式。

7. Trumps

   特朗普

   The trumps layer is the dirty layer. Even after structuring your styling according to the ITCSS principles it can happen that you have to use

   王牌层是脏层。 即使按照ITCSS原则构造了样式，也可能需要使用

   !important to override some third-party styling, for example. Do that in this layer as this is the most specific, local and explicit layer.

   !important可以覆盖某些第三方样式。 在这一层中执行此操作，因为这是最具体，本地和显式的层。

最终结果 (The end result)

Now that I’ve explained the layers, it’s time to look at how a simple end result could potentially look.

现在，我已经解释了各层，现在该看看简单的最终结果可能看起来如何了。

// settings@import "globals";@import "branding";

// tools@import "mixins";

// generic@import "normalize";

// elements@import "fonts";@import "form";

// objects@import "grid";@import "wrappers";

// components@import "header";@import "sidebar";@import "carousel";@import "card";

// trumps@import "overrides";

结论 (Conclusion)

Just as ITCSS doesn’t force you to use a certain naming conventions, it doesn’t force you to use all layers. Use a layer structure that works best for you while maintaining the ITCSS principles of generic to explicit, low to high specificity and far-reaching to localized.

正如ITCSS不会强迫您使用某些命名约定一样，它也不会强迫您使用所有图层。 使用最适合您的层结构，同时保持ITCSS泛型到显式，低到高的特异性以及对本地化的影响深远的原则。

If you notice that you have to override styles, it almost always means your structure is inefficient. If you feel like learning more about this, I recommend watching this video:

如果您发现必须覆盖样式，则几乎总是意味着您的结构效率低下。 如果您想了解更多有关此的内容，建议您观看以下视频：

在阿姆斯特丹找工作？ (Looking for a job in Amsterdam?)

I work for Sytac as a Senior front-end developer and we are looking for medior/senior developers that specialise in Angular, React, Java or Scala. Sytac is an ambitious consultancy company in the Netherlands that works for a lot of renowned companies in the banking, airline, government and retail sectors.

我在Sytac担任高级前端开发人员，我们正在寻找专门从事Angular，React，Java或Scala的中/高级开发人员。 Sytac是荷兰一家雄心勃勃的咨询公司，为银行，航空，政府和零售领域的许多知名公司工作。

If you think you have what it takes to work with the best, send me an email at luuk[dot]gruijs[at]sytac[dot]io and I’d be happy to tell you more.

如果您认为自己有最好的工作条件，请给我发电子邮件至luuk [gruijs] [sytac] io ，我很乐意告诉您更多信息。

翻译自: https://www.freecodecamp.org/news/managing-large-s-css-projects-using-the-inverted-triangle-architecture-3c03e4b1e6df/

css 倒三角