Components 和 Elements 可能都会拥有 Variants。
Naming variants（变体命名）
Variants 的 classname 应带有前缀中划线 –
CSS Code复制内容到剪贴板
.like-button {
&.-wide { /* … */ }
&.-short { /* … */ }
&.-disabled { /* … */ }
}
Element variants（元素变体）
CSS Code复制内容到剪贴板
.shopping-card {
> .title { /* … */ }
> .title.-small { /* … */ }
}
Dash prefixes（中划线前缀）
为什么使用中划线作为变体的前缀？
它可以避免歧义与 Elements
CSS class 仅能以单词和 _ 或 – 开头
中划线比下划线更容易输出
Layout （布局）
Avoid positioning properties（避免定位属性）
Components 应该在不同的上下文中都可以复用，所以应避免设置以下属性：
Positioning (position, top, left, right, bottom)
Floats (float, clear)
Margins (margin)
Dimensions (width, height) *
Fixed dimensions（固定尺寸）
头像和 logos 这些元素应该设置固定尺寸（宽度，高度…）。
Define positioning in parents（在父元素中设置定位）
倘若你需要为组件设置定位，应将在组件的上下文（父元素）中进行处理，比如以下例子中，将 widths 和 floats 应用在 list component(.article-list)当中，而不是 component(.article-card)自身。
CSS Code复制内容到剪贴板
.article-list {
& {
@include clearfix;
}
> .article-card {
width: 33.3%;
float: left;
}
}
.article-card {
& { /* … */ }
> .image { /* … */ }
> .title { /* … */ }
> .category { /* … */ }
}
Avoid over-nesting（避免过分嵌套）
当出现多个嵌套的时候容易失去控制，应保持不超过一个嵌套。
