一个组件一般有三种状态，例如同样的一个 Button：
默认：最常见的一种状态，纯界面区别。如 .Button、.Button-primary
交互：交互后发生的变化，与该组件交互后的状态一般有两种实现方式：1、样式（.Button-primary.is-active）；2、伪类（:focus），可根据不同的需求采用不同的实现方式。
子组件：该组件是其他组件的一部分，如果该组件作为其他组件的一部分时样式有所变化，则需要单独定义样式，如 TopNav–AddQuestionButton、TopNav–SigninButton。
当该组件可能会成为另一个组件的一部分时，需要明确该组件的子组件状态和常规状态时的区别和联系是什么。下面是一个常规的 input 组件：
当我们在一个新的 dialog 中使用到了这个 input 组件，但在场景下 input 有些许变化，这时需要明确几个问题：
变化是否有必要：大家都喜欢抛弃旧的搞新的，这样没有历史包袱，但这种变化对于整个系统而言并不一定是好事。
input 之间是否还有关系：1、两者的使用场景分别是什么；2、哪些样式会被共用。
变化幅度有多大：基于之前的共用样式范围，一般有两种情况：1、少量样式不共用；2、大量样式不共用。第一种情况一般会复用旧的样式，同时写新样式覆盖掉原来 input 中不需要共用的部分，例如.Input.DialogInput。第二种情况的少量样式共用，比如只有 border 一样，其他的都不一样，那基本上会重写整个组件样式。