Angular组件样式是一个重要的概念，它能够让多个组件共享一个样式。下面是一个简单的示例：

  
This is my component

/* my-component.component.css */
.my-component {
  background-color: #eee;
  padding: 20px;
}

.my-component p {
  color: blue;
}

上述示例中，我们定义了一个my-component组件和它的样式。我们将组件定义在my-component.component.html文件中，样式则定义在my-component.component.css文件中。

但是，为了更好地组织代码和避免全局样式冲突，我们需要一些约定来约束组件样式的书写。下面是一些常用的约定：

1. 使用组件选择器作为样式的前缀，例如：

/* my-component.component.css */
.my-component {
  background-color: #eee;
  padding: 20px;
}

.my-component p {
  color: blue;
}

2. 尽可能减少全局样式的使用，而是使用局部样式。例如：

/* styles.css */
body {
  background-color: #f0f0f0;
}

/* my-component.component.css */
.my-component {
  background-color: #eee;
  padding: 20px;
}

.my-component p {
  color: blue;
}

3. 避免使用!important，除非有特殊需求。例如：

/* my-component.component.css */
.my-component p {
  color: red !important;
}

这些约定可以帮助我们更好地组织和管理组件样式。