# 规则
- 使用 BEM 的命名风格
- 单文件组件,样式应该统一在一个命名空间下,避免污染其他组件或全局样式。
- 不要在组件内修改
html
、body
、#mfe-app
等 DOM 元素的样式。 - 不要在组件内修改其他组件的样式,除非这个组件是当前组件的子组件(即被调用了)。但这个时候也要注意影响面。
# 组件样式示例
<template>
<div class="e-button">
<div class="e-button__prefix"></div>
<EIcon name="xxx"/>
</div>>
</template>
<style lang="scss">
.e-button { /* CSS 命名空间 */
&__prefix { /* BEM 风格 */
}
.e-icon { /* 子组件样式覆盖 */
}
&--active { /* BEM 风格 */
}
}
</style>