diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index c176456525..16013e1061 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -2,7 +2,7 @@
   <transition name="el-alert-fade">
     <div
       v-show="visible"
-      :class="[ns.b(), ns.m(type), center ? 'is-center' : '', `is-${effect}`]"
+      :class="[ns.b(), ns.m(type), ns.is('center', center), ns.is(effect)]"
       role="alert"
     >
       <el-icon
@@ -26,7 +26,7 @@
         <template v-if="closable">
           <div
             v-if="closeText"
-            :class="[ns.e('closebtn'), 'is-customed']"
+            :class="[ns.e('closebtn'), ns.is('customed')]"
             @click="close"
           >
             {{ closeText }}
@@ -68,10 +68,10 @@ export default defineComponent({
       () => TypeComponentsMap[props.type] || TypeComponentsMap['info']
     )
     const isBigIcon = computed(() =>
-      props.description || slots.default ? 'is-big' : ''
+      props.description || slots.default ? ns.is('big') : ''
     )
     const isBoldTitle = computed(() =>
-      props.description || slots.default ? 'is-bold' : ''
+      props.description || slots.default ? ns.is('bold') : ''
     )
 
     // methods
diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index 90f188568e..0de16f4385 100644
--- a/packages/components/button/src/button.vue
+++ b/packages/components/button/src/button.vue
@@ -2,16 +2,14 @@
   <button
     ref="buttonRef"
     :class="[
-      `${ns.b()}`,
-      `${ns.m(buttonType)}`,
-      `${ns.m(buttonSize)}`,
-      {
-        'is-disabled': buttonDisabled,
-        'is-loading': loading,
-        'is-plain': plain,
-        'is-round': round,
-        'is-circle': circle,
-      },
+      ns.b(),
+      ns.m(buttonType),
+      ns.m(buttonSize),
+      ns.is('disabled', buttonDisabled),
+      ns.is('loading', loading),
+      ns.is('plain', plain),
+      ns.is('round', round),
+      ns.is('circle', circle),
     ]"
     :disabled="buttonDisabled || loading"
     :autofocus="autofocus"
@@ -19,7 +17,7 @@
     :style="buttonStyle"
     @click="handleClick"
   >
-    <el-icon v-if="loading" class="is-loading">
+    <el-icon v-if="loading" :class="ns.is('loading')">
       <loading />
     </el-icon>
     <el-icon v-else-if="icon">
diff --git a/packages/components/card/src/card.ts b/packages/components/card/src/card.ts
index 4589b4f402..4d1b80db0e 100644
--- a/packages/components/card/src/card.ts
+++ b/packages/components/card/src/card.ts
@@ -14,7 +14,7 @@ export const cardProps = buildProps({
   },
   shadow: {
     type: String,
-    default: '',
+    default: 'always',
   },
 } as const)
 export type CardProps = ExtractPropTypes<typeof cardProps>
diff --git a/packages/components/card/src/card.vue b/packages/components/card/src/card.vue
index 7859d4d282..6977b82a12 100644
--- a/packages/components/card/src/card.vue
+++ b/packages/components/card/src/card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="[ns.b(), shadow ? `is-${shadow}-shadow` : 'is-always-shadow']">
+  <div :class="[ns.b(), ns.is(`${shadow}-shadow`)]">
     <div v-if="$slots.header || header" :class="ns.e('header')">
       <slot name="header">{{ header }}</slot>
     </div>
diff --git a/packages/components/check-tag/src/check-tag.vue b/packages/components/check-tag/src/check-tag.vue
index 83d1db8978..3453a7f27e 100644
--- a/packages/components/check-tag/src/check-tag.vue
+++ b/packages/components/check-tag/src/check-tag.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :class="[ns.b(), { 'is-checked': checked }]" @click="onChange">
+  <span :class="[ns.b(), ns.is('checked', checked)]" @click="onChange">
     <slot></slot>
   </span>
 </template>
diff --git a/packages/components/divider/src/divider.vue b/packages/components/divider/src/divider.vue
index 6f9cec5609..d0a1056e70 100644
--- a/packages/components/divider/src/divider.vue
+++ b/packages/components/divider/src/divider.vue
@@ -2,7 +2,7 @@
   <div :class="[ns.b(), ns.m(direction)]" :style="dividerStyle">
     <div
       v-if="$slots.default && direction !== 'vertical'"
-      :class="[ns.e('text'), `is-${contentPosition}`]"
+      :class="[ns.e('text'), ns.is(contentPosition)]"
     >
       <slot></slot>
     </div>
diff --git a/packages/components/link/src/link.vue b/packages/components/link/src/link.vue
index 6448b0f739..a151cbdeab 100644
--- a/packages/components/link/src/link.vue
+++ b/packages/components/link/src/link.vue
@@ -3,8 +3,8 @@
     :class="[
       ns.b(),
       type ? ns.m(type) : '',
-      disabled && 'is-disabled',
-      underline && !disabled && 'is-underline',
+      ns.is('disabled', disabled),
+      ns.is('underline', underline && !disabled),
     ]"
     :href="disabled || !href ? undefined : href"
     @click="handleClick"
diff --git a/packages/components/row/src/row.ts b/packages/components/row/src/row.ts
index a9fec8d26e..ab7bcfaf28 100644
--- a/packages/components/row/src/row.ts
+++ b/packages/components/row/src/row.ts
@@ -55,8 +55,8 @@ const Row = defineComponent({
         {
           class: [
             ns.b(),
-            props.justify !== 'start' ? `is-justify-${props.justify}` : '',
-            props.align !== 'top' ? `is-align-${props.align}` : '',
+            ns.is(`justify-${props.justify}`, props.justify !== 'start'),
+            ns.is(`align-${props.align}`, props.align !== 'top'),
           ],
           style: style.value,
         },
diff --git a/packages/components/switch/src/switch.vue b/packages/components/switch/src/switch.vue
index 0872632539..b5fdcde00b 100644
--- a/packages/components/switch/src/switch.vue
+++ b/packages/components/switch/src/switch.vue
@@ -23,7 +23,7 @@
       :class="[
         ns.e('label'),
         ns.em('label', 'left'),
-        !checked ? 'is-active' : '',
+        ns.is('active', !checked),
       ]"
     >
       <el-icon v-if="inactiveIcon"><component :is="inactiveIcon" /></el-icon>
@@ -40,15 +40,13 @@
         <template v-if="activeIcon || inactiveIcon">
           <el-icon
             v-if="activeIcon"
-            class="is-icon"
-            :class="checked ? 'is-show' : 'is-hide'"
+            :class="[ns.is('icon'), checked ? ns.is('show') : ns.is('hide')]"
           >
             <component :is="activeIcon" />
           </el-icon>
           <el-icon
             v-if="inactiveIcon"
-            class="is-icon"
-            :class="!checked ? 'is-show' : 'is-hide'"
+            :class="[ns.is('icon'), !checked ? ns.is('show') : ns.is('hide')]"
           >
             <component :is="inactiveIcon" />
           </el-icon>
@@ -56,16 +54,14 @@
         <template v-else-if="activeText || inactiveIcon">
           <span
             v-if="activeText"
-            class="is-text"
-            :class="checked ? 'is-show' : 'is-hide'"
+            :class="[ns.is('text'), checked ? ns.is('show') : ns.is('hide')]"
             :aria-hidden="!checked"
           >
             {{ activeText.substr(0, 1) }}
           </span>
           <span
             v-if="inactiveText"
-            class="is-text"
-            :class="!checked ? 'is-show' : 'is-hide'"
+            :class="[ns.is('text'), !checked ? ns.is('show') : ns.is('hide')]"
             :aria-hidden="checked"
           >
             {{ inactiveText.substr(0, 1) }}
@@ -73,7 +69,7 @@
         </template>
       </div>
       <div :class="ns.e('action')">
-        <el-icon v-if="loading" class="is-loading"><loading /></el-icon>
+        <el-icon v-if="loading" :class="ns.is('loading')"><loading /></el-icon>
       </div>
     </span>
     <span
@@ -81,7 +77,7 @@
       :class="[
         ns.e('label'),
         ns.em('label', 'right'),
-        checked ? 'is-active' : '',
+        ns.is('active', checked),
       ]"
     >
       <el-icon v-if="activeIcon"><component :is="activeIcon" /></el-icon>
@@ -134,8 +130,8 @@ export default defineComponent({
     const switchKls = computed(() => [
       ns.b(),
       ns.m(switchSize.value),
-      switchDisabled.value ? 'is-disabled' : '',
-      checked.value ? 'is-checked' : '',
+      ns.is('disabled', switchDisabled.value),
+      ns.is('checked', checked.value),
     ])
 
     watch(
diff --git a/packages/components/timeline/src/timeline-item.vue b/packages/components/timeline/src/timeline-item.vue
index da22e75745..f33c48a882 100644
--- a/packages/components/timeline/src/timeline-item.vue
+++ b/packages/components/timeline/src/timeline-item.vue
@@ -7,7 +7,7 @@
         ns.e('node'),
         ns.em('node', size || ''),
         ns.em('node', type || ''),
-        hollow ? 'is-hollow' : '',
+        ns.is('hollow', hollow),
       ]"
       :style="{
         backgroundColor: color,
@@ -24,7 +24,7 @@
     <div :class="ns.e('wrapper')">
       <div
         v-if="!hideTimestamp && placement === 'top'"
-        :class="[ns.e('timestamp'), 'is-top']"
+        :class="[ns.e('timestamp'), ns.is('top')]"
       >
         {{ timestamp }}
       </div>
@@ -35,7 +35,7 @@
 
       <div
         v-if="!hideTimestamp && placement === 'bottom'"
-        :class="[ns.e('timestamp'), 'is-bottom']"
+        :class="[ns.e('timestamp'), ns.is('bottom')]"
       >
         {{ timestamp }}
       </div>