diff --git a/packages/button/index.pcss b/packages/button/index.pcss
index d18ba456..c9b33a32 100644
--- a/packages/button/index.pcss
+++ b/packages/button/index.pcss
@@ -1,4 +1,4 @@
-@import '../common/var.pcss';
+@import '../helper/index.pcss';
 
 .van-button {
   position: relative;
diff --git a/packages/card/index.pcss b/packages/card/index.pcss
index fc7e0a29..5638266a 100644
--- a/packages/card/index.pcss
+++ b/packages/card/index.pcss
@@ -1,5 +1,4 @@
-@import '../common/var.pcss';
-@import '../common/_mixins.pcss';
+@import '../helper/index.pcss';
 
 .van-card {
   color: $text-color;
diff --git a/packages/helper/common/animation.pcss b/packages/helper/common/animation.pcss
new file mode 100644
index 00000000..94acb20e
--- /dev/null
+++ b/packages/helper/common/animation.pcss
@@ -0,0 +1,61 @@
+@keyframes van-slide-bottom-enter {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes van-slide-bottom-leave {
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes van-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes van-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes van-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.van-fade {
+  &-enter-active {
+    animation: .3s van-fade-in;
+  }
+
+  &-leave-active {
+    animation: .3s van-fade-out;
+  }
+}
+
+.van-slide-bottom {
+  &-enter-active {
+    animation: van-slide-bottom-enter .3s both ease;
+  }
+
+  &-leave-active {
+    animation: van-slide-bottom-leave .3s both ease;
+  }
+}
diff --git a/packages/helper/common/clearfix.pcss b/packages/helper/common/clearfix.pcss
new file mode 100644
index 00000000..2c6adead
--- /dev/null
+++ b/packages/helper/common/clearfix.pcss
@@ -0,0 +1,5 @@
+@import '../mixins/clearfix.pcss';
+
+.van-clearfix {
+  @mixin ellipsis;
+}
diff --git a/packages/helper/common/ellipsis.pcss b/packages/helper/common/ellipsis.pcss
new file mode 100644
index 00000000..f97faae1
--- /dev/null
+++ b/packages/helper/common/ellipsis.pcss
@@ -0,0 +1,5 @@
+@import '../mixins/ellipsis.pcss';
+
+.van-ellipsis {
+  @mixin ellipsis;
+}
diff --git a/packages/helper/common/hairline.pcss b/packages/helper/common/hairline.pcss
new file mode 100644
index 00000000..ee0f6077
--- /dev/null
+++ b/packages/helper/common/hairline.pcss
@@ -0,0 +1,40 @@
+@import "../mixins/border-retina.pcss";
+
+.van-hairline--top,
+.van-hairline--left,
+.van-hairline--right,
+.van-hairline--bottom,
+.van-hairline--top-bottom,
+.van-hairline--surround {
+  position: relative;
+
+  &::after {
+    @mixin hairline;
+  }
+}
+
+.van-hairline {
+  &--top::after {
+    border-top-width: 1px;
+  }
+z
+  &--left::after {
+    border-left-width: 1px;
+  }
+
+  &--right::after {
+    border-right-width: 1px;
+  }
+
+  &--bottom::after {
+    border-bottom-width: 1px;
+  }
+
+  &--top-bottom::after {
+    border-width: 1px 0;
+  }
+
+  &--surround::after {
+    border-width: 1px;
+  }
+}
diff --git a/packages/helper/common/var.pcss b/packages/helper/common/var.pcss
new file mode 100644
index 00000000..7f3bd754
--- /dev/null
+++ b/packages/helper/common/var.pcss
@@ -0,0 +1,38 @@
+/* color variables */
+$black: #000;
+$white: #fff;
+$red: #f44;
+$blue: #38f;
+$orange: #f85;
+$green: #06bf04;
+$gray: #c9c9c9;
+$gray-light: #e5e5e5;
+$gray-darker: #666;
+$gray-dark: #999;
+
+/* default colors */
+$text-color: #333;
+$border-color: $gray-light;
+$active-color: #e8e8e8;
+$background-color: #f8f8f8;
+
+/* button */
+$button-default-color: $text-color;
+$button-default-background-color: $white;
+$button-default-border-color: $border-color;
+$button-primary-color: $white;
+$button-primary-background-color: #4b0;
+$button-primary-border-color: #4b0;
+$button-danger-color: $white;
+$button-danger-background-color: $red;
+$button-danger-border-color: $red;
+$button-warning-color: $white;
+$button-warning-background-color: $orange;
+$button-warning-border-color: $orange;
+$button-disabled-color: $gray-dark;
+$button-disabled-background-color: $active-color;
+$button-disabled-border-color: $border-color;
+$button-bottom-action-default-color: $white;
+$button-bottom-action-default-background-color: #f85;
+$button-bottom-action-primary-color: $white;
+$button-bottom-action-primary-background-color: $red;
diff --git a/packages/helper/index.pcss b/packages/helper/index.pcss
index c15d3c8f..69c59855 100644
--- a/packages/helper/index.pcss
+++ b/packages/helper/index.pcss
@@ -1,178 +1,9 @@
-@import "../common/_mixins";
-@import "../common/_var";
+/**
+ * Entry of basic styles
+ */
 
-.van-pull-left {
-  float: left;
-}
-
-.van-pull-right {
-  float: right;
-}
-
-.van-center {
-  text-align: center;
-}
-
-.van-right {
-  text-align: right;
-}
-
-.van-text-deleted {
-  text-decoration: line-through;
-}
-.van-font-8 {
-  font-size: 8px;
-}
-.van-font-10 {
-  font-size: 10px;
-}
-.van-font-12 {
-  font-size: 12px;
-}
-.van-font-14 {
-  font-size: 14px;
-}
-.van-font-16 {
-  font-size: 16px;
-}
-.van-font-18 {
-  font-size: 18px;
-}
-.van-font-20 {
-  font-size: 20px;
-}
-.van-font-22 {
-  font-size: 22px;
-}
-.van-font-24 {
-  font-size: 24px;
-}
-.van-font-26 {
-  font-size: 26px;
-}
-.van-font-30 {
-  font-size: 30px;
-}
-.van-font-bold {
-  font-weight: bold;
-}
-
-.van-arrow {
-  position: absolute;
-  right: 15px;
-  top: 50%;
-  display: inline-block;
-  height: 6px;
-  width: 6px;
-  border-width: 2px 2px 0 0;
-  border-color: #c8c8c8;
-  border-style: solid;
-  transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
-}
-
-.van-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: normal;
-}
-
-.van-ellipsis--l2 {
-  max-height: 40px;
-  line-height: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.van-ellipsis--l3 {
-  max-height: 60px;
-  line-height: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
-
-.van-clearfix {
-  zoom: 1;
-}
-.van-clearfix::after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.van-c {
-  &-red {
-    color: $red;
-  }
-
-  &-black {
-    color: $black;
-  }
-
-  &-green {
-    color: $green;
-  }
-
-  &-blue {
-    color: $blue;
-  }
-
-  &-gray {
-    color: $gray;
-  }
-
-  &-gray-dark {
-    color: $gray-dark;
-  }
-
-  &-gray-darker {
-    color: $gray-darker;
-  }
-}
-
-/* 超细边框 */
-.van-hairline {
-  &,
-  &--top,
-  &--left,
-  &--right,
-  &--bottom,
-  &--top-bottom,
-  &--surround {
-    position: relative;
-
-    &::after {
-      @mixin hairline;
-    }
-  }
-
-  &--top::after {
-    border-top-width: 1px;
-  }
-
-  &--left::after {
-    border-left-width: 1px;
-  }
-
-  &--right::after {
-    border-right-width: 1px;
-  }
-
-  &--bottom::after {
-    border-bottom-width: 1px;
-  }
-
-  &--top-bottom::after {
-    border-width: 1px 0;
-  }
-
-  &--surround::after {
-    border-width: 1px;
-  }
-}
+@import "./common/var.pcss";
+@import "./common/ellipsis.pcss";
+@import "./common/clearfix.pcss";
+@import "./common/hairline.pcss";
+@import "./common/animation.pcss";
diff --git a/packages/helper/mixins/border-retina.pcss b/packages/helper/mixins/border-retina.pcss
new file mode 100644
index 00000000..60fd07ab
--- /dev/null
+++ b/packages/helper/mixins/border-retina.pcss
@@ -0,0 +1,34 @@
+@import '../common/var.pcss';
+
+$border-poses: top, right, bottom, left;
+
+@define-mixin border-retina $poses: $border-poses, $border-retina-color: $border-color {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  transform: scale(.5);
+  transform-origin: 0 0;
+  pointer-events: none;
+  box-sizing: border-box;
+
+  @each $pos in $poses {
+    border-$(pos): 1px solid $border-retina-color;
+  }
+}
+
+@define-mixin hairline $border-retina-color: $border-color {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  transform: scale(.5);
+  transform-origin: 0 0;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 0 solid $border-retina-color;
+}
diff --git a/packages/helper/mixins/clearfix.pcss b/packages/helper/mixins/clearfix.pcss
new file mode 100644
index 00000000..cb8ed012
--- /dev/null
+++ b/packages/helper/mixins/clearfix.pcss
@@ -0,0 +1,7 @@
+@define-mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
diff --git a/packages/helper/mixins/ellipsis.pcss b/packages/helper/mixins/ellipsis.pcss
new file mode 100644
index 00000000..e57f1060
--- /dev/null
+++ b/packages/helper/mixins/ellipsis.pcss
@@ -0,0 +1,13 @@
+@define-mixin multi-ellipsis $lines {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+}
+
+@define-mixin ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/packages/loading/index.pcss b/packages/loading/index.pcss
index ac61a616..8f2abd74 100644
--- a/packages/loading/index.pcss
+++ b/packages/loading/index.pcss
@@ -1,4 +1,4 @@
-@import '../common/var.pcss';
+@import '../helper/index.pcss';
 
 .van-loading {
   z-index: 0;
@@ -48,16 +48,6 @@
   }
 }
 
-@keyframes van-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @for $i from 1 to 12 {
   .van-loading__dot:nth-of-type($i) {
     opacity: calc(1 - (0.75 / 12) * ($i - 1));