Question

我有三个相同的组成部分：建议产品的转盘，打折产品的转盘，特色产品的转盘。这些组件具有一系列的CSS样式。当然，那些css类几乎是相同的。我应该在每个组件上重复css还是应该将共享类放在全局styles.scss上。最佳做法是哪一种？如果使用全局styles.scss，则可以避免重复，并且可以在一处将更改应用于组件。但是，如果要在另一个项目中使用该组件又如何呢？我必须选择styles.scss文件上的所有类。再说一次，最佳做法是什么？

Answer 1

组件样式用于封装样式。

一旦编译，您的样式，例如

.myClass { color: blue; }

成为

.myClass[ng_contentc0] { color: blue; }

ng_contentc0是一个属性，已动态添加到组件的每个HTML标记中。这样可以防止您的类从一个组件碰撞到另一个组件。

使用全局样式表（通常为styles.[ext]）时，您只需创建一个全局样式：每个具有类的标签都将具有该样式。

在您的情况下，您不应使用这两种方法：您应该

创建一个名为carousel.scss或其他名称的新CSS文件
将该文件导入您的所有3个组件装饰器中的styleUrls下（这是一个数组）

使用这种技术，您可以创建一个封装的样式表，可以在多个组件上使用它，并且不会与您可能已经制作/安装的任何外部CSS样式发生冲突。

Answer 2

我认为没有最佳实践，最适合您的是

小型项目通常并不关心这些，如果可行，那就可以了。

大型项目通常在扩展CSS方面遇到困难，迟早会在样式方面遇到瓶颈，更改任何内容都会破坏一切。扩展CSS有很多方法。

您可以使用BEM, SMACSS etc，并可以帮助您轻松管理CSS。

另一种基于组件的CSS方法是scoped CSS，这正是在Angular的组件文件中编写CSS时所做的事情，因为angular会自己进行多填充的作用域。（不应使用/deep/）

这些组件已应用了一堆CSS样式。当然那些css类几乎相同

您可能必须重新想象组件的粒度，或者在sass中使用mixin，继承等来管理相同的功能

免责声明：我不是CSS方面的专家。

Answer 3

我认为这里的真正问题是，为什么要具有三个相同的组成部分。也许更好的选择是仅以一种更通用的方式实现一个组件，或者使一个组件包含三个有所作为的组件。

全局styles.scss适用于整个应用程序，因此应将真正特定于组件的样式放置在组件内部，重复的组件会导致重复的代码（包括scss），因此应避免这种情况。 / p>

Answer 4

此问题的最佳解决方案是encapsulation: ViewEncapsulation.None，它将在全局样式部分添加您的样式。

因此您可以直接复制粘贴组件到任何项目中。它将像魅力一样工作。

这里是一个示例：-

your.component.ts

import {ViewEncapsulation} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-zippy',
  templateUrl: 'my-zippy.component.html',
  styles: [`
    .zippy {
      background: green;
    }
  `],
  encapsulation: ViewEncapsulation.None
})
class ZippyComponent {
  @Input() title: string;
}

希望这会有所帮助

我什么时候应该在Angular中使用styles.scss，什么时候应该使用组件的scss

4 个答案: