我们如何在可重用性和跨组件共享样式的背景下设置 Web 组件的样式

Question

我正在尝试制定一种策略，将品牌（样式）添加到 Web 组件（在我的情况下为 Angular 2 组件）。我希望达成共识，即同一组件可能在页面上重复多次.希望在跨组件打包样式并将其抽象时避免重复。当样式需要对组件具有原子性以及何时抽象它以及我需要如何去做时，我如何获得解决方案。非常感谢

Answer 1

根据我的经验，拥有多个处理特定区域的样式文件非常有用。就我而言，我称这些模板。这是我的主项目中的 main.scss 文件的示例：

@import 'templates/menu.scss';
@import 'templates/forms.scss';
@import 'templates/pagination.scss';
@import 'templates/general.scss';
@import 'templates/type.scss';
@import 'templates/labels.scss';
@import 'templates/navbar.scss';
@import 'templates/sidebar.scss';
@import 'templates/buttons.scss';
@import 'templates/tables.scss';
@import 'templates/panels.scss';
@import 'templates/alerts.scss';
@import 'templates/loading.scss';
@import 'templates/calendar.scss';
@import 'templates/comment-input.scss';

我是按需创建的。这就像编写任何类型的可重用代码一样。当您或团队中的某个人注意到即将创建的内容已经存在时。最好从组件的样式中移除，放到一个更大范围的样式文件中。

我们的团队由 5 名开发人员组成，并且一直运行良好。组件的特定行为被隔离，但它们共享的行为可供任何组件使用。

我使用的另一种方法是仅将模板文件作为组件中的另一个 styleUrl 导入。这样我可以保证更多的样式封装。

假设您有一个具有特定行为的组件，但您还希望它具有可用于它的 labels.scss。你会这样做：

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.component.html'
  styleUrls: ['my-component.component.css', '../shared/styles/labels.css']
})

我真的很喜欢第二种方法，但是随着项目变得非常大，在导入共享样式时可能需要处理一些令人讨厌的相对路径。

我希望这会有所帮助。