css避免样式污染技巧_3种样式管理技巧，可帮助您避免在角度应用程序CSS中头疼...

css避免样式污染技巧

Let’s face it — when we work on the front end, writing CSS is not the thing that excites us the most. We like to mess with the more serious stuff (you know what I mean — JavaScript). Most of the apps I’ve come across, and I am sure you have too, have a big mess in the stylesheet area. Issues like code duplication, overriding styles, lack of organization, etc. are rampant.

面对现实吧-在前端工作时，编写CSS并不是最让我们兴奋的事情。 我们喜欢弄乱更严重的内容(您知道我的意思-JavaScript)。 我遇到的大多数应用程序，我相信您也有，在样式表区域中也有很多混乱。 诸如代码重复，覆盖样式，缺乏组织等问题非常普遍。

In this article, I’d like to share with you how I came up with a methodology that improves my styles, and therefore, my lifestyle 😇

在本文中，我想与大家分享我如何提出一种方法来改善自己的风格，从而改善我的生活方式。

创建一个核心组件库 (Create a Core Component Library)

In each application, there’s a uniform style which exists throughout it. It can be reflected in the styles of inputs, buttons, tabs, tooltips, etc. Therefore I recommend writing a core components library based on the application style guide. The benefits of such a library are having a single source of truth for component style and behavior, and faster development cycles, especially as the app grows bigger and more complex. For example:

在每个应用程序中，都有一个统一的样式。 它可以反映在输入，按钮，选项卡，工具提示等的样式中。因此，我建议根据应用程序样式指南编写一个核心组件库。 这样的库的好处是组件样式和行为具有唯一的真实来源，并且开发周期更快，尤其是随着应用程序变得越来越大和越来越复杂。 例如：

<button appButton>Click</button>
<app-select [options]="[]"></app-select>
<app-accordion>....</app-accordion>

Such a library can be built in two methods; in case the app is already large, and we have an extensive amount of components, it’s recommended to set up a dedicated team whose job is to construct it.

这样的库可以用两种方法构建： 如果应用程序已经很大，并且我们有大量的组件，建议您成立专门的团队来构建它。

In case the app is small, we can do it in smaller, incremental steps, and let each developer build some core components as part of a feature they’re working on.

如果应用程序很小，我们可以以较小的增量步骤进行操作，并让每个开发人员构建一些核心组件作为他们正在使用的功能的一部分。

使用实用程序类 (Use Utility Classes)

Now that we have a library that provides us with all the components we need to build a new feature, we need to deal with the smaller things. For instance, styling element display using flexbox or grid, adding margins, padding, etc. To deal with this, I recommend using the utility classes approach — it’s both fast and DRY. In my projects, I’m using a library named Tailwind CSS:

现在，我们有了一个库，为我们提供了构建新功能所需的所有组件，我们需要处理一些较小的事情。 例如，使用flexbox或网格显示样式元素，添加边距，填充等。要解决此问题，我建议使用实用工具类方法-快速且干的。 在我的项目中，我正在使用一个名为Tailwind CSS的库：

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Tailwind CSS是一个高度可定制的低级CSS框架，可为您提供构建定制设计所需的所有构建基块，而无需消除任何烦人的自以为是的样式。

Let’s add Tailwind to our project using another neat library from ngneat:

让我们使用另一个来自ngneat的简洁库将Tailwind添加到我们的项目中：

Thanks to Chau Tran for for creating this schematic.

感谢Chau Tran制作了此原理图。

As we can see, its sets up everything we need to get started. Now we can use it wherever we need to:

如我们所见，它设置了我们入门所需的一切。 现在我们可以在需要的地方使用它：

<div class="flex justify-between">
  <div class="mr-4">
     ...
  </div>
</div>

In development mode, we load the entire Tailwind library. But the cool thing is that in production mode, we activate PurgeCSS, which scans our project and only bundles the classes used in it.

在开发模式下，我们加载整个Tailwind库。 但是很酷的事情是，在生产模式下，我们激活PurgeCSS ，它会扫描我们的项目，并且只捆绑其中使用的类 。

Usually, I limit myself to five utility classes per single element, and to tell the truth — there were few cases where I’ve reached that number. Even if you do find yourself using many classes, you can use the apply functionality from Tailwind to move them to the stylesheet, and replace them with a single class in the template.

通常，我将自己限制为每个元素五个实用程序类，说实话-在少数情况下，我达到了这个数量。 即使你发现自己使用许多类，则可以使用apply从顺风功能将其移动到样式表，并在模板的单一类替换它们。

I highly recommend exploring Tailwind, as it has many capabilities. If you’re working with VSCode, you can use this great plugin for IntelliSense:

我强烈建议您探索Tailwind，因为它具有许多功能。 如果您使用的是VSCode，则可以将此出色的插件用于IntelliSense：

Or use this plugin to quickly access the docs:

或使用此插件快速访问文档：

In Webstorm you’ll also get autocompletion out of the box.

在Webstorm中，您还将获得自动补全功能。

使用CSS变量 (Use CSS Variables)

I want to end with a small but important tip — use CSS variables. Use them to define your colors, sizes, and any other value that is used repeatedly in the app. They’re widely supported, can be changed during runtime, and can be scoped to an element.

我想以一个小而重要的技巧作为结尾-使用CSS 变量 。 使用它们来定义您的颜色，大小以及在应用程序中重复使用的任何其他值。 它们得到了广泛的支持，可以在运行时进行更改，并且可以将其范围限定为一个元素。

Browser support

浏览器支持

For example, look at how easily you can create a dark mode for your application:

例如，查看为应用程序创建暗模式的难易程度：

:root {
  --font-family: Helvetica, Arial, Sans-Serif;
}


body {
  --primary-100: #fff;
  --primary-200: #9f1f12;
}


body.dark-theme {
  --primary-100: #000;
  --primary-200: #f2f2f2;
}


body {
   background-color: var(--primary-100);
   color: var(--primary-200);
   font-family: var(--font-family);
}

Now the only thing we need to do is toggle the dark-theme class.

现在，我们唯一需要做的就是切换dark-theme类。

🚀万一您错过了 (🚀 In Case You Missed It)

Here are a few of my open source projects:

这是我的一些开源项目：

• Akita: State Management Tailored-Made for JS Applications

  秋田 ：针对JS应用量身定制的国家管理

• Spectator: A Powerful Tool to Simplify Your Angular Tests

  Spectator ：简化角度测试的强大工具

• Transloco: The Internationalization library Angular

  Transloco ： Angular国际化图书馆

• error-tailer — Seamless form errors for Angular applications
  error-tailer — Angular应用程序的无缝形式错误

• Forms Manager: The Foundation for Proper Form Management in Angular

  表单管理器 ：Angular中正确表单管理的基础

• Cashew: A flexible and straightforward library that caches HTTP requests

  腰果 ：一个灵活而直接的库，用于缓存HTTP请求

• Error Tailor — Seamless form errors for Angular applications

  错误裁缝 -Angular应用程序的无缝形式错误

And many more!

和许多更多！

Follow me on Medium or Twitter to read more about Angular, Akita and JS!

在 Medium 或 Twitter上 关注我， 以了解有关Angular，Akita和JS的更多信息！

翻译自: https://netbasal.com/3-style-management-tips-that-will-save-you-a-headache-in-your-angular-app-css-94365570987e

css避免样式污染技巧