From b80cb60dad0484a97533a22e50ade3fad3fc08e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B8=83=E5=81=B6=E4=BB=80=E4=B9=88=E7=9A=84=E5=B0=B1?=
 =?UTF-8?q?=E6=98=AF=E5=B8=83=E5=81=B6?= <painterpuppets@gmail.com>
Date: Wed, 11 Oct 2023 22:29:01 +0800
Subject: [PATCH] chore: standardize css class name (#117)

---
 .stylelintrc.js                               |  5 +-
 src/components/Banner/index.module.scss       |  2 +-
 src/components/Banner/index.tsx               |  2 +-
 src/components/Card/HashCard/index.tsx        | 18 ++--
 src/components/Card/HashCard/styled.tsx       | 12 +--
 src/components/Card/ItemCard/index.tsx        |  4 +-
 src/components/Card/ItemCard/styled.tsx       |  6 +-
 src/components/Card/OverviewCard/index.tsx    | 14 ++--
 src/components/Card/OverviewCard/styled.tsx   | 16 ++--
 src/components/Card/TitleCard/index.tsx       |  4 +-
 src/components/Card/TitleCard/styled.tsx      |  4 +-
 src/components/DecimalCapacity/index.tsx      |  2 +-
 src/components/DecimalCapacity/styled.tsx     |  6 +-
 src/components/Dropdown/ChainType/index.tsx   |  6 +-
 src/components/Dropdown/ChainType/styled.tsx  |  6 +-
 src/components/Dropdown/Language/index.tsx    |  6 +-
 src/components/Dropdown/Language/styled.tsx   |  6 +-
 src/components/Footer/index.tsx               | 12 +--
 src/components/Footer/styled.tsx              | 11 +--
 .../Header/BlockchainComp/index.tsx           | 20 ++---
 .../Header/BlockchainComp/styled.tsx          | 28 +++----
 src/components/Header/LanguageComp/index.tsx  | 16 ++--
 src/components/Header/LanguageComp/styled.tsx | 26 +++---
 src/components/Header/MenusComp/index.tsx     | 10 +--
 src/components/Header/MenusComp/styled.tsx    |  2 +-
 src/components/Header/index.module.scss       |  4 +-
 src/components/Header/index.tsx               | 10 +--
 src/components/Header/styled.tsx              | 12 +--
 src/components/Loading/SmallLoading/index.tsx |  2 +-
 .../Loading/SmallLoading/styled.tsx           |  2 +-
 src/components/Pagination/index.tsx           | 18 ++--
 src/components/Pagination/styled.tsx          | 16 ++--
 .../PaginationWithRear/styles.module.scss     |  4 +-
 src/components/Script/index.tsx               |  6 +-
 src/components/Script/styled.tsx              |  6 +-
 src/components/Table/index.tsx                |  6 +-
 src/components/Table/styled.tsx               |  6 +-
 src/components/Text/index.module.scss         |  2 +-
 src/components/Text/styled.tsx                |  2 +-
 src/components/Toast/index.tsx                |  2 +-
 src/components/Toast/styled.tsx               |  6 +-
 .../ComparedToMaxTooltip/styles.module.scss   |  5 +-
 src/components/Transaction/Cellbase/index.tsx |  6 +-
 .../Transaction/Cellbase/styled.tsx           |  6 +-
 .../TransactionCellArrow/index.tsx            |  2 +-
 .../TransactionItemCell/index.tsx             | 10 +--
 .../TransactionItemCell/styled.tsx            | 12 +--
 .../TransactionItemCellList/index.tsx         |  2 +-
 .../TransactionItemCellList/styled.tsx        |  2 +-
 src/components/TransactionItem/index.tsx      | 12 +--
 src/components/TransactionItem/styled.tsx     | 32 ++-----
 src/index.css                                 |  3 +
 src/pages/Address/AddressComp.tsx             | 10 +--
 src/pages/Address/styled.tsx                  | 10 +--
 src/pages/Address/styles.module.scss          |  2 +
 src/pages/BlockDetail/BlockComp.tsx           |  8 +-
 src/pages/BlockDetail/styled.tsx              |  8 +-
 src/pages/BlockList/index.tsx                 |  2 +-
 src/pages/BlockList/styled.tsx                |  2 +-
 .../ExportTransactions/styles.module.scss     | 21 ++++-
 .../Home/AverageBlockTimeChart/index.tsx      |  2 +-
 .../Home/AverageBlockTimeChart/styled.tsx     |  2 +-
 src/pages/Home/HashRateChart/index.tsx        |  2 +-
 src/pages/Home/HashRateChart/styled.tsx       |  2 +-
 src/pages/Home/TableCard/index.tsx            | 32 +++----
 src/pages/Home/TableCard/styled.tsx           | 32 +++----
 src/pages/Home/index.module.scss              | 46 +++++-----
 src/pages/Home/index.tsx                      | 44 +++++-----
 src/pages/Home/styled.tsx                     | 37 +++-----
 src/pages/NervosDao/DaoOverview/index.tsx     | 38 ++++-----
 src/pages/NervosDao/DaoOverview/styled.tsx    | 24 +++---
 src/pages/NervosDao/index.tsx                 |  6 +-
 src/pages/NervosDao/styled.tsx                | 28 +------
 .../NftCollectionInfo/styles.module.scss      |  1 +
 src/pages/NftCollections/styles.module.scss   |  2 +
 src/pages/Script/ScriptsComp.tsx              |  4 +-
 src/pages/Script/styles.module.scss           |  8 +-
 src/pages/SearchFail/index.tsx                |  4 +-
 src/pages/SearchFail/styled.tsx               |  4 +-
 src/pages/SimpleUDT/index.tsx                 |  4 +-
 src/pages/SimpleUDT/styled.tsx                | 84 +------------------
 src/pages/SimpleUDT/styles.module.scss        |  1 +
 src/pages/StatisticsChart/common/index.tsx    |  4 +-
 src/pages/StatisticsChart/common/styled.tsx   |  4 +-
 src/pages/StatisticsChart/index.tsx           | 10 +--
 src/pages/StatisticsChart/styled.tsx          | 11 +--
 src/pages/Tokens/index.tsx                    | 18 ++--
 src/pages/Tokens/styled.tsx                   | 16 ++--
 .../Transaction/TransactionCell/index.tsx     | 26 +++---
 .../Transaction/TransactionCell/styled.tsx    | 28 +++----
 .../Transaction/TransactionCellList/index.tsx |  6 +-
 .../TransactionCellList/styled.tsx            |  6 +-
 .../TransactionCellScript/index.tsx           | 10 +--
 .../TransactionCellScript/styled.tsx          | 10 +--
 src/pages/Transaction/TransactionComp.tsx     | 22 ++---
 .../Transaction/TransactionReward/index.tsx   |  6 +-
 .../Transaction/TransactionReward/styled.tsx  |  6 +-
 src/pages/Transaction/styled.tsx              | 22 ++---
 98 files changed, 498 insertions(+), 617 deletions(-)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index d30228a72..ce97e1937 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -5,9 +5,8 @@ module.exports = {
   extends: ['stylelint-config-standard'],
   rules: {
     'no-empty-source': null,
-    // Due to the large number of non-standard names previously used, it is not possible to quickly correct all names,
-    // so these rules have been temporarily disabled.
-    'selector-class-pattern': null,
+    // Based on the discussion in https://github.com/Magickbase/ckb-explorer-public-issues/issues/442, we have decided to use lower camel case.
+    'selector-class-pattern': "^[a-z][a-zA-Z0-9]+$",
     'selector-id-pattern': null,
     'custom-property-pattern': null,
     // This rule provides little benefit relative to the cost of implementing it, so it has been disabled.
diff --git a/src/components/Banner/index.module.scss b/src/components/Banner/index.module.scss
index 88bd18fa2..3df43da4e 100644
--- a/src/components/Banner/index.module.scss
+++ b/src/components/Banner/index.module.scss
@@ -1,6 +1,6 @@
 $backgroudColor: #232323;
 
-.Root {
+.root {
   width: 100%;
   background-color: $backgroudColor;
   height: 200px;
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
index f4272ebf7..49017fcaf 100644
--- a/src/components/Banner/index.tsx
+++ b/src/components/Banner/index.tsx
@@ -1,3 +1,3 @@
 import styles from './index.module.scss'
 
-export default () => <div className={styles.Root} />
+export default () => <div className={styles.root} />
diff --git a/src/components/Card/HashCard/index.tsx b/src/components/Card/HashCard/index.tsx
index a8959fa30..939b54069 100644
--- a/src/components/Card/HashCard/index.tsx
+++ b/src/components/Card/HashCard/index.tsx
@@ -74,21 +74,21 @@ export default ({
 
   return (
     <HashCardPanel isColumn={!!iconUri}>
-      <div className="hash__card__content__panel" id="hash_content">
+      <div className="hashCardContentPanel" id="hash_content">
         {iconUri && isMobile ? (
           <div>
-            <img className="hash__icon" src={iconUri} alt="hash icon" />
-            <div className="hash__title">{title}</div>
+            <img className="hashIcon" src={iconUri} alt="hash icon" />
+            <div className="hashTitle">{title}</div>
           </div>
         ) : (
           <>
-            {iconUri && <img className="hash__icon" src={iconUri} alt="hash icon" />}
-            <div className="hash__title">{title}</div>
+            {iconUri && <img className="hashIcon" src={iconUri} alt="hash icon" />}
+            <div className="hashTitle">{title}</div>
           </>
         )}
 
         <div className={styles.hashCardHeaderRight}>
-          <div className="hash__card__hash__content">
+          <div className="hashCardHashContent">
             {loading ? (
               <LoadingPanel>
                 <SmallLoading />
@@ -101,9 +101,9 @@ export default ({
               </div>
             )}
             <SimpleButton
-              className="hash__copy_icon"
+              className="hashCopyIcon"
               onClick={() => {
-                copyElementValue(document.getElementById('hash__value'))
+                copyElementValue(document.getElementById('hashValue'))
                 setToast({ message: i18n.t('common.copied') })
               }}
             >
@@ -140,7 +140,7 @@ export default ({
 
         {specialAddress && (
           <Tooltip title={i18n.t('address.vesting_tooltip')} placement={isMobile ? 'bottomRight' : 'bottom'}>
-            <Link to={`/address/${specialAddress}`} className="hash__vesting">
+            <Link to={`/address/${specialAddress}`} className="hashVesting">
               {i18n.t('address.vesting')}
             </Link>
           </Tooltip>
diff --git a/src/components/Card/HashCard/styled.tsx b/src/components/Card/HashCard/styled.tsx
index f16ae9dbd..6cd290bfb 100644
--- a/src/components/Card/HashCard/styled.tsx
+++ b/src/components/Card/HashCard/styled.tsx
@@ -17,7 +17,7 @@ export const HashCardPanel = styled.div`
     box-shadow: 1px 1px 3px 0 #dfdfdf;
   }
 
-  .hash__card__content__panel {
+  .hashCardContentPanel {
     width: 100%;
     height: 80px;
     display: flex;
@@ -34,13 +34,13 @@ export const HashCardPanel = styled.div`
     }
   }
 
-  .hash__icon {
+  .hashIcon {
     width: 40px;
     height: 40px;
     margin-right: 8px;
   }
 
-  .hash__title {
+  .hashTitle {
     font-size: 24px;
     font-weight: 600;
     color: #000;
@@ -51,7 +51,7 @@ export const HashCardPanel = styled.div`
     }
   }
 
-  .hash__card__hash__content {
+  .hashCardHashContent {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -74,7 +74,7 @@ export const HashCardPanel = styled.div`
     }
   }
 
-  .hash__copy_icon {
+  .hashCopyIcon {
     cursor: pointer;
     margin-left: 20px;
     display: flex;
@@ -103,7 +103,7 @@ export const HashCardPanel = styled.div`
     bottom: -30px;
   }
 
-  .hash__vesting {
+  .hashVesting {
     color: ${props => props.theme.primary};
     margin-left: 12px;
     margin-top: 6px;
diff --git a/src/components/Card/ItemCard/index.tsx b/src/components/Card/ItemCard/index.tsx
index c2acb3d22..c50f29dd2 100644
--- a/src/components/Card/ItemCard/index.tsx
+++ b/src/components/Card/ItemCard/index.tsx
@@ -22,8 +22,8 @@ export function ItemCard<T>({
       <ItemContentPanel>
         {items.map((item, index) => (
           <ItemDetailPanel key={item.title} hideLine={index === items.length - 1}>
-            <div className="item__detail__title">{item.title}</div>
-            <div className="item__detail__value">{item.render(data, index)}</div>
+            <div className="itemDetailTitle">{item.title}</div>
+            <div className="itemDetailValue">{item.render(data, index)}</div>
           </ItemDetailPanel>
         ))}
       </ItemContentPanel>
diff --git a/src/components/Card/ItemCard/styled.tsx b/src/components/Card/ItemCard/styled.tsx
index c57aac7fa..43a836b93 100644
--- a/src/components/Card/ItemCard/styled.tsx
+++ b/src/components/Card/ItemCard/styled.tsx
@@ -29,14 +29,14 @@ export const ItemDetailPanel = styled.div`
   border-bottom: solid #f0f0f0;
   border-bottom-width: ${({ hideLine }: { hideLine: boolean }) => (hideLine ? '0' : '1px')};
 
-  .item__detail__title {
+  .itemDetailTitle {
     color: #666;
     width: 100%;
     margin-left: 0;
     line-height: 1;
   }
 
-  .item__detail__value {
+  .itemDetailValue {
     display: flex;
     width: 100%;
     margin-left: 0;
@@ -54,7 +54,7 @@ export const ItemDetailPanel = styled.div`
     }
   }
 
-  .block_pointer {
+  .blockPointer {
     cursor: pointer;
   }
 `
diff --git a/src/components/Card/OverviewCard/index.tsx b/src/components/Card/OverviewCard/index.tsx
index 36f02b14a..e68d470d3 100644
--- a/src/components/Card/OverviewCard/index.tsx
+++ b/src/components/Card/OverviewCard/index.tsx
@@ -24,18 +24,18 @@ const handleOverviewItems = (items: OverviewItemData[], isMobile: boolean) => ({
 export const OverviewItem = ({ item, hideLine }: { item: OverviewItemData; hideLine: boolean }) =>
   item ? (
     <OverviewItemPanel hideLine={hideLine} hasIcon={item.icon} isAsset={item.isAsset}>
-      <div className="overview_item__title__panel">
+      <div className="overviewItemTitlePanel">
         {item.icon && (
-          <div className="overview_item__icon">
+          <div className="overviewItemIcon">
             <img src={item.icon} alt="item icon" />
           </div>
         )}
-        <div className="overview_item__title">
+        <div className="overviewItemTitle">
           <span>{item.title}</span>
           {item.tooltip && <HelpTip title={item.tooltip} />}
         </div>
       </div>
-      <div className={classNames('overview_item__value', { filled: item.filled }, item.contentWrapperClass)}>
+      <div className={classNames('overviewItemValue', { filled: item.filled }, item.contentWrapperClass)}>
         {isValidElement(item.content) ? item.content : <span>{item.content}</span>}
         {item.valueTooltip && <HelpTip title={item.valueTooltip} />}
       </div>
@@ -60,9 +60,9 @@ export default ({
   return (
     <OverviewCardPanel hideShadow={hideShadow}>
       {titleCard}
-      <div className="overview__separate" />
+      <div className="overviewSeparate" />
       <OverviewContentPanel length={leftItems.length}>
-        <div className="overview_content__left_items">
+        <div className="overviewContentLeftItems">
           {leftItems.map((item, index) =>
             item ? (
               <OverviewItem
@@ -74,7 +74,7 @@ export default ({
           )}
         </div>
         {!isLG && <span />}
-        <div className="overview_content__right_items">
+        <div className="overviewContentRightItems">
           {rightItems.map((item, index) => (
             <OverviewItem key={items.indexOf(item)} item={item} hideLine={index === rightItems.length - 1} />
           ))}
diff --git a/src/components/Card/OverviewCard/styled.tsx b/src/components/Card/OverviewCard/styled.tsx
index 92e621dce..bf024be01 100644
--- a/src/components/Card/OverviewCard/styled.tsx
+++ b/src/components/Card/OverviewCard/styled.tsx
@@ -20,7 +20,7 @@ export const OverviewCardPanel = styled.div`
       padding: 0;
     `};
 
-  .overview__separate {
+  .overviewSeparate {
     background: #eaeaea;
     width: 100%;
     height: 1px;
@@ -66,7 +66,7 @@ export const OverviewContentPanel = styled.div`
     }
   }
 
-  .overview_content__left_items {
+  .overviewContentLeftItems {
     margin-right: 45px;
     display: flex;
     flex: 1;
@@ -79,7 +79,7 @@ export const OverviewContentPanel = styled.div`
     }
   }
 
-  .overview_content__right_items {
+  .overviewContentRightItems {
     margin-left: 45px;
     display: flex;
     flex: 1;
@@ -129,7 +129,7 @@ export const OverviewItemPanel = styled.div`
     }
   }
 
-  .overview_item__title__panel {
+  .overviewItemTitlePanel {
     display: flex;
     align-items: center;
     flex-shrink: 0;
@@ -144,7 +144,7 @@ export const OverviewItemPanel = styled.div`
     }
   }
 
-  .overview_item__icon {
+  .overviewItemIcon {
     width: 48px;
     height: 48px;
     margin-right: 10px;
@@ -159,7 +159,7 @@ export const OverviewItemPanel = styled.div`
     }
   }
 
-  .overview_item__title {
+  .overviewItemTitle {
     display: flex;
     align-items: center;
     font-size: 16px;
@@ -179,7 +179,7 @@ export const OverviewItemPanel = styled.div`
     }
   }
 
-  .overview_item__value {
+  .overviewItemValue {
     margin-left: 15px;
     display: flex;
     align-items: center;
@@ -223,7 +223,7 @@ export const OverviewItemPanel = styled.div`
     }
   }
 
-  .block_pointer {
+  .blockPointer {
     cursor: pointer;
   }
 `
diff --git a/src/components/Card/TitleCard/index.tsx b/src/components/Card/TitleCard/index.tsx
index fe4d9b1ff..5bc020e3e 100644
--- a/src/components/Card/TitleCard/index.tsx
+++ b/src/components/Card/TitleCard/index.tsx
@@ -15,7 +15,7 @@ export default ({
   rearClassName?: string
 }) => (
   <TitleCardPanel isSingle={isSingle} className={className} hasRear={!!rear}>
-    <div className="title__card__content">{title}</div>
-    {rear ? <div className={classNames('title__card__rear', rearClassName)}>{rear}</div> : null}
+    <div className="titleCardContent">{title}</div>
+    {rear ? <div className={classNames('titleCardRear', rearClassName)}>{rear}</div> : null}
   </TitleCardPanel>
 )
diff --git a/src/components/Card/TitleCard/styled.tsx b/src/components/Card/TitleCard/styled.tsx
index 8e057da79..13aa1efa8 100644
--- a/src/components/Card/TitleCard/styled.tsx
+++ b/src/components/Card/TitleCard/styled.tsx
@@ -22,7 +22,7 @@ export const TitleCardPanel = styled.div`
     padding-left: ${(props: TitleCardPanelProps) => (props.isSingle ? '20px' : '0')};
   }
 
-  .title__card__content {
+  .titleCardContent {
     color: #000;
     font-size: 20px;
     font-weight: 600;
@@ -34,7 +34,7 @@ export const TitleCardPanel = styled.div`
     }
   }
 
-  .title__card__rear {
+  .titleCardRear {
     display: flex;
     flex-direction: row;
     align-items: center;
diff --git a/src/components/DecimalCapacity/index.tsx b/src/components/DecimalCapacity/index.tsx
index e87a67b77..61f4ba263 100644
--- a/src/components/DecimalCapacity/index.tsx
+++ b/src/components/DecimalCapacity/index.tsx
@@ -41,7 +41,7 @@ export default ({
           {zeros}
         </DecimalZerosPanel>
       )}
-      {!hideUnit && <div className="decimal__unit monospace">{i18n.t('common.ckb_unit')}</div>}
+      {!hideUnit && <div className="decimalUnit monospace">{i18n.t('common.ckb_unit')}</div>}
     </DecimalPanel>
   )
 }
diff --git a/src/components/DecimalCapacity/styled.tsx b/src/components/DecimalCapacity/styled.tsx
index 2c4dc11f4..35ed1906c 100644
--- a/src/components/DecimalCapacity/styled.tsx
+++ b/src/components/DecimalCapacity/styled.tsx
@@ -5,11 +5,7 @@ export const DecimalPanel = styled.div`
   justify-content: flex-end;
   align-items: flex-end;
 
-  .decimal__zeros {
-    margin-bottom: 1px;
-  }
-
-  .decimal__unit {
+  .decimalUnit {
     margin-left: 5px;
 
     @media (max-width: 750px) {
diff --git a/src/components/Dropdown/ChainType/index.tsx b/src/components/Dropdown/ChainType/index.tsx
index 7d68d04c4..f2971fe4e 100644
--- a/src/components/Dropdown/ChainType/index.tsx
+++ b/src/components/Dropdown/ChainType/index.tsx
@@ -10,11 +10,11 @@ export default ({ setShow, left, top }: { setShow: Function; left: number; top:
 
   return (
     <ChainTypePanel left={left} top={top} onMouseLeave={hideDropdown}>
-      <SimpleButton className={`chain__type__${isMainnet() ? 'selected' : 'normal'}`} onClick={hideDropdown}>
+      <SimpleButton className={`chainType${isMainnet() ? 'Selected' : 'Normal'}`} onClick={hideDropdown}>
         <a href={MAINNET_URL}>{`${ChainName.Mainnet} mainnet`}</a>
       </SimpleButton>
-      <div className="chain__type__separate" />
-      <SimpleButton className={`chain__type__${!isMainnet() ? 'selected' : 'normal'}`} onClick={hideDropdown}>
+      <div className="chainTypeSeparate" />
+      <SimpleButton className={`chainType${!isMainnet() ? 'Selected' : 'Normal'}`} onClick={hideDropdown}>
         <a href={TESTNET_URL}>{`${ChainName.Testnet} testnet`}</a>
       </SimpleButton>
     </ChainTypePanel>
diff --git a/src/components/Dropdown/ChainType/styled.tsx b/src/components/Dropdown/ChainType/styled.tsx
index 58d73aee2..5e26d6d1a 100644
--- a/src/components/Dropdown/ChainType/styled.tsx
+++ b/src/components/Dropdown/ChainType/styled.tsx
@@ -27,7 +27,7 @@ export const ChainTypePanel = styled.div`
   left: ${(props: { left: number; top: number }) => props.left}px;
   top: ${(props: { left: number; top: number }) => props.top}px;
 
-  .chain__type__selected {
+  .chainTypeSelected {
     width: 94%;
     font-size: 12px;
     height: 33px;
@@ -49,7 +49,7 @@ export const ChainTypePanel = styled.div`
     }
   }
 
-  .chain__type__normal {
+  .chainTypeNormal {
     width: 94%;
     height: 33px;
     font-size: 12px;
@@ -70,7 +70,7 @@ export const ChainTypePanel = styled.div`
     }
   }
 
-  .chain__type__separate {
+  .chainTypeSeparate {
     width: 88%;
     height: 0.5px;
     border: solid 0.5px #c3c3c3;
diff --git a/src/components/Dropdown/Language/index.tsx b/src/components/Dropdown/Language/index.tsx
index 4b1b4d7d3..b1c4e3971 100644
--- a/src/components/Dropdown/Language/index.tsx
+++ b/src/components/Dropdown/Language/index.tsx
@@ -19,11 +19,11 @@ export default ({ setShow, left, top }: { setShow: Function; left: number; top:
   }
   return (
     <LanguagePanel left={left} top={top} onMouseLeave={hideDropdown}>
-      <SimpleButton className="language__selected" onClick={hideDropdown}>
+      <SimpleButton className="languageSelected" onClick={hideDropdown}>
         {languageText(currentLanguage())}
       </SimpleButton>
-      <div className="language__separate" />
-      <SimpleButton className="language__normal" onClick={handleLanguage}>
+      <div className="languageSeparate" />
+      <SimpleButton className="languageNormal" onClick={handleLanguage}>
         {languageText(currentLanguage(), true)}
       </SimpleButton>
     </LanguagePanel>
diff --git a/src/components/Dropdown/Language/styled.tsx b/src/components/Dropdown/Language/styled.tsx
index 2e448a3e1..13979bd9f 100644
--- a/src/components/Dropdown/Language/styled.tsx
+++ b/src/components/Dropdown/Language/styled.tsx
@@ -16,7 +16,7 @@ export const LanguagePanel = styled.div`
   left: ${(props: { left: number; top: number }) => props.left}px;
   top: ${(props: { left: number; top: number }) => props.top}px;
 
-  .language__selected {
+  .languageSelected {
     width: 90%;
     font-size: 12px;
     height: 33px;
@@ -31,7 +31,7 @@ export const LanguagePanel = styled.div`
     }
   }
 
-  .language__normal {
+  .languageNormal {
     width: 90%;
     font-size: 12px;
     height: 33px;
@@ -46,7 +46,7 @@ export const LanguagePanel = styled.div`
     }
   }
 
-  .language__separate {
+  .languageSeparate {
     width: 80%;
     height: 0.5px;
     border: solid 0.5px #c3c3c3;
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 986be0778..06053853b 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -127,21 +127,21 @@ export default memo(() => {
   return (
     <FooterPanel>
       <FooterMenuPanel>
-        <div className="footer__foundation">
-          <div className="footer__title">{Footers[0].name}</div>
+        <div className="footerFoundation">
+          <div className="footerTitle">{Footers[0].name}</div>
           {Footers[0].items.map((item: any) => (
             <FooterItem item={item} key={item.label} />
           ))}
         </div>
-        <div className="footer__developer">
-          <div className="footer__title">{Footers[1].name}</div>
+        <div className="footerDeveloper">
+          <div className="footerTitle">{Footers[1].name}</div>
           {Footers[1].items
             .filter(item => item.label !== undefined)
             .map((item: any) => (
               <FooterItem item={item} key={item.label} />
             ))}
         </div>
-        <div className="footer__community">
+        <div className="footerCommunity">
           {isMobile ? (
             <div>
               {Footers[2].items.map((item: any) => (
@@ -169,7 +169,7 @@ export default memo(() => {
           )}
         </div>
       </FooterMenuPanel>
-      <div className="footer__copyright">
+      <div className="footerCopyright">
         <span>{`Copyright © ${getCurrentYear()} Nervos Foundation. `}</span>
         <span>All Rights Reserved.</span>
       </div>
diff --git a/src/components/Footer/styled.tsx b/src/components/Footer/styled.tsx
index 53f781269..8eb544c9c 100644
--- a/src/components/Footer/styled.tsx
+++ b/src/components/Footer/styled.tsx
@@ -10,7 +10,7 @@ export const FooterPanel = styled.div`
     align-items: flex-start;
   }
 
-  .footer__copyright {
+  .footerCopyright {
     height: 15px;
     font-size: 12px;
     color: #acacac;
@@ -44,12 +44,12 @@ export const FooterMenuPanel = styled.div`
     margin-left: 30px;
   }
 
-  .footer__foundation {
+  .footerFoundation {
     display: flex;
     flex-direction: column;
   }
 
-  .footer__developer {
+  .footerDeveloper {
     display: flex;
     flex-direction: column;
     margin-left: 280px;
@@ -72,7 +72,7 @@ export const FooterMenuPanel = styled.div`
     }
   }
 
-  .footer__community {
+  .footerCommunity {
     display: flex;
     flex-direction: column;
     margin-left: 280px;
@@ -105,7 +105,7 @@ export const FooterMenuPanel = styled.div`
     }
   }
 
-  .footer__title {
+  .footerTitle {
     font-size: 28px;
     font-weight: bold;
     color: #fff;
@@ -147,6 +147,7 @@ export const FooterImageItemPanel = styled.a`
     color: ${props => props.theme.primary};
 
     & > svg {
+      /* stylelint-disable-next-line selector-class-pattern */
       .app-icon {
         fill: ${props => props.theme.primary};
       }
diff --git a/src/components/Header/BlockchainComp/index.tsx b/src/components/Header/BlockchainComp/index.tsx
index 22779bd71..274049728 100644
--- a/src/components/Header/BlockchainComp/index.tsx
+++ b/src/components/Header/BlockchainComp/index.tsx
@@ -50,14 +50,14 @@ const BlockchainDropdown: FC<{ nodeVersion: string }> = ({ nodeVersion }) => {
       }}
     >
       <SimpleButton
-        className="header__blockchain__flag"
+        className="headerBlockchainFlag"
         onMouseOver={() => {
           setShowChainType(true)
         }}
       >
-        <div className="header__blockchain__content_panel">
+        <div className="headerBlockchainContentPanel">
           <div
-            className="header__blockchain__content"
+            className="headerBlockchainContent"
             style={{
               textTransform: 'uppercase',
             }}
@@ -66,7 +66,7 @@ const BlockchainDropdown: FC<{ nodeVersion: string }> = ({ nodeVersion }) => {
           </div>
           <img src={getDropdownIcon(showChainType)} alt="dropdown icon" />
         </div>
-        <div className="header__blockchain__node__version">{handleVersion(nodeVersion)}</div>
+        <div className="headerBlockchainNodeVersion">{handleVersion(nodeVersion)}</div>
       </SimpleButton>
       {showChainType && <ChainDropdown setShow={setShowChainType} left={chainTypeLeft} top={chainTypeTop} />}
     </HeaderBlockchainPanel>
@@ -86,28 +86,28 @@ const BlockchainMenu: FC<{ nodeVersion: string }> = ({ nodeVersion }) => {
   return (
     <MobileSubMenuPanel showSubMenu={false}>
       <SimpleButton
-        className="mobile__menus__main__item"
+        className="mobileMenusMainItem"
         onClick={() => {
           setShowSubMenu(!showSubMenu)
         }}
       >
         <div
-          className="mobile__menus__main__item__content__highlight"
+          className="mobileMenusMainItemContentHighlight"
           style={{
             textTransform: 'uppercase',
           }}
         >
           {isMainnet() ? ChainName.Mainnet : ChainName.Testnet}
         </div>
-        <img className="mobile__menus__main__item__icon" alt="mobile chain type icon" src={chainTypeIcon()} />
+        <img className="mobileMenusMainItemIcon" alt="mobile chain type icon" src={chainTypeIcon()} />
       </SimpleButton>
-      <div className="blockchain__mobile__node__version">{handleVersion(nodeVersion)}</div>
+      <div className="blockchainMobileNodeVersion">{handleVersion(nodeVersion)}</div>
       {showSubMenu && (
         <>
-          <a className="mobile__menus__sub__item" href={MAINNET_URL}>
+          <a className="mobileMenusSubItem" href={MAINNET_URL}>
             {`${ChainName.Mainnet} mainnet`}
           </a>
-          <a className="mobile__menus__sub__item" href={TESTNET_URL}>
+          <a className="mobileMenusSubItem" href={TESTNET_URL}>
             {`${ChainName.Testnet} testnet`}
           </a>
         </>
diff --git a/src/components/Header/BlockchainComp/styled.tsx b/src/components/Header/BlockchainComp/styled.tsx
index b9c165012..70d42b1a1 100644
--- a/src/components/Header/BlockchainComp/styled.tsx
+++ b/src/components/Header/BlockchainComp/styled.tsx
@@ -22,18 +22,18 @@ export const HeaderBlockchainPanel = styled.div`
 
   color: ${props => props.theme.secondary};
 
-  .header__blockchain__flag {
+  .headerBlockchainFlag {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
   }
 
-  .header__blockchain__content_panel {
+  .headerBlockchainContentPanel {
     display: flex;
     justify-content: space-between;
     align-items: center;
 
-    .header__blockchain__content {
+    .headerBlockchainContent {
       height: 14px;
       font-size: 14px;
       cursor: pointer;
@@ -47,7 +47,7 @@ export const HeaderBlockchainPanel = styled.div`
     }
   }
 
-  .header__blockchain__node__version {
+  .headerBlockchainNodeVersion {
     font-size: 8px;
     margin-top: 2px;
     cursor: pointer;
@@ -61,32 +61,32 @@ export const MobileSubMenuPanel = styled.div`
   align-items: flex-start;
   margin: 22px 56px 0;
 
-  .mobile__menus__main__item {
+  .mobileMenusMainItem {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
   }
 
-  .mobile__menus__main__item__content {
+  .mobileMenusMainItemContent {
     color: ${(props: { showSubMenu: boolean; theme: any }) => (props.showSubMenu ? props.theme.primary : 'white')};
   }
 
-  .mobile__menus__main__item__content__highlight {
+  .mobileMenusMainItemContentHighlight {
     color: ${props => props.theme.primary};
   }
 
-  .mobile__menus__main__item__icon {
+  .mobileMenusMainItemIcon {
     width: 7.9px;
     height: 4.8px;
   }
 
-  .blockchain__mobile__node__version {
+  .blockchainMobileNodeVersion {
     font-size: 8px;
     color: ${props => props.theme.primary};
   }
 
-  .mobile__menus__sub__item {
+  .mobileMenusSubItem {
     width: 300px;
     padding: 12px 24px 8px;
     font-size: 12px;
@@ -103,18 +103,18 @@ export const MobileSubMenuPanel = styled.div`
     color: white;
   }
 
-  .mobile__menus__sub__icon {
+  .mobileMenusSubIcon {
     width: 20px;
     height: 20px;
   }
 
-  .mobile__menus__sub__title {
+  .mobileMenusSubTitle {
     font-size: 12px;
     margin-left: 8px;
     margin-right: 16px;
   }
 
-  .mobile__menus__sub__tag {
+  .mobileMenusSubTag {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -126,7 +126,7 @@ export const MobileSubMenuPanel = styled.div`
     }
   }
 
-  .mobile__menus__sub__memo {
+  .mobileMenusSubMemo {
     font-size: 12px;
     color: #888;
     width: 100%;
diff --git a/src/components/Header/LanguageComp/index.tsx b/src/components/Header/LanguageComp/index.tsx
index 0665a6f5e..0db7afa8d 100644
--- a/src/components/Header/LanguageComp/index.tsx
+++ b/src/components/Header/LanguageComp/index.tsx
@@ -41,13 +41,13 @@ export const LanguageDropdown = () => {
       }}
     >
       <SimpleButton
-        className="header__language__flag"
+        className="headerLanguageFlag"
         onMouseOver={() => {
           setShowLanguage(true)
         }}
       >
-        <div className="header__language__content_panel">
-          <div className="header__language__content">{languageText(currentLanguage())}</div>
+        <div className="headerLanguageContentPanel">
+          <div className="headerLanguageContent">{languageText(currentLanguage())}</div>
           <img src={getDropdownIcon(showLanguage)} alt="dropdown icon" />
         </div>
       </SimpleButton>
@@ -62,16 +62,16 @@ export const LanguageMenu: FC<{ hideMobileMenu: () => void }> = ({ hideMobileMen
   return (
     <MobileSubMenuPanel showSubMenu={false}>
       <SimpleButton
-        className="mobile__menus__main__item"
+        className="mobileMenusMainItem"
         onClick={() => {
           setShowSubMenu(!showSubMenu)
         }}
       >
-        <div className="mobile__menus__main__item__content">
+        <div className="mobileMenusMainItemContent">
           {currentLanguage() === 'en' ? i18n.t('navbar.language_en') : i18n.t('navbar.language_zh')}
         </div>
         <img
-          className="mobile__menus__main__item__icon"
+          className="mobileMenusMainItemIcon"
           alt="mobile language icon"
           src={showSubMenu ? WhiteDropUpIcon : WhiteDropdownIcon}
         />
@@ -79,7 +79,7 @@ export const LanguageMenu: FC<{ hideMobileMenu: () => void }> = ({ hideMobileMen
       {showSubMenu && (
         <>
           <SimpleButton
-            className="mobile__menus__sub__item"
+            className="mobileMenusSubItem"
             onClick={() => {
               hideMobileMenu()
             }}
@@ -87,7 +87,7 @@ export const LanguageMenu: FC<{ hideMobileMenu: () => void }> = ({ hideMobileMen
             {currentLanguage() === 'en' ? i18n.t('navbar.language_en') : i18n.t('navbar.language_zh')}
           </SimpleButton>
           <SimpleButton
-            className="mobile__menus__sub__item"
+            className="mobileMenusSubItem"
             onClick={() => {
               changeLanguage(currentLanguage() === 'en' ? 'zh' : 'en')
               hideMobileMenu()
diff --git a/src/components/Header/LanguageComp/styled.tsx b/src/components/Header/LanguageComp/styled.tsx
index 2792edfd3..36bf6495f 100644
--- a/src/components/Header/LanguageComp/styled.tsx
+++ b/src/components/Header/LanguageComp/styled.tsx
@@ -8,19 +8,19 @@ export const HeaderLanguagePanel = styled.div`
   padding: 10px 0;
   margin-bottom: 4px;
 
-  .header__language__flag {
+  .headerLanguageFlag {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
   }
 
-  .header__language__content_panel {
+  .headerLanguageContentPanel {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     cursor: pointer;
 
-    .header__language__content {
+    .headerLanguageContent {
       font-size: 14px;
       letter-spacing: 1px;
     }
@@ -40,33 +40,33 @@ export const MobileSubMenuPanel = styled.div`
   align-items: flex-start;
   margin: 22px 56px 0;
 
-  .mobile__menus__main__item {
+  .mobileMenusMainItem {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
   }
 
-  .mobile__menus__main__item__content {
+  .mobileMenusMainItemContent {
     color: ${(props: { showSubMenu: boolean; theme: any }) => (props.showSubMenu ? props.theme.primary : 'white')};
   }
 
-  .mobile__menus__main__item__content__highlight {
+  .mobileMenusMainItemContentHighlight {
     color: ${props => props.theme.primary};
   }
 
-  .mobile__menus__main__item__icon {
+  .mobileMenusMainItemIcon {
     width: 7.9px;
     height: 4.8px;
   }
 
-  .blockchain__mobile__node__version {
+  .blockchainMobileNodeVersion {
     font-size: 8px;
     margin-top: -5px;
     color: ${props => props.theme.primary};
   }
 
-  .mobile__menus__sub__item {
+  .mobileMenusSubItem {
     width: 300px;
     padding: 12px 24px;
     font-size: 12px;
@@ -83,18 +83,18 @@ export const MobileSubMenuPanel = styled.div`
     color: white;
   }
 
-  .mobile__menus__sub__icon {
+  .mobileMenusSubIcon {
     width: 20px;
     height: 20px;
   }
 
-  .mobile__menus__sub__title {
+  .mobileMenusSubTitle {
     font-size: 12px;
     margin-left: 8px;
     margin-right: 16px;
   }
 
-  .mobile__menus__sub__tag {
+  .mobileMenusSubTag {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -106,7 +106,7 @@ export const MobileSubMenuPanel = styled.div`
     }
   }
 
-  .mobile__menus__sub__memo {
+  .mobileMenusSubMemo {
     font-size: 12px;
     color: #888;
     width: 100%;
diff --git a/src/components/Header/MenusComp/index.tsx b/src/components/Header/MenusComp/index.tsx
index b0a82950d..ca80e26f4 100644
--- a/src/components/Header/MenusComp/index.tsx
+++ b/src/components/Header/MenusComp/index.tsx
@@ -74,17 +74,11 @@ export default memo(() =>
         .filter(menu => menu.name !== undefined)
         .map(menu =>
           menu.type === LinkType.Inner ? (
-            <Link className="header__menus__item" to={menu.url} key={menu.name}>
+            <Link className="headerMenusItem" to={menu.url} key={menu.name}>
               {menu.name}
             </Link>
           ) : (
-            <a
-              className="header__menus__item"
-              href={menu.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              key={menu.name}
-            >
+            <a className="headerMenusItem" href={menu.url} target="_blank" rel="noopener noreferrer" key={menu.name}>
               {menu.name}
             </a>
           ),
diff --git a/src/components/Header/MenusComp/styled.tsx b/src/components/Header/MenusComp/styled.tsx
index 8be162a87..5ee6ddbc5 100644
--- a/src/components/Header/MenusComp/styled.tsx
+++ b/src/components/Header/MenusComp/styled.tsx
@@ -25,7 +25,7 @@ export const HeaderMenuPanel = styled.div`
   display: flex;
   align-items: center;
 
-  .header__menus__item {
+  .headerMenusItem {
     color: white;
     display: flex;
     align-items: center;
diff --git a/src/components/Header/index.module.scss b/src/components/Header/index.module.scss
index d2643b1a8..b3bb30fce 100644
--- a/src/components/Header/index.module.scss
+++ b/src/components/Header/index.module.scss
@@ -1,4 +1,4 @@
-.AutoExpand {
+.autoExpand {
   display: flex;
   flex: 1;
   min-width: 0;
@@ -16,7 +16,7 @@
   }
 }
 
-.StickyContainer {
+.stickyContainer {
   position: sticky;
   top: 0;
   z-index: 10;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 51430c30e..fc7c95ca6 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -28,9 +28,9 @@ const MobileMenuComp: FC<{ mobileMenuVisible: boolean; setMobileMenuVisible: (va
   return (
     <HeaderMobileMenuPanel onClick={() => setMobileMenuVisible(!mobileMenuVisible)}>
       <div className={mobileMenuVisible ? 'close' : ''}>
-        <div className="menu__icon__first" />
-        <div className="menu__icon__second" />
-        <div className="menu__icon__third" />
+        <div className="menuIconFirst" />
+        <div className="menuIconSecond" />
+        <div className="menuIconThird" />
       </div>
     </HeaderMobileMenuPanel>
   )
@@ -49,7 +49,7 @@ const AutoExpand: FC<{
   const expanded = canMinimumRender || _expanded
 
   return (
-    <div className={styles.AutoExpand}>
+    <div className={styles.autoExpand}>
       {!_expanded && <div className={styles.content}>{leftContent}</div>}
       <div ref={ref} className={styles.expandable} style={{ width: _expanded ? '100%' : expandableWidthRange.minimum }}>
         {renderExpandable(expanded, setExpanded)}
@@ -108,7 +108,7 @@ export default () => {
 
   return (
     <div
-      className={classNames(styles.StickyContainer, {
+      className={classNames(styles.stickyContainer, {
         [styles.expanded]: mobileMenuVisible,
       })}
     >
diff --git a/src/components/Header/styled.tsx b/src/components/Header/styled.tsx
index 256871ce9..1622354d5 100644
--- a/src/components/Header/styled.tsx
+++ b/src/components/Header/styled.tsx
@@ -47,9 +47,9 @@ export const HeaderMobileMenuPanel = styled(SimpleButton)`
     height: 18px;
   }
 
-  .menu__icon__first,
-  .menu__icon__second,
-  .menu__icon__third {
+  .menuIconFirst,
+  .menuIconSecond,
+  .menuIconThird {
     width: 18px;
     height: 2px;
     background-color: white;
@@ -57,15 +57,15 @@ export const HeaderMobileMenuPanel = styled(SimpleButton)`
     transition: 0.4s;
   }
 
-  .close .menu__icon__first {
+  .close .menuIconFirst {
     transform: rotate(-45deg) translate(-4px, 5px);
   }
 
-  .close .menu__icon__second {
+  .close .menuIconSecond {
     opacity: 0;
   }
 
-  .close .menu__icon__third {
+  .close .menuIconThird {
     transform: rotate(45deg) translate(-4px, -6px);
   }
 `
diff --git a/src/components/Loading/SmallLoading/index.tsx b/src/components/Loading/SmallLoading/index.tsx
index 8c6aa654e..0928993c3 100644
--- a/src/components/Loading/SmallLoading/index.tsx
+++ b/src/components/Loading/SmallLoading/index.tsx
@@ -7,7 +7,7 @@ import { SmallLoadingPanel } from './styled'
 export default ({ isWhite }: { isWhite?: boolean }) => (
   <SmallLoadingPanel>
     {isWhite ? (
-      <img className="loading__white" src={LoadingWhiteImage} alt="loading" />
+      <img className="loadingWhite" src={LoadingWhiteImage} alt="loading" />
     ) : (
       <img src={isMainnet() ? LoadingImage : LoadingBlueImage} alt="loading" />
     )}
diff --git a/src/components/Loading/SmallLoading/styled.tsx b/src/components/Loading/SmallLoading/styled.tsx
index 7a35fb352..446431b57 100644
--- a/src/components/Loading/SmallLoading/styled.tsx
+++ b/src/components/Loading/SmallLoading/styled.tsx
@@ -4,7 +4,7 @@ export const SmallLoadingPanel = styled.div`
   margin: 15px 0;
   text-align: center;
 
-  .loading__white {
+  .loadingWhite {
     opacity: 0.8;
   }
 
diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
index f70f50507..9bd1a37ea 100644
--- a/src/components/Pagination/index.tsx
+++ b/src/components/Pagination/index.tsx
@@ -47,39 +47,39 @@ const Pagination = ({
   return (
     <PaginationPanel className={className}>
       <PaginationLeftItem isFirstPage={current === 1} isLastPage={current === total}>
-        <SimpleButton className="pagination__first__button" onClick={() => changePage(1)}>
+        <SimpleButton className="paginationFirstButton" onClick={() => changePage(1)}>
           {i18n.t('pagination.first')}
         </SimpleButton>
-        <SimpleButton className="pagination__left__button" onClick={() => changePage(current - 1)}>
+        <SimpleButton className="paginationLeftButton" onClick={() => changePage(current - 1)}>
           <img src={current === 1 ? LeftGrey : LeftBlack} alt="left button" />
         </SimpleButton>
 
         {!isMobile && (
-          <span className="pagination__middle__label">
+          <span className="paginationMiddleLabel">
             {pcPagination}
             {annotationComp}
           </span>
         )}
-        <SimpleButton className="pagination__right__button" onClick={() => changePage(current + 1)}>
+        <SimpleButton className="paginationRightButton" onClick={() => changePage(current + 1)}>
           <img src={current === total ? RightGrey : RightBlack} alt="right button" />
         </SimpleButton>
         {isMobile && (
-          <span className="pagination__middle__label">
+          <span className="paginationMiddleLabel">
             {mobilePagination}
             {annotationComp}
           </span>
         )}
 
-        <SimpleButton className="pagination__last__button" onClick={() => changePage(total)}>
+        <SimpleButton className="paginationLastButton" onClick={() => changePage(total)}>
           {i18n.t('pagination.last')}
         </SimpleButton>
       </PaginationLeftItem>
       <PaginationRightItem>
-        <span className="pagination__page__label">{i18n.t('pagination.page')}</span>
+        <span className="paginationPageLabel">{i18n.t('pagination.page')}</span>
         <input
           type="text"
           pattern="[0-9]*"
-          className="pagination__input__page"
+          className="paginationInputPage"
           value={inputPage}
           onChange={(event: any) => {
             const pageNo = parseInt(event.target.value, 10)
@@ -91,7 +91,7 @@ const Pagination = ({
             }
           }}
         />
-        <SimpleButton className="pagination__goto__page" onClick={() => changePage(inputPage)}>
+        <SimpleButton className="paginationGotoPage" onClick={() => changePage(inputPage)}>
           {i18n.t('pagination.goto')}
         </SimpleButton>
       </PaginationRightItem>
diff --git a/src/components/Pagination/styled.tsx b/src/components/Pagination/styled.tsx
index 89b274e84..11f204aca 100644
--- a/src/components/Pagination/styled.tsx
+++ b/src/components/Pagination/styled.tsx
@@ -30,7 +30,7 @@ export const PaginationLeftItem = styled.div`
     justify-content: flex-start;
   }
 
-  .pagination__first__button {
+  .paginationFirstButton {
     height: 30px;
     line-height: 30px;
     padding: 0 8px;
@@ -52,7 +52,7 @@ export const PaginationLeftItem = styled.div`
     }
   }
 
-  .pagination__left__button {
+  .paginationLeftButton {
     margin-left: 20px;
     width: 30px;
     height: 30px;
@@ -75,7 +75,7 @@ export const PaginationLeftItem = styled.div`
     }
   }
 
-  .pagination__middle__label {
+  .paginationMiddleLabel {
     height: 30px;
     display: flex;
     align-items: center;
@@ -100,7 +100,7 @@ export const PaginationLeftItem = styled.div`
     }
   }
 
-  .pagination__right__button {
+  .paginationRightButton {
     margin-left: 20px;
     background: #f5f5f5;
     width: 30px;
@@ -123,7 +123,7 @@ export const PaginationLeftItem = styled.div`
     }
   }
 
-  .pagination__last__button {
+  .paginationLastButton {
     height: 30px;
     line-height: 30px;
     padding: 0 8px;
@@ -160,7 +160,7 @@ export const PaginationRightItem = styled.div`
     justify-content: flex-end;
   }
 
-  .pagination__input__page {
+  .paginationInputPage {
     width: 120px;
     height: 30px;
     border: none;
@@ -179,7 +179,7 @@ export const PaginationRightItem = styled.div`
     }
   }
 
-  .pagination__page__label {
+  .paginationPageLabel {
     margin-right: 20px;
 
     @media (max-width: 750px) {
@@ -187,7 +187,7 @@ export const PaginationRightItem = styled.div`
     }
   }
 
-  .pagination__goto__page {
+  .paginationGotoPage {
     height: 30px;
     line-height: 30px;
     padding: 0 8px;
diff --git a/src/components/PaginationWithRear/styles.module.scss b/src/components/PaginationWithRear/styles.module.scss
index 361b51cb5..df9f91d71 100644
--- a/src/components/PaginationWithRear/styles.module.scss
+++ b/src/components/PaginationWithRear/styles.module.scss
@@ -20,14 +20,14 @@
       border-radius: 0;
     }
 
-    :global(.pagination__input__page) {
+    :global(.paginationInputPage) {
       flex: 1;
       width: 60px;
       max-width: 120px;
     }
   }
 
-  :global(.pagination__goto__page) {
+  :global(.paginationGotoPage) {
     min-width: 42px;
   }
 
diff --git a/src/components/Script/index.tsx b/src/components/Script/index.tsx
index a61c418ef..c36762906 100644
--- a/src/components/Script/index.tsx
+++ b/src/components/Script/index.tsx
@@ -7,12 +7,12 @@ import { HelpTip } from '../HelpTip'
 
 const ScriptItem = ({ title, tooltip, children }: { title: string; tooltip?: string; children?: ReactNode }) => (
   <ScriptItemPanel>
-    <div className="script__title">
+    <div className="scriptTitle">
       <span>{title}</span>
       {tooltip && <HelpTip title={tooltip} />}
       <span>:</span>
     </div>
-    <div className="script__content">{children}</div>
+    <div className="scriptContent">{children}</div>
   </ScriptItemPanel>
 )
 
@@ -21,7 +21,7 @@ const Script = ({ script }: { script: State.Script }) => {
   return (
     <ScriptPanel>
       <ScriptItem title={i18n.t('address.code_hash')}>
-        <div className="script__code_hash">
+        <div className="scriptCodeHash">
           <span className="monospace">{script.codeHash}</span>
           {contractHashTag && <HashTag content={contractHashTag.tag} />}
         </div>
diff --git a/src/components/Script/styled.tsx b/src/components/Script/styled.tsx
index 6b1fc8097..32b88e252 100644
--- a/src/components/Script/styled.tsx
+++ b/src/components/Script/styled.tsx
@@ -38,7 +38,7 @@ export const ScriptItemPanel = styled.div`
     font-size: 14px;
   }
 
-  .script__title {
+  .scriptTitle {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -58,7 +58,7 @@ export const ScriptItemPanel = styled.div`
     }
   }
 
-  .script__content {
+  .scriptContent {
     flex: 1;
     margin-left: 12px;
     display: flex;
@@ -74,7 +74,7 @@ export const ScriptItemPanel = styled.div`
     }
   }
 
-  .script__code_hash {
+  .scriptCodeHash {
     display: flex;
     flex-direction: row;
     align-items: center;
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index e0bdcd5c2..259f79c6c 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -37,9 +37,9 @@ export const TableMinerContentItem = memo(
           <Row justify={textCenter ? 'center' : 'start'}>
             <Col span={20} xl={16}>
               <AddressText
-                className="table__miner__text"
+                className="tableMinerText"
                 linkProps={{
-                  className: 'table__miner__content',
+                  className: 'tableMinerContent',
                   to: `/address/${content}`,
                 }}
               >
@@ -48,7 +48,7 @@ export const TableMinerContentItem = memo(
             </Col>
           </Row>
         ) : (
-          <div className="table__miner__text__disable">{i18n.t('address.unable_decode_address')}</div>
+          <div className="tableMinerTextDisable">{i18n.t('address.unable_decode_address')}</div>
         )}
       </TableMinerContentPanel>
     )
diff --git a/src/components/Table/styled.tsx b/src/components/Table/styled.tsx
index ddda06be3..52964634c 100644
--- a/src/components/Table/styled.tsx
+++ b/src/components/Table/styled.tsx
@@ -95,12 +95,12 @@ export const TableMinerContentPanel = styled.div`
   text-align: center;
   margin: auto 0;
 
-  .table__miner__content {
+  .tableMinerContent {
     color: ${(props: { theme: any }) => props.theme.primary};
     text-decoration: none;
   }
 
-  .table__miner__text {
+  .tableMinerText {
     width: 100%;
     justify-content: center;
     font-size: ${(props: { width: string; fontSize: string }) => props.fontSize};
@@ -111,7 +111,7 @@ export const TableMinerContentPanel = styled.div`
     }
   }
 
-  .table__miner__text__disable {
+  .tableMinerTextDisable {
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/components/Text/index.module.scss b/src/components/Text/index.module.scss
index 9a1c829cc..cc243d353 100644
--- a/src/components/Text/index.module.scss
+++ b/src/components/Text/index.module.scss
@@ -1,4 +1,4 @@
-.HighLightPanel {
+.highLightPanel {
   color: var(--primary-color);
   font-size: 14px;
 
diff --git a/src/components/Text/styled.tsx b/src/components/Text/styled.tsx
index c17b96eaf..b135e9834 100644
--- a/src/components/Text/styled.tsx
+++ b/src/components/Text/styled.tsx
@@ -5,7 +5,7 @@ import styles from './index.module.scss'
 export const HighLightPanel: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const { children, className, ...rest } = props
   return (
-    <div className={classNames(styles.HighLightPanel, className)} {...rest}>
+    <div className={classNames(styles.highLightPanel, className)} {...rest}>
       {children}
     </div>
   )
diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
index e48541539..88a9cff2f 100644
--- a/src/components/Toast/index.tsx
+++ b/src/components/Toast/index.tsx
@@ -54,7 +54,7 @@ const ToastItem = ({ data, willLeave }: { data: State.ToastMessage; willLeave: F
         background: getColor(data.type),
       }}
     >
-      <div className="toast__text">{data.message}</div>
+      <div className="toastText">{data.message}</div>
     </ToastItemPanel>
   )
 }
diff --git a/src/components/Toast/styled.tsx b/src/components/Toast/styled.tsx
index 6d49680ac..7d3b9ca42 100644
--- a/src/components/Toast/styled.tsx
+++ b/src/components/Toast/styled.tsx
@@ -22,7 +22,7 @@ export const ToastItemPanel = styled.div`
   z-index: 9999;
   height: 60px;
 
-  .toast__text {
+  .toastText {
     color: white;
     font-size: 20px;
     line-height: 60px;
@@ -33,7 +33,7 @@ export const ToastItemPanel = styled.div`
     top: 42px;
     height: 36px;
 
-    .toast__text {
+    .toastText {
       font-size: 14px;
       line-height: 36px;
     }
@@ -43,7 +43,7 @@ export const ToastItemPanel = styled.div`
     top: 42px;
     height: 36px;
 
-    .toast__text {
+    .toastText {
       font-size: 12px;
       line-height: 36px;
     }
diff --git a/src/components/Tooltip/ComparedToMaxTooltip/styles.module.scss b/src/components/Tooltip/ComparedToMaxTooltip/styles.module.scss
index 8cc5a6f97..5c7d62f41 100644
--- a/src/components/Tooltip/ComparedToMaxTooltip/styles.module.scss
+++ b/src/components/Tooltip/ComparedToMaxTooltip/styles.module.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable-next-line selector-class-pattern */
 :global(.ant-tooltip) {
   max-width: 320px;
 
@@ -7,6 +8,7 @@
 }
 
 .comparedSizeTooltip {
+  /* stylelint-disable-next-line selector-class-pattern */
   :global(.ant-tooltip-inner) {
     border-radius: 8px;
     mix-blend-mode: normal;
@@ -31,13 +33,14 @@
 
     > div.inEpoch {
       margin-bottom: 10px;
-
+      /* stylelint-disable-next-line selector-class-pattern */
       :global(.ant-progress-bg) {
         background-color: var(--primary-color);
       }
     }
 
     > div.inChain {
+      /* stylelint-disable-next-line selector-class-pattern */
       :global(.ant-progress-bg) {
         background-color: #346dff;
       }
diff --git a/src/components/Transaction/Cellbase/index.tsx b/src/components/Transaction/Cellbase/index.tsx
index 1072927ab..7919694d5 100644
--- a/src/components/Transaction/Cellbase/index.tsx
+++ b/src/components/Transaction/Cellbase/index.tsx
@@ -12,7 +12,7 @@ const Cellbase = ({ cell, cellType, isDetail }: { cell: State.Cell; cellType: Ce
   if (!cell.targetBlockNumber || cell.targetBlockNumber <= 0) {
     return (
       <CellbasePanel>
-        <div className="cellbase__content">Cellbase</div>
+        <div className="cellbaseContent">Cellbase</div>
       </CellbasePanel>
     )
   }
@@ -30,9 +30,9 @@ const Cellbase = ({ cell, cellType, isDetail }: { cell: State.Cell; cellType: Ce
   return (
     <CellbasePanel isDetail={isDetail}>
       {cellType === CellType.Input && <TransactionCellArrow cell={cell} cellType={cellType} />}
-      <div className="cellbase__content">Cellbase for Block</div>
+      <div className="cellbaseContent">Cellbase for Block</div>
       <Tooltip overlayClassName={styles.tooltip} placement="top" title={tooltipContent}>
-        <img className="cellbase__help__icon" alt="cellbase help" src={HelpIcon} />
+        <img className="cellbaseHelpIcon" alt="cellbase help" src={HelpIcon} />
       </Tooltip>
       <Link to={`/block/${cell.targetBlockNumber}`}>{localeNumberString(cell.targetBlockNumber)}</Link>
     </CellbasePanel>
diff --git a/src/components/Transaction/Cellbase/styled.tsx b/src/components/Transaction/Cellbase/styled.tsx
index e8f44b6af..2214cb761 100644
--- a/src/components/Transaction/Cellbase/styled.tsx
+++ b/src/components/Transaction/Cellbase/styled.tsx
@@ -13,7 +13,7 @@ export const CellbasePanel = styled.div`
     height: 16px;
   }
 
-  .cellbase__content {
+  .cellbaseContent {
     color: #000;
   }
 
@@ -26,7 +26,7 @@ export const CellbasePanel = styled.div`
     color: ${props => props.theme.primary};
   }
 
-  .cellbase__help {
+  .cellbaseHelp {
     margin-left: 10px;
     transform: translateY(2px);
 
@@ -35,7 +35,7 @@ export const CellbasePanel = styled.div`
     }
   }
 
-  .cellbase__help__icon {
+  .cellbaseHelpIcon {
     width: 16px;
     height: 16px;
     margin: 2px 8px 0;
diff --git a/src/components/Transaction/TransactionCellArrow/index.tsx b/src/components/Transaction/TransactionCellArrow/index.tsx
index de50df1d9..8fa6ceb26 100644
--- a/src/components/Transaction/TransactionCellArrow/index.tsx
+++ b/src/components/Transaction/TransactionCellArrow/index.tsx
@@ -13,7 +13,7 @@ const CellInputIcon = ({ cell }: { cell: State.Cell }) =>
   cell.generatedTxHash ? (
     <Link to={`/transaction/${cell.generatedTxHash}#${cell.cellIndex}`}>
       <LeftArrowImage
-        className="transaction__cell_left_arrow"
+        className="transactionCellLeftArrow"
         src={isMainnet() ? RightGreenArrow : RightBlueArrow}
         alt="left arrow"
       />
diff --git a/src/components/TransactionItem/TransactionItemCell/index.tsx b/src/components/TransactionItem/TransactionItemCell/index.tsx
index 421d2939a..2068789b6 100644
--- a/src/components/TransactionItem/TransactionItemCell/index.tsx
+++ b/src/components/TransactionItem/TransactionItemCell/index.tsx
@@ -85,8 +85,8 @@ const WithdrawPopoverItem = ({
   content: ReactNode | string
 }) => (
   <WithdrawItemPanel width={width}>
-    <div className="withdraw__info_title">{title}</div>
-    <div className="withdraw__info_content">{content}</div>
+    <div className="withdrawInfoTitle">{title}</div>
+    <div className="withdrawInfoContent">{content}</div>
   </WithdrawItemPanel>
 )
 
@@ -211,7 +211,7 @@ const TransactionCellUDT = ({ cell }: { cell: State.Cell$UDT }) => {
           fontSize: '14px',
         }}
       >
-        <img src={UDTTokenIcon} className="transaction__cell__udt__icon" alt="udt token" />
+        <img src={UDTTokenIcon} className="transactionCellUdtIcon" alt="udt token" />
       </Tooltip>
     </TransactionCellUDTPanel>
   )
@@ -227,7 +227,7 @@ const TransactionCellCapacity = ({ cell, cellType }: { cell: State.Cell; cellTyp
   }
 
   return (
-    <div className="transaction__cell__without__icon">
+    <div className="transactionCellWithoutIcon">
       <DecimalCapacity value={localeNumberString(shannonToCkb(cell.capacity))} />
     </div>
   )
@@ -248,7 +248,7 @@ const TransactionCell = ({ cell, address, cellType }: { cell: State.Cell; addres
 
   return (
     <TransactionCellPanel highLight={highLight}>
-      <div className="transaction__cell_address">
+      <div className="transactionCellAddress">
         {cellType === CellType.Input && <TransactionCellArrow cell={cell} cellType={cellType} />}
         <AddressTextWithAlias address={addressText} to={highLight ? `/address/${cell.addressHash}` : undefined} />
         {cellType === CellType.Output && <TransactionCellArrow cell={cell} cellType={cellType} />}
diff --git a/src/components/TransactionItem/TransactionItemCell/styled.tsx b/src/components/TransactionItem/TransactionItemCell/styled.tsx
index d3bd2b663..6c6bee6ee 100644
--- a/src/components/TransactionItem/TransactionItemCell/styled.tsx
+++ b/src/components/TransactionItem/TransactionItemCell/styled.tsx
@@ -17,7 +17,7 @@ export const TransactionCellPanel = styled.div`
     flex-direction: column;
   }
 
-  .transaction__cell_address {
+  .transactionCellAddress {
     color: ${({ highLight = false, theme }: { highLight?: boolean; theme: any }) =>
       highLight ? `${theme.primary}` : '#000000'};
     font-weight: 500;
@@ -50,7 +50,7 @@ export const TransactionCellCapacityPanel = styled.div`
   max-height: 40px;
   align-items: center;
 
-  .transaction__cell__without__icon {
+  .transactionCellWithoutIcon {
     margin-right: 21px;
   }
 
@@ -61,7 +61,7 @@ export const TransactionCellCapacityPanel = styled.div`
     width: 100%;
     justify-content: flex-end;
 
-    .transaction__cell__without__icon {
+    .transactionCellWithoutIcon {
       margin: 0 6px;
     }
   }
@@ -101,7 +101,7 @@ export const TransactionCellUDTPanel = styled.div`
     margin-left: 6px;
   }
 
-  .transaction__cell__udt__icon {
+  .transactionCellUdtIcon {
     margin-left: 5px;
     width: 16px;
     height: auto;
@@ -138,7 +138,7 @@ export const WithdrawItemPanel = styled.div`
     margin: 5px;
   }
 
-  .withdraw__info_title {
+  .withdrawInfoTitle {
     font-size: 14px;
     font-weight: 450;
     width: ${({ width }: { width: string }) => {
@@ -181,7 +181,7 @@ export const WithdrawItemPanel = styled.div`
     }
   }
 
-  .withdraw__info_content {
+  .withdrawInfoContent {
     font-size: 14px;
 
     @media (max-width: 750px) {
diff --git a/src/components/TransactionItem/TransactionItemCellList/index.tsx b/src/components/TransactionItem/TransactionItemCellList/index.tsx
index 4aae320e8..af441df2e 100644
--- a/src/components/TransactionItem/TransactionItemCellList/index.tsx
+++ b/src/components/TransactionItem/TransactionItemCellList/index.tsx
@@ -17,7 +17,7 @@ export default ({
   <TransactionCellListPanel>
     {cells && cells.map((cell, index) => index < MAX_CELL_SHOW_SIZE && render(cell))}
     {cells && cells.length >= MAX_CELL_SHOW_SIZE && (
-      <div className="transaction_item__view_all">
+      <div className="transactionItemViewAll">
         <Link to={`/transaction/${transaction.transactionHash}`}>{i18n.t('common.view_all')}</Link>
       </div>
     )}
diff --git a/src/components/TransactionItem/TransactionItemCellList/styled.tsx b/src/components/TransactionItem/TransactionItemCellList/styled.tsx
index 5e0dd7a33..f9dd7b24a 100644
--- a/src/components/TransactionItem/TransactionItemCellList/styled.tsx
+++ b/src/components/TransactionItem/TransactionItemCellList/styled.tsx
@@ -6,7 +6,7 @@ export default styled.div`
   align-items: space-between;
   width: 100%;
 
-  .transaction_item__view_all {
+  .transactionItemViewAll {
     font-size: 16px;
     color: ${props => props.theme.primary};
     margin-top: 20px;
diff --git a/src/components/TransactionItem/index.tsx b/src/components/TransactionItem/index.tsx
index 0086782a4..bebf31670 100644
--- a/src/components/TransactionItem/index.tsx
+++ b/src/components/TransactionItem/index.tsx
@@ -55,10 +55,10 @@ const TransactionItem = ({
     <TransactionPanel ref={ref} circleCorner={circleCorner}>
       {titleCard}
       <TransactionHashBlockPanel>
-        <div className="transaction_item__content">
+        <div className="transactionItemContent">
           <AddressText
             disableTooltip
-            className="transaction_item__hash"
+            className="transactionItemHash"
             linkProps={{
               to: `/transaction/${transaction.transactionHash}`,
             }}
@@ -66,14 +66,14 @@ const TransactionItem = ({
             {transaction.transactionHash}
           </AddressText>
           {!isBlock && (
-            <div className="transaction_item__block">
+            <div className="transactionItemBlock">
               {`(${i18n.t('block.block')} ${localeNumberString(transaction.blockNumber)})  ${parsedBlockCreateAt}`}
             </div>
           )}
         </div>
       </TransactionHashBlockPanel>
       <TransactionCellPanel>
-        <div className="transaction_item__input">
+        <div className="transactionItemInput">
           <TransactionCellList
             cells={transaction.displayInputs}
             transaction={transaction}
@@ -81,7 +81,7 @@ const TransactionItem = ({
           />
         </div>
         <img src={isLG ? DownArrowIcon : RightArrowIcon} alt="input and output" />
-        <div className="transaction_item__output">
+        <div className="transactionItemOutput">
           {transaction.displayOutputs && transaction.displayOutputs.length !== 0 ? (
             <TransactionCellList
               cells={transaction.displayOutputs}
@@ -93,7 +93,7 @@ const TransactionItem = ({
               )}
             />
           ) : (
-            <div className="transaction_item__output__empty">{i18n.t('transaction.empty_output')}</div>
+            <div className="transactionItemOutputEmpty">{i18n.t('transaction.empty_output')}</div>
           )}
         </div>
       </TransactionCellPanel>
diff --git a/src/components/TransactionItem/styled.tsx b/src/components/TransactionItem/styled.tsx
index 49b4e56d9..4ddc37d9a 100644
--- a/src/components/TransactionItem/styled.tsx
+++ b/src/components/TransactionItem/styled.tsx
@@ -19,33 +19,13 @@ export const TransactionPanel = styled.div`
   }
 `
 
-export const TransactionsReward = styled.div`
-  display: flex;
-  align-items: center;
-  height: 35px;
-  justify-content: space-between;
-
-  .transaction__cell {
-    display: flex;
-    align-items: center;
-    justify-content: left;
-    color: rgb(136 136 136);
-  }
-
-  .transaction__cell__capacity {
-    font-size: 16px;
-    color: rgb(136 136 136);
-    margin-left: 15px;
-  }
-`
-
 export const TransactionHashBlockPanel = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
   margin-top: 10px;
 
-  .transaction_item__content {
+  .transactionItemContent {
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -58,13 +38,13 @@ export const TransactionHashBlockPanel = styled.div`
       margin-bottom: 10px;
     }
 
-    .transaction_item__hash {
+    .transactionItemHash {
       font-size: 14px;
       color: ${props => props.theme.primary};
       font-weight: 500;
     }
 
-    .transaction_item__block {
+    .transactionItemBlock {
       color: #000;
 
       @media (max-width: 750px) {
@@ -99,7 +79,7 @@ export const TransactionCellPanel = styled.div`
     height: 16px;
   }
 
-  .transaction_item__input {
+  .transactionItemInput {
     margin-right: 40px;
     flex: 1;
     min-width: 0;
@@ -111,7 +91,7 @@ export const TransactionCellPanel = styled.div`
     }
   }
 
-  .transaction_item__output {
+  .transactionItemOutput {
     flex: 1;
     min-width: 0;
     display: flex;
@@ -126,7 +106,7 @@ export const TransactionCellPanel = styled.div`
     }
   }
 
-  .transaction_item__output__empty {
+  .transactionItemOutputEmpty {
     font-size: 16px;
     color: #666;
     margin-top: 18px;
diff --git a/src/index.css b/src/index.css
index d7cc03268..4b3e4603d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -70,17 +70,20 @@ a {
 }
 
 @media (width <= 750px) {
+  /* stylelint-disable-next-line selector-class-pattern */
   .rc-pagination-options-quick-jumper {
     display: none;
   }
 }
 
 @media (width <= 750px) {
+  /* stylelint-disable-next-line selector-class-pattern */
   .ant-popover-inner-content {
     padding: 5px;
   }
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .ant-tooltip-inner {
   white-space: pre-wrap;
 }
diff --git a/src/pages/Address/AddressComp.tsx b/src/pages/Address/AddressComp.tsx
index 4bac42138..d8eadbe0a 100644
--- a/src/pages/Address/AddressComp.tsx
+++ b/src/pages/Address/AddressComp.tsx
@@ -166,18 +166,18 @@ const AddressUDTItem = ({ udtAccount }: { udtAccount: State.UDTAccount }) => {
 
   return (
     <AddressUDTItemPanel href={href} isLink={isSudt || isNft}>
-      <div className="address__udt__label">
+      <div className="addressUdtLabel">
         {isUnverified ? `${i18n.t('udt.unverified')}: ` : null}
         <span>{UDT_LABEL[udtType] ?? 'unknown'}</span>
       </div>
-      <div className="address__udt__detail">
+      <div className="addressUdtDetail">
         <img
-          className="address__udt__item__icon"
+          className="addressUdtItemIcon"
           src={`${patchMibaoImg(icon)}${coverQuery}`}
           alt="udt icon"
           onError={isSudt ? showDefaultIcon : handleNftImgError}
         />
-        <div className="address__udt__item__info">
+        <div className="addressUdtItemInfo">
           <span>{isUnverified ? '?' : name}</span>
           <span>{isUnverified ? '?' : property}</span>
         </div>
@@ -293,7 +293,7 @@ export const AddressOverview: FC<{ address: State.Address }> = ({ address }) =>
       {udtAccounts.length || cotaList?.length ? (
         <AddressUDTAssetsPanel>
           <span>{i18n.t('address.user_defined_token')}</span>
-          <div className="address__udt__assets__grid">
+          <div className="addressUdtAssetsGrid">
             {udtAccounts.map(udt => (
               <AddressUDTItem udtAccount={udt} key={udt.symbol + udt.udtType + udt.amount} />
             ))}
diff --git a/src/pages/Address/styled.tsx b/src/pages/Address/styled.tsx
index bfe7fd67e..41d112b53 100644
--- a/src/pages/Address/styled.tsx
+++ b/src/pages/Address/styled.tsx
@@ -94,7 +94,7 @@ export const AddressUDTAssetsPanel = styled.div`
     color: #000;
   }
 
-  .address__udt__assets__grid {
+  .addressUdtAssetsGrid {
     margin-top: 10px;
     background-color: #f1f1f1;
     padding: 6px 25px;
@@ -126,7 +126,7 @@ export const AddressUDTItemPanel = styled.a`
 
   pointer-events: ${(props: { isLink: boolean }) => (props.isLink ? 'auto' : 'none')};
 
-  .address__udt__label {
+  .addressUdtLabel {
     text-align: left;
     font-size: 12px;
     padding: 2px 8px;
@@ -138,14 +138,14 @@ export const AddressUDTItemPanel = styled.a`
     }
   }
 
-  .address__udt__detail {
+  .addressUdtDetail {
     display: flex;
     padding: 8px;
     align-items: center;
     line-height: 20px;
   }
 
-  .address__udt__item__icon {
+  .addressUdtItemIcon {
     display: flex;
     align-items: center;
     width: 40px;
@@ -155,7 +155,7 @@ export const AddressUDTItemPanel = styled.a`
     object-fit: cover;
   }
 
-  .address__udt__item__info {
+  .addressUdtItemInfo {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
diff --git a/src/pages/Address/styles.module.scss b/src/pages/Address/styles.module.scss
index c91b47fae..0cf067e96 100644
--- a/src/pages/Address/styles.module.scss
+++ b/src/pages/Address/styles.module.scss
@@ -74,6 +74,7 @@
 
 .layoutButtons {
   :global {
+    /* stylelint-disable-next-line selector-class-pattern */
     .ant-radio-button-wrapper {
       height: 40px;
       width: 120px;
@@ -102,6 +103,7 @@
         border-radius: 0 4px 4px 0;
       }
 
+      /* stylelint-disable-next-line selector-class-pattern */
       &.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
         background: #333;
         border-color: #333;
diff --git a/src/pages/BlockDetail/BlockComp.tsx b/src/pages/BlockDetail/BlockComp.tsx
index 127b61187..6f535ddd5 100644
--- a/src/pages/BlockDetail/BlockComp.tsx
+++ b/src/pages/BlockDetail/BlockComp.tsx
@@ -64,7 +64,7 @@ const BlockMinerMessage = ({ minerMessage }: { minerMessage: string }) => {
     <BlockMinerMessagePanel>
       <AddressText monospace={false}>{minerMessage}</AddressText>
       <Tooltip placement="top" title={`UTF-8: ${hexToUtf8(minerMessage)}`}>
-        <img className="block__miner__message_utf8" src={MoreIcon} alt="more" />
+        <img className="blockMinerMessageUtf8" src={MoreIcon} alt="more" />
       </Tooltip>
     </BlockMinerMessagePanel>
   )
@@ -85,7 +85,7 @@ const BlockMinerReward = ({
       <div className="block__miner__reward_value">{value}</div>
       <Tooltip placement="top" title={tooltip}>
         <div
-          className="block__miner__reward_tip"
+          className="blockMinerRewardTip"
           role="button"
           tabIndex={-1}
           onKeyDown={() => {}}
@@ -297,11 +297,11 @@ export const BlockOverview: FC<{ block: State.Block }> = ({ block }) => {
           <span />
           {rootInfoItems.map(item => (
             <BlockRootInfoItemPanel key={item.title}>
-              <div className="block__root_info_title">
+              <div className="blockRootInfoTitle">
                 <span>{item.title}</span>
                 {item.tooltip && <HelpTip title={item.tooltip} />}
               </div>
-              <div className="block__root_info_value monospace">{item.content}</div>
+              <div className="blockRootInfoValue monospace">{item.content}</div>
             </BlockRootInfoItemPanel>
           ))}
         </BlockRootInfoPanel>
diff --git a/src/pages/BlockDetail/styled.tsx b/src/pages/BlockDetail/styled.tsx
index cbe2e18f4..0d628efbe 100644
--- a/src/pages/BlockDetail/styled.tsx
+++ b/src/pages/BlockDetail/styled.tsx
@@ -36,14 +36,14 @@ export const BlockRootInfoItemPanel = styled.div`
     margin-top: 14px;
   }
 
-  .block__root_info_title {
+  .blockRootInfoTitle {
     display: flex;
     align-items: center;
     font-weight: 500;
     color: rgb(0 0 0 / 60%);
   }
 
-  .block__root_info_value {
+  .blockRootInfoValue {
     /* spare class */
   }
 `
@@ -65,7 +65,7 @@ export const BlockMinerRewardPanel = styled.div`
   display: flex;
   flex-direction: row;
 
-  .block__miner__reward_tip {
+  .blockMinerRewardTip {
     display: flex;
     align-items: center;
   }
@@ -89,7 +89,7 @@ export const BlockMinerMessagePanel = styled.div`
   align-items: center;
   min-width: 0;
 
-  .block__miner__message_utf8 {
+  .blockMinerMessageUtf8 {
     width: 15px;
     height: 15px;
     margin-top: 2px;
diff --git a/src/pages/BlockList/index.tsx b/src/pages/BlockList/index.tsx
index 3b7563825..a4344b5f2 100644
--- a/src/pages/BlockList/index.tsx
+++ b/src/pages/BlockList/index.tsx
@@ -202,7 +202,7 @@ export default () => {
   return (
     <Content>
       <BlockListPanel className="container">
-        <div className="block__green__background" />
+        <div className="blockGreenBackground" />
         {isMobile ? (
           <ContentTable>
             <TableTitleRow>
diff --git a/src/pages/BlockList/styled.tsx b/src/pages/BlockList/styled.tsx
index e2f9f5f59..2ad366c8a 100644
--- a/src/pages/BlockList/styled.tsx
+++ b/src/pages/BlockList/styled.tsx
@@ -13,7 +13,7 @@ export const BlockListPanel = styled.div`
     margin-top: 0;
     padding: 0 20px;
 
-    .block__green__background {
+    .blockGreenBackground {
       margin-left: -20px;
       height: 61px;
       width: calc(100% + 40px);
diff --git a/src/pages/ExportTransactions/styles.module.scss b/src/pages/ExportTransactions/styles.module.scss
index e9e1d9321..80093284f 100644
--- a/src/pages/ExportTransactions/styles.module.scss
+++ b/src/pages/ExportTransactions/styles.module.scss
@@ -98,10 +98,12 @@
       color: #333;
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     :global(div.ant-tabs-nav-wrap) {
       justify-content: center;
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     :global(div.ant-tabs-tab) {
       width: 120px;
       margin-left: 90px;
@@ -118,10 +120,12 @@
       }
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     :global(div.ant-tabs-ink-bar) {
       background: var(--primary-color);
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     :global(.ant-tabs-tab .ant-tabs-tab-btn) {
       font-weight: 400;
       font-size: 14px;
@@ -129,6 +133,7 @@
       color: #333;
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
       font-weight: 500;
       font-size: 14px;
@@ -172,22 +177,26 @@
       }
 
       :global {
+        /* stylelint-disable-next-line selector-class-pattern */
         .ant-picker {
           border-radius: 4px;
           box-shadow: none;
 
-          &:hover,
-          &.ant-picker-focused {
+          /* stylelint-disable-next-line selector-class-pattern */
+          &.ant-picker-focused,
+          &:hover {
             border-color: var(--primary-color);
           }
         }
 
+        /* stylelint-disable-next-line selector-class-pattern */
         .ant-input-number-affix-wrapper {
           border-radius: 4px;
           box-shadow: none;
 
-          &:hover,
-          &.ant-input-number-affix-wrapper-focused {
+          /* stylelint-disable-next-line selector-class-pattern */
+          &.ant-input-number-affix-wrapper-focused,
+          &:hover {
             border-color: var(--primary-color);
           }
         }
@@ -215,6 +224,7 @@
       }
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     :global(.ant-picker-input) {
       flex-direction: row-reverse;
 
@@ -333,16 +343,19 @@
 
 .calendar {
   :global {
+    /* stylelint-disable-next-line selector-class-pattern */
     .ant-picker-cell-selected .ant-picker-cell-inner {
       background-color: var(--primary-color);
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     .ant-picker-cell-today .ant-picker-cell-inner {
       &::before {
         border: 1px solid var(--primary-color);
       }
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     .ant-picker-today-btn {
       &,
       &:hover,
diff --git a/src/pages/Home/AverageBlockTimeChart/index.tsx b/src/pages/Home/AverageBlockTimeChart/index.tsx
index aa5fa8671..a7a03039a 100644
--- a/src/pages/Home/AverageBlockTimeChart/index.tsx
+++ b/src/pages/Home/AverageBlockTimeChart/index.tsx
@@ -124,7 +124,7 @@ export default memo(() => {
         {query.isLoading ? (
           <SmallLoading isWhite />
         ) : (
-          <img className="chart__no__data" src={ChartNoDataImage} alt="chart no data" />
+          <img className="chartNoData" src={ChartNoDataImage} alt="chart no data" />
         )}
       </ChartLoadingPanel>
     )
diff --git a/src/pages/Home/AverageBlockTimeChart/styled.tsx b/src/pages/Home/AverageBlockTimeChart/styled.tsx
index 46a436996..1d8bc3da3 100644
--- a/src/pages/Home/AverageBlockTimeChart/styled.tsx
+++ b/src/pages/Home/AverageBlockTimeChart/styled.tsx
@@ -13,7 +13,7 @@ export const ChartLoadingPanel = styled.div`
   align-items: center;
   justify-content: center;
 
-  .chart__no__data {
+  .chartNoData {
     width: 105px;
     height: auto;
 
diff --git a/src/pages/Home/HashRateChart/index.tsx b/src/pages/Home/HashRateChart/index.tsx
index 3c9608c75..c9efb24a2 100644
--- a/src/pages/Home/HashRateChart/index.tsx
+++ b/src/pages/Home/HashRateChart/index.tsx
@@ -114,7 +114,7 @@ export default memo(() => {
         {query.isLoading ? (
           <SmallLoading isWhite />
         ) : (
-          <img className="chart__no__data" src={ChartNoDataImage} alt="chart no data" />
+          <img className="chartNoData" src={ChartNoDataImage} alt="chart no data" />
         )}
       </ChartLoadingPanel>
     )
diff --git a/src/pages/Home/HashRateChart/styled.tsx b/src/pages/Home/HashRateChart/styled.tsx
index 46a436996..1d8bc3da3 100644
--- a/src/pages/Home/HashRateChart/styled.tsx
+++ b/src/pages/Home/HashRateChart/styled.tsx
@@ -13,7 +13,7 @@ export const ChartLoadingPanel = styled.div`
   align-items: center;
   justify-content: center;
 
-  .chart__no__data {
+  .chartNoData {
     width: 105px;
     height: auto;
 
diff --git a/src/pages/Home/TableCard/index.tsx b/src/pages/Home/TableCard/index.tsx
index 1cc591dbb..12901a9f3 100644
--- a/src/pages/Home/TableCard/index.tsx
+++ b/src/pages/Home/TableCard/index.tsx
@@ -38,28 +38,28 @@ const _BlockCardItem: FC<{ block: State.Block; isDelayBlock?: boolean }> = ({ bl
 
   return (
     <BlockCardPanel>
-      <div className="block__card__height">
+      <div className="blockCardHeight">
         <div>
           <span>#</span>
           <HighLightLink value={localeNumberString(block.number)} to={`/block/${block.number}`} />
         </div>
-        <span className="block__card__timestamp">{parsedBlockCreateAt}</span>
+        <span className="blockCardTimestamp">{parsedBlockCreateAt}</span>
       </div>
 
-      <div className="block__card__miner">
+      <div className="blockCardMiner">
         <div>
-          <span className="block__card__miner__hash">{i18n.t('home.miner')}</span>
+          <span className="blockCardMinerHash">{i18n.t('home.miner')}</span>
           <TableMinerContentItem content={deprecatedAddrToNewAddr(block.minerHash)} fontSize="14px" />
         </div>
-        <div className="block__card__reward">
+        <div className="blockCardReward">
           <span>{`${i18n.t('home.reward')}`}</span>
           {blockReward}
         </div>
       </div>
 
-      <div className="block__card__transaction">
-        <span className="block__card__transaction__count">{`${block.transactionsCount} TXs`}</span>
-        <span className="block__card__live__cells">
+      <div className="blockCardTransaction">
+        <span className="blockCardTransactionCount">{`${block.transactionsCount} TXs`}</span>
+        <span className="blockCardLiveCells">
           {`${liveCellChanges >= 0 ? '+' : '-'}${Math.abs(liveCellChanges)} ${i18n.t('home.cells')}`}
         </span>
       </div>
@@ -85,7 +85,7 @@ const _TransactionCardItem: FC<{
 
   return (
     <TransactionCardPanel>
-      <div className="transaction__card__hash">
+      <div className="transactionCardHash">
         <AddressText
           disableTooltip
           linkProps={{
@@ -95,25 +95,25 @@ const _TransactionCardItem: FC<{
         >
           {transaction.transactionHash}
         </AddressText>
-        <span className="transaction__card__confirmation">{`${confirmation} ${confirmationUnit}`}</span>
+        <span className="transactionCardConfirmation">{`${confirmation} ${confirmationUnit}`}</span>
       </div>
 
-      <div className="transaction__card__block">
+      <div className="transactionCardBlock">
         <div>
-          <span className="transaction__card__block__height">{i18n.t('block.block')}</span>
-          <span className="transaction__card__block__height__prefix">#</span>
+          <span className="transactionCardBlockHeight">{i18n.t('block.block')}</span>
+          <span className="transactionCardBlockHeightPrefix">#</span>
           <HighLightLink value={localeNumberString(transaction.blockNumber)} to={`/block/${transaction.blockNumber}`} />
         </div>
-        <div className="transaction__card__timestamp">{parsedBlockCreateAt}</div>
+        <div className="transactionCardTimestamp">{parsedBlockCreateAt}</div>
       </div>
 
-      <div className="transaction__card__capacity">
+      <div className="transactionCardCapacity">
         <DecimalCapacity
           value={localeNumberString(shannonToCkbDecimal(transaction.capacityInvolved, 2))}
           fontSize="9px"
           hideZero
         />
-        <span className="transaction__card__live__cells">
+        <span className="transactionCardLiveCells">
           {`${liveCellChanges >= 0 ? '+' : '-'}${Math.abs(liveCellChanges)} ${i18n.t('home.cells')}`}
         </span>
       </div>
diff --git a/src/pages/Home/TableCard/styled.tsx b/src/pages/Home/TableCard/styled.tsx
index 634deedc4..6567bb7cd 100644
--- a/src/pages/Home/TableCard/styled.tsx
+++ b/src/pages/Home/TableCard/styled.tsx
@@ -15,7 +15,7 @@ export const BlockCardPanel = styled.div`
     padding: 10px;
   }
 
-  .block__card__height {
+  .blockCardHeight {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -45,7 +45,7 @@ export const BlockCardPanel = styled.div`
       }
     }
 
-    .block__card__timestamp {
+    .blockCardTimestamp {
       font-size: 12px;
       color: #888;
       margin-top: 9px;
@@ -62,7 +62,7 @@ export const BlockCardPanel = styled.div`
     }
   }
 
-  .block__card__miner {
+  .blockCardMiner {
     min-width: 0;
     width: 100%;
     display: flex;
@@ -83,7 +83,7 @@ export const BlockCardPanel = styled.div`
         align-items: center;
       }
 
-      .block__card__miner__hash {
+      .blockCardMinerHash {
         font-size: 14px;
         color: #000;
         margin-right: 10px;
@@ -95,7 +95,7 @@ export const BlockCardPanel = styled.div`
       }
     }
 
-    .block__card__reward {
+    .blockCardReward {
       font-size: 14px;
       color: #888;
       font-weight: 500;
@@ -115,7 +115,7 @@ export const BlockCardPanel = styled.div`
     }
   }
 
-  .block__card__transaction {
+  .blockCardTransaction {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
@@ -127,13 +127,13 @@ export const BlockCardPanel = styled.div`
       align-items: center;
     }
 
-    .block__card__transaction__count {
+    .blockCardTransactionCount {
       font-size: 13px;
       color: #000;
       font-weight: 500;
     }
 
-    .block__card__live__cells {
+    .blockCardLiveCells {
       display: flex;
       font-size: 12px;
       margin-top: 9px;
@@ -172,7 +172,7 @@ export const TransactionCardPanel = styled.div`
     padding: 10px;
   }
 
-  .transaction__card__hash {
+  .transactionCardHash {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -186,7 +186,7 @@ export const TransactionCardPanel = styled.div`
       font-size: 13px;
     }
 
-    .transaction__card__confirmation {
+    .transactionCardConfirmation {
       font-size: 12px;
       color: #888;
       margin-top: 10px;
@@ -201,7 +201,7 @@ export const TransactionCardPanel = styled.div`
     }
   }
 
-  .transaction__card__block {
+  .transactionCardBlock {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -221,13 +221,13 @@ export const TransactionCardPanel = styled.div`
         font-size: 13px;
       }
 
-      .transaction__card__block__height {
+      .transactionCardBlockHeight {
         color: #000;
         margin-right: 5px;
         white-space: nowrap;
       }
 
-      .transaction__card__block__height__prefix {
+      .transactionCardBlockHeightPrefix {
         color: #000;
         margin-right: 3px;
       }
@@ -238,7 +238,7 @@ export const TransactionCardPanel = styled.div`
       }
     }
 
-    .transaction__card__timestamp {
+    .transactionCardTimestamp {
       font-size: 12px;
       color: #888;
       margin-top: 10px;
@@ -252,7 +252,7 @@ export const TransactionCardPanel = styled.div`
     }
   }
 
-  .transaction__card__capacity {
+  .transactionCardCapacity {
     display: flex;
     flex-direction: column;
     align-items: left;
@@ -267,7 +267,7 @@ export const TransactionCardPanel = styled.div`
       font-size: 13px;
     }
 
-    .transaction__card__live__cells {
+    .transactionCardLiveCells {
       display: flex;
       justify-content: flex-end;
       font-size: 12px;
diff --git a/src/pages/Home/index.module.scss b/src/pages/Home/index.module.scss
index 1e230baf0..5a06fc0a3 100644
--- a/src/pages/Home/index.module.scss
+++ b/src/pages/Home/index.module.scss
@@ -1,4 +1,4 @@
-.HomeHeaderTopPanel {
+.homeHeaderTopPanel {
   margin: 20px 0;
   display: flex;
   align-items: center;
@@ -39,7 +39,7 @@
   }
 }
 
-.HomeStatisticBottomPanel {
+.homeStatisticBottomPanel {
   display: flex;
   padding: 20px 5px;
   margin: 0 0 20px;
@@ -54,13 +54,13 @@
     border-radius: 0 0 6px 6px;
   }
 
-  .blockchain__item__row {
+  .blockchainItemRow {
     display: flex;
     width: 100%;
     padding: 12px 0;
   }
 
-  .blockchain__item__row_separate {
+  .blockchainItemRowSeparate {
     height: 1px;
     background: #eaeaea;
     width: auto;
@@ -73,20 +73,20 @@
 }
 
 :global([data-net='mainnet']) {
-  .HomeStatisticTopPanel {
-    .home__statistic__left__panel {
-      .home__statistic__left__data {
+  .homeStatisticTopPanel {
+    .homeStatisticLeftPanel {
+      .homeStatisticLeftData {
         background: linear-gradient(134deg, #3fb39e, #1ec196 51%, #3cc6b7 100%);
       }
 
-      .home__statistic__left__chart {
+      .homeStatisticLeftChart {
         background: linear-gradient(134deg, #0bad8e 2%, #20c5a5 48%, #0baab1 99%);
       }
     }
   }
 }
 
-.HomeStatisticTopPanel {
+.homeStatisticTopPanel {
   height: 207px;
   width: 100%;
   display: flex;
@@ -100,7 +100,7 @@
     height: 150px;
   }
 
-  .home__statistic__left__panel {
+  .homeStatisticLeftPanel {
     flex: 1;
     min-width: 0;
     display: flex;
@@ -116,7 +116,7 @@
       border: 0 solid;
     }
 
-    .home__statistic__left__data {
+    .homeStatisticLeftData {
       flex: 1;
       padding: 32px;
       margin: -2px;
@@ -144,7 +144,7 @@
       }
     }
 
-    .home__statistic__left__chart {
+    .homeStatisticLeftChart {
       flex: 2;
       margin: -2px;
       padding: 5px 5px 0 10px;
@@ -163,7 +163,7 @@
     }
   }
 
-  .home__statistic__right__panel {
+  .homeStatisticRightPanel {
     flex: 1;
     min-width: 0;
     display: flex;
@@ -181,7 +181,7 @@
       border-radius: 0;
     }
 
-    .home__statistic__right__data {
+    .homeStatisticRightData {
       flex: 1;
       padding: 32px;
       margin: -2px;
@@ -208,7 +208,7 @@
       }
     }
 
-    .home__statistic__right__chart {
+    .homeStatisticRightChart {
       flex: 2;
       margin: -2px;
       padding: 5px 5px 0 10px;
@@ -228,36 +228,36 @@
     }
   }
 
-  &.AfterHardFork {
-    .home__statistic__left__panel {
+  &.afterHardFork {
+    .homeStatisticLeftPanel {
       border-color: #232323;
       background-color: #232323;
 
-      .home__statistic__left__data {
+      .homeStatisticLeftData {
         background: #232323;
       }
 
-      .home__statistic__left__chart {
+      .homeStatisticLeftChart {
         background: #232323;
       }
     }
 
-    .home__statistic__right__panel {
+    .homeStatisticRightPanel {
       border-color: #484e4e;
       background-color: #484e4e;
 
-      .home__statistic__right__data {
+      .homeStatisticRightData {
         background: #484e4e;
       }
 
-      .home__statistic__right__chart {
+      .homeStatisticRightChart {
         background: #484e4e;
       }
     }
   }
 }
 
-.TableMorePanel {
+.tableMorePanel {
   height: 44px;
   width: 100%;
   display: flex;
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index cbdcbd692..57d9ee472 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -47,21 +47,21 @@ interface BlockchainData {
 
 const StatisticItem = ({ blockchain, isFirst }: { blockchain: BlockchainData; isFirst?: boolean }) => (
   <HomeStatisticItemPanel isFirst={isFirst}>
-    <div className="home__statistic__item__name">{blockchain.name}</div>
-    <div className="home__statistic__item__value">{blockchain.value}</div>
+    <div className="homeStatisticItemName">{blockchain.name}</div>
+    <div className="homeStatisticItemValue">{blockchain.value}</div>
   </HomeStatisticItemPanel>
 )
 
 const BlockchainItem = ({ blockchain }: { blockchain: BlockchainData }) => (
   <HomeHeaderItemPanel>
-    <div className="blockchain__item__content">
-      <div className="blockchain__item__name">{blockchain.name}</div>
-      <div className="blockchain__item__value">
-        <div className="blockchain__item__left__value">{blockchain.value}</div>
-        {blockchain.rightValue && <div className="blockchain__item__right__value">{blockchain.rightValue}</div>}
+    <div className="blockchainItemContent">
+      <div className="blockchainItemName">{blockchain.name}</div>
+      <div className="blockchainItemValue">
+        <div className="blockchainItemLeftValue">{blockchain.value}</div>
+        {blockchain.rightValue && <div className="blockchainItemRightValue">{blockchain.rightValue}</div>}
       </div>
     </div>
-    {blockchain.showSeparate && <div className="blockchain__item__between_separate" />}
+    {blockchain.showSeparate && <div className="blockchainItemBetweenSeparate" />}
   </HomeHeaderItemPanel>
 )
 
@@ -142,7 +142,7 @@ const HomeHeaderTopPanel: FC = memo(() => {
   useShowSearchBarInHeader(!isFullDisplayInScreen)
 
   return (
-    <div ref={ref} className={styles.HomeHeaderTopPanel}>
+    <div ref={ref} className={styles.homeHeaderTopPanel}>
       <div className={styles.title}>{i18n.t('common.ckb_explorer')}</div>
       <div className={styles.search}>{isFullDisplayInScreen && <Search hasButton />}</div>
     </div>
@@ -155,7 +155,7 @@ const BlockList: FC<{ blocks: State.Block[] }> = memo(({ blocks }) => {
       {blocks.map((block, index) => (
         <div key={block.number}>
           <BlockCardItem block={block} isDelayBlock={index < DELAY_BLOCK_NUMBER} />
-          {blocks.length - 1 !== index && <div className="block__card__separate" />}
+          {blocks.length - 1 !== index && <div className="blockCardSeparate" />}
         </div>
       ))}
     </>
@@ -171,7 +171,7 @@ const TransactionList: FC<{ transactions: State.Transaction[]; tipBlockNumber: n
         {transactions.map((transaction, index) => (
           <div key={transaction.transactionHash}>
             <TransactionCardItem transaction={transaction} tipBlockNumber={tipBlockNumber} />
-            {transactions.length - 1 !== index && <div className="transaction__card__separate" />}
+            {transactions.length - 1 !== index && <div className="transactionCardSeparate" />}
           </div>
         ))}
       </>
@@ -238,40 +238,40 @@ export default () => {
       <Banner />
       <div className="container">
         <HomeHeaderTopPanel />
-        <div className={`${styles.HomeStatisticTopPanel} ${styles.AfterHardFork}`}>
-          <div className={styles.home__statistic__left__panel}>
-            <div className={styles.home__statistic__left__data}>
+        <div className={`${styles.homeStatisticTopPanel} ${styles.afterHardFork}`}>
+          <div className={styles.homeStatisticLeftPanel}>
+            <div className={styles.homeStatisticLeftData}>
               <StatisticItem blockchain={blockchainDataList[0]} isFirst />
               <StatisticItem blockchain={blockchainDataList[1]} />
             </div>
-            <div className={styles.home__statistic__left__chart}>
+            <div className={styles.homeStatisticLeftChart}>
               <AverageBlockTimeChart />
             </div>
           </div>
-          <div className={styles.home__statistic__right__panel}>
-            <div className={styles.home__statistic__right__data}>
+          <div className={styles.homeStatisticRightPanel}>
+            <div className={styles.homeStatisticRightData}>
               <StatisticItem blockchain={blockchainDataList[2]} isFirst />
               <StatisticItem blockchain={blockchainDataList[3]} />
             </div>
-            <div className={styles.home__statistic__right__chart}>
+            <div className={styles.homeStatisticRightChart}>
               <HashRateChart />
             </div>
           </div>
         </div>
-        <div className={styles.HomeStatisticBottomPanel}>
+        <div className={styles.homeStatisticBottomPanel}>
           {!isLG ? (
             blockchainDataList
               .slice(4)
               .map((data: BlockchainData) => <BlockchainItem blockchain={data} key={data.name} />)
           ) : (
             <>
-              <div className={styles.blockchain__item__row}>
+              <div className={styles.blockchainItemRow}>
                 {blockchainDataList.slice(4, 6).map((data: BlockchainData) => (
                   <BlockchainItem blockchain={data} key={data.name} />
                 ))}
               </div>
-              <div className={styles.blockchain__item__row_separate} />
-              <div className={styles.blockchain__item__row}>
+              <div className={styles.blockchainItemRowSeparate} />
+              <div className={styles.blockchainItemRow}>
                 {blockchainDataList.slice(6).map((data: BlockchainData) => (
                   <BlockchainItem blockchain={data} key={data.name} />
                 ))}
diff --git a/src/pages/Home/styled.tsx b/src/pages/Home/styled.tsx
index 9604afc1f..8f0ce8097 100644
--- a/src/pages/Home/styled.tsx
+++ b/src/pages/Home/styled.tsx
@@ -9,7 +9,7 @@ export const HomeHeaderItemPanel = styled.div`
   background-color: white;
   flex: 1;
 
-  .blockchain__item__content {
+  .blockchainItemContent {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -19,7 +19,7 @@ export const HomeHeaderItemPanel = styled.div`
       margin: 0 20px;
     }
 
-    .blockchain__item__name {
+    .blockchainItemName {
       color: #555;
       font-size: 14px;
 
@@ -28,14 +28,14 @@ export const HomeHeaderItemPanel = styled.div`
       }
     }
 
-    .blockchain__item__value {
+    .blockchainItemValue {
       color: #000;
       font-weight: 600;
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
 
-      .blockchain__item__left__value {
+      .blockchainItemLeftValue {
         font-size: 20px;
 
         @media (max-width: 750px) {
@@ -43,7 +43,7 @@ export const HomeHeaderItemPanel = styled.div`
         }
       }
 
-      .blockchain__item__right__value {
+      .blockchainItemRightValue {
         font-size: 14px;
 
         @media (max-width: 750px) {
@@ -51,17 +51,9 @@ export const HomeHeaderItemPanel = styled.div`
         }
       }
     }
-
-    .blockchain__item__separate {
-      margin: 10px 0 20px;
-      height: 1px;
-      background: #eaeaea;
-      width: 100%;
-      transform: ${() => `scaleY(${Math.ceil((1.0 / window.devicePixelRatio) * 10.0) / 10.0})`};
-    }
   }
 
-  .blockchain__item__between_separate {
+  .blockchainItemBetweenSeparate {
     height: 90%;
     background: #eaeaea;
     width: 1px;
@@ -78,7 +70,7 @@ export const HomeStatisticItemPanel = styled.div`
     margin-left: ${(props: { isFirst?: boolean }) => (props.isFirst ? '0px' : '40px')};
   }
 
-  .home__statistic__item__name {
+  .homeStatisticItemName {
     font-size: 14px;
     color: #fff;
 
@@ -87,7 +79,7 @@ export const HomeStatisticItemPanel = styled.div`
     }
   }
 
-  .home__statistic__item__value {
+  .homeStatisticItemValue {
     font-size: ${(props: { isFirst?: boolean }) => (props.isFirst ? '26px' : '20px')};
     color: #fff;
     font-weight: bold;
@@ -118,7 +110,7 @@ export const BlockPanel = styled.div`
   border-radius: 6px;
   box-shadow: 0 2px 6px 0 rgb(77 77 77 / 20%);
 
-  .block__card__separate {
+  .blockCardSeparate {
     background: #eaeaea;
     width: auto;
     margin: 0 16px;
@@ -137,7 +129,7 @@ export const TransactionPanel = styled.div`
   border-radius: 6px;
   box-shadow: 0 2px 6px 0 rgb(77 77 77 / 20%);
 
-  .transaction__card__separate {
+  .transactionCardSeparate {
     background: #eaeaea;
     width: auto;
     margin: 0 16px;
@@ -184,18 +176,13 @@ export const ContentTable = styled.div`
   width: 100%;
   z-index: 2;
 
-  .block__green__background {
+  .blockGreenBackground {
     margin-left: -20px;
     height: 61px;
     width: calc(100% + 40px);
     background-color: ${props => props.theme.primary};
     z-index: 1;
   }
-
-  .block__panel {
-    margin-top: -41px;
-    z-index: 2;
-  }
 `
 
 export const TableHeaderPanel = styled.div`
@@ -224,7 +211,7 @@ export const TableHeaderPanel = styled.div`
 export const TableMorePanel: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const { children, className, ...rest } = props
   return (
-    <div className={classNames(styles.TableMorePanel, className)} {...rest}>
+    <div className={classNames(styles.tableMorePanel, className)} {...rest}>
       {children}
     </div>
   )
diff --git a/src/pages/NervosDao/DaoOverview/index.tsx b/src/pages/NervosDao/DaoOverview/index.tsx
index ae2dc4917..4df2ce447 100644
--- a/src/pages/NervosDao/DaoOverview/index.tsx
+++ b/src/pages/NervosDao/DaoOverview/index.tsx
@@ -110,25 +110,21 @@ const nervosDaoItemContents = (nervosDao: State.NervosDao): NervosDaoItemContent
 
 const NervosDaoLeftItem = ({ item, firstLine }: { item: NervosDaoItemContent; firstLine?: boolean }) => (
   <DaoOverviewLeftItemPanel hasChange={!!item.change} symbol={item.changeSymbol} hasTooltip={!!item.titleTooltip}>
-    <div className="dao__overview__item__container">
-      <div className="dao__overview__item_top">
-        <span className="dao__overview__item_title">{item.title}</span>
+    <div className="daoOverviewItemContainer">
+      <div className="daoOverviewItemTop">
+        <span className="daoOverviewItemTitle">{item.title}</span>
         {item.titleTooltip && <HelpTip title={item.titleTooltip} />}
         {item.change && (
           <>
-            <img
-              className="dao__overview__item_change_icon"
-              src={daoIcon(item.changeSymbol)}
-              alt="nervos dao change icon"
-            />
+            <img className="daoOverviewItemChangeIcon" src={daoIcon(item.changeSymbol)} alt="nervos dao change icon" />
             <Tooltip placement="top" title={item.tooltip}>
-              <span className="dao__overview__item_change">{item.change}</span>
+              <span className="daoOverviewItemChange">{item.change}</span>
             </Tooltip>
           </>
         )}
       </div>
-      <div className="dao__overview__item_content">{item.content}</div>
-      {firstLine && <span className="dao__overview__bottom__line" />}
+      <div className="daoOverviewItemContent">{item.content}</div>
+      {firstLine && <span className="daoOverviewBottomLine" />}
     </div>
   </DaoOverviewLeftItemPanel>
 )
@@ -143,19 +139,19 @@ const NervosDaoOverviewLeftComp: FC<{ nervosDao: State.NervosDao }> = ({ nervosD
       <DaoOverviewLeftPanel>
         <div>
           <NervosDaoLeftItem item={leftItems[0]} />
-          <span className="dao__overview__left_column_separate" />
+          <span className="daoOverviewLeftColumnSeparate" />
           <NervosDaoLeftItem item={leftItems[1]} />
         </div>
-        <span className="dao__overview__middle__separate" />
+        <span className="daoOverviewMiddleSeparate" />
         <div>
           <NervosDaoLeftItem item={leftItems[3]} />
-          <span className="dao__overview__left_column_separate" />
+          <span className="daoOverviewLeftColumnSeparate" />
           <NervosDaoLeftItem item={leftItems[4]} />
         </div>
-        <span className="dao__overview__middle__separate" />
+        <span className="daoOverviewMiddleSeparate" />
         <div>
           <NervosDaoLeftItem item={leftItems[2]} />
-          <span className="dao__overview__left_column_separate" />
+          <span className="daoOverviewLeftColumnSeparate" />
           <NervosDaoLeftItem item={leftItems[5]} />
         </div>
       </DaoOverviewLeftPanel>
@@ -168,13 +164,13 @@ const NervosDaoOverviewLeftComp: FC<{ nervosDao: State.NervosDao }> = ({ nervosD
           <NervosDaoLeftItem item={item} key={item.title} firstLine={index === 0} />
         ))}
       </div>
-      <span className="dao__overview__middle__separate" />
+      <span className="daoOverviewMiddleSeparate" />
       <div>
         {leftItems.slice(2, 4).map((item, index) => (
           <NervosDaoLeftItem item={item} key={item.title} firstLine={index === 0} />
         ))}
       </div>
-      <span className="dao__overview__middle__separate" />
+      <span className="daoOverviewMiddleSeparate" />
       <div>
         {leftItems.slice(4).map((item, index) => (
           <NervosDaoLeftItem item={item} key={item.title} firstLine={index === 0} />
@@ -273,7 +269,7 @@ const NervosDaoRightCapacity = ({ reward }: { reward: string }) => {
 const NervosDaoPieItem = ({ item }: { item: NervosDaoPieItemContent }) => (
   <NervosDaoPieItemPanel>
     <div
-      className="nervos__dao__overview_pie_icon"
+      className="nervosDaoOverviewPieIcon"
       style={{
         backgroundColor: item.color,
       }}
@@ -313,10 +309,10 @@ export default ({ nervosDao }: { nervosDao: State.NervosDao }) => {
   return (
     <DaoOverviewPanel>
       <NervosDaoOverviewLeftComp nervosDao={nervosDao} />
-      <span className="dao__overview__separate" />
+      <span className="daoOverviewSeparate" />
       <DaoOverviewRightPanel>
         <DaoOverviewPieChartPanel>
-          <div className="nervos__dao__overview_pie_title">
+          <div className="nervosDaoOverviewPieTitle">
             <span>{i18n.t('nervos_dao.secondary_issuance')}</span>
             <HelpTip title={i18n.t('glossary.secondary_issuance')} />
           </div>
diff --git a/src/pages/NervosDao/DaoOverview/styled.tsx b/src/pages/NervosDao/DaoOverview/styled.tsx
index bb043c3fa..038ccbea4 100644
--- a/src/pages/NervosDao/DaoOverview/styled.tsx
+++ b/src/pages/NervosDao/DaoOverview/styled.tsx
@@ -22,7 +22,7 @@ export const DaoOverviewPanel = styled.div`
     flex-direction: column;
   }
 
-  .dao__overview__separate {
+  .daoOverviewSeparate {
     width: 1px;
     height: auto;
     background: #eaeaea;
@@ -64,7 +64,7 @@ export const DaoOverviewLeftPanel = styled.div`
     }
   }
 
-  .dao__overview__middle__separate {
+  .daoOverviewMiddleSeparate {
     width: 1px;
     height: 130px;
     background: #eaeaea;
@@ -78,7 +78,7 @@ export const DaoOverviewLeftPanel = styled.div`
     }
   }
 
-  .dao__overview__left_column_separate {
+  .daoOverviewLeftColumnSeparate {
     width: 1px;
     height: auto;
     margin: 3% 0;
@@ -115,7 +115,7 @@ export const DaoOverviewPieChartPanel = styled.div`
     padding-right: 10px;
   }
 
-  .nervos__dao__overview_pie_title {
+  .nervosDaoOverviewPieTitle {
     display: flex;
     align-items: center;
     font-size: 14px;
@@ -156,20 +156,20 @@ export const DaoOverviewLeftItemPanel = styled.div`
     background: #f8f9fa;
   }
 
-  .dao__overview__item__container {
+  .daoOverviewItemContainer {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
   }
 
-  .dao__overview__item_top {
+  .daoOverviewItemTop {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-top: 10px;
 
-    .dao__overview__item_title {
+    .daoOverviewItemTitle {
       color: #5e5e5e;
       font-size: 14px;
       overflow: hidden;
@@ -191,14 +191,14 @@ export const DaoOverviewLeftItemPanel = styled.div`
       }
     }
 
-    .dao__overview__item_change_icon {
+    .daoOverviewItemChangeIcon {
       width: ${(props: { symbol?: string }) => (props.symbol === 'zero' ? '10px' : '7px')};
       height: ${(props: { symbol?: string }) => (props.symbol === 'zero' ? '7px' : '10px')};
       margin-left: 5px;
       margin-right: 3px;
     }
 
-    .dao__overview__item_change {
+    .daoOverviewItemChange {
       font-size: 12px;
       font-weight: bold;
       color: ${(props: { symbol?: string; theme: any }) =>
@@ -211,7 +211,7 @@ export const DaoOverviewLeftItemPanel = styled.div`
     }
   }
 
-  .dao__overview__item_content {
+  .daoOverviewItemContent {
     color: #000;
     font-size: 16px;
     font-weight: bold;
@@ -222,7 +222,7 @@ export const DaoOverviewLeftItemPanel = styled.div`
     }
   }
 
-  .dao__overview__bottom__line {
+  .daoOverviewBottomLine {
     width: 100%;
     height: 1px;
     background: #eaeaea;
@@ -242,7 +242,7 @@ export const NervosDaoPieItemPanel = styled.div`
     margin: 5px 0;
   }
 
-  .nervos__dao__overview_pie_icon {
+  .nervosDaoOverviewPieIcon {
     width: 9px;
     height: 9px;
     margin-right: 10px;
diff --git a/src/pages/NervosDao/index.tsx b/src/pages/NervosDao/index.tsx
index fd453e01e..309d5c2a5 100644
--- a/src/pages/NervosDao/index.tsx
+++ b/src/pages/NervosDao/index.tsx
@@ -64,15 +64,15 @@ export const NervosDao = () => {
       <DaoContentPanel className="container">
         <DaoOverview nervosDao={queryNervosDao.data ?? defaultNervosDaoInfo} />
         <DaoTabBarPanel>
-          <div className="nervos_dao_tab_bar">
+          <div className="nervosDaoTabBar">
             <SimpleButton
-              className={tab === 'transactions' ? 'tab_bar_selected' : 'tab_bar_normal'}
+              className={tab === 'transactions' ? 'tabBarSelected' : 'tabBarNormal'}
               onClick={() => push('/nervosdao?tab=transactions')}
             >
               {t('nervos_dao.dao_tab_transactions')}
             </SimpleButton>
             <SimpleButton
-              className={tab === 'depositors' ? 'tab_bar_selected' : 'tab_bar_normal'}
+              className={tab === 'depositors' ? 'tabBarSelected' : 'tabBarNormal'}
               onClick={() => push('/nervosdao?tab=depositors')}
             >
               {t('nervos_dao.dao_tab_depositors')}
diff --git a/src/pages/NervosDao/styled.tsx b/src/pages/NervosDao/styled.tsx
index 40499db13..af15faf3a 100644
--- a/src/pages/NervosDao/styled.tsx
+++ b/src/pages/NervosDao/styled.tsx
@@ -11,28 +11,6 @@ export const DaoContentPanel = styled.div`
     margin: 0;
     padding: 20px;
   }
-
-  .nervos_dao_title {
-    width: 100%;
-    border-radius: 6px;
-    box-shadow: 2px 2px 6px 0 #dfdfdf;
-    background-color: #fff;
-    height: 80px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding-left: 40px;
-    font-size: 30px;
-    font-weight: 500;
-    color: #000;
-
-    @media (max-width: 750px) {
-      height: 50px;
-      box-shadow: 1px 1px 3px 0 #dfdfdf;
-      font-size: 15px;
-      padding-left: 20px;
-    }
-  }
 `
 
 export const DaoTabBarPanel = styled.div`
@@ -65,7 +43,7 @@ export const DaoTabBarPanel = styled.div`
     }
   }
 
-  .nervos_dao_tab_bar {
+  .nervosDaoTabBar {
     display: flex;
     height: 30px;
     cursor: pointer;
@@ -94,7 +72,7 @@ export const DaoTabBarPanel = styled.div`
       }
     }
 
-    .tab_bar_normal {
+    .tabBarNormal {
       width: 140px;
       text-align: center;
       color: #000;
@@ -106,7 +84,7 @@ export const DaoTabBarPanel = styled.div`
       }
     }
 
-    .tab_bar_selected {
+    .tabBarSelected {
       width: 140px;
       text-align: center;
       font-size: 18px;
diff --git a/src/pages/NftCollectionInfo/styles.module.scss b/src/pages/NftCollectionInfo/styles.module.scss
index 0febe02be..12daf13bf 100644
--- a/src/pages/NftCollectionInfo/styles.module.scss
+++ b/src/pages/NftCollectionInfo/styles.module.scss
@@ -290,6 +290,7 @@
 
 .antPopover {
   :global {
+    /* stylelint-disable-next-line selector-class-pattern */
     .ant-popover-inner {
       border-radius: 8px;
       box-shadow: 0 2px 10px 0 #eee;
diff --git a/src/pages/NftCollections/styles.module.scss b/src/pages/NftCollections/styles.module.scss
index 4823b570d..8bf5e3e82 100644
--- a/src/pages/NftCollections/styles.module.scss
+++ b/src/pages/NftCollections/styles.module.scss
@@ -186,11 +186,13 @@
 
 .antPopover {
   :global {
+    /* stylelint-disable-next-line selector-class-pattern */
     .ant-popover-inner {
       border-radius: 8px;
       box-shadow: 0 2px 10px 0 #eee;
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     .ant-popover-inner-content {
       padding: 14px 24px 14px 16px;
     }
diff --git a/src/pages/Script/ScriptsComp.tsx b/src/pages/Script/ScriptsComp.tsx
index ae383a85e..ae363dd2c 100644
--- a/src/pages/Script/ScriptsComp.tsx
+++ b/src/pages/Script/ScriptsComp.tsx
@@ -95,7 +95,7 @@ export const CellInfo = ({ cell }: { cell: State.Cell }) => {
   return (
     <TransactionCellInfoPanel>
       <SimpleButton
-        className="transaction__cell__info__content"
+        className="transactionCellInfoContent"
         onClick={() => {
           setShowModal(true)
         }}
@@ -177,7 +177,7 @@ export const ScriptCells = ({
                       <td align="left">
                         <AddressText
                           disableTooltip
-                          className="transaction_item__hash"
+                          className="transactionItemHash"
                           linkProps={{
                             to: `/transaction/${record.txHash}`,
                           }}
diff --git a/src/pages/Script/styles.module.scss b/src/pages/Script/styles.module.scss
index db280e2be..cc4404cee 100644
--- a/src/pages/Script/styles.module.scss
+++ b/src/pages/Script/styles.module.scss
@@ -25,16 +25,19 @@
   border-radius: 6px 6px 0 0;
 
   :global {
+    /* stylelint-disable-next-line selector-class-pattern */
     .ant-tabs-nav {
       &::before {
         border-bottom-width: 4px;
       }
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     .ant-tabs-nav-list {
       margin-left: 40px;
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     .ant-tabs-tab-btn {
       color: #333;
       font-weight: 400;
@@ -47,13 +50,16 @@
       }
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     .ant-tabs-tab-active {
+      /* stylelint-disable-next-line selector-class-pattern */
       .ant-tabs-tab-btn {
         color: #333;
       }
     }
   }
 
+  /* stylelint-disable-next-line selector-class-pattern */
   & > :global(.ant-tabs-nav .ant-tabs-ink-bar) {
     background: linear-gradient(
       to right,
@@ -132,7 +138,7 @@
     float: right;
   }
 
-  :global(.transaction__cell__info__content) {
+  :global(.transactionCellInfoContent) {
     width: fit-content;
     padding: 0 20px;
     line-height: 0;
diff --git a/src/pages/SearchFail/index.tsx b/src/pages/SearchFail/index.tsx
index 193f79800..f27cd9f25 100644
--- a/src/pages/SearchFail/index.tsx
+++ b/src/pages/SearchFail/index.tsx
@@ -22,7 +22,7 @@ export default ({ address }: { address?: string }) => {
   return (
     <Content>
       <SearchPanel className="container">
-        <div className="search__fail__bar">
+        <div className="searchFailBar">
           <Search content={query as string} hasButton />
         </div>
         <SearchContent>
@@ -36,7 +36,7 @@ export default ({ address }: { address?: string }) => {
           ) : (
             <>
               <span>{i18n.t('search.empty_result')}</span>
-              <span className="search__fail__items">{i18n.t('search.empty_result_items')}</span>
+              <span className="searchFailItems">{i18n.t('search.empty_result_items')}</span>
             </>
           )}
         </SearchContent>
diff --git a/src/pages/SearchFail/styled.tsx b/src/pages/SearchFail/styled.tsx
index e3fa4d8c7..caf420644 100644
--- a/src/pages/SearchFail/styled.tsx
+++ b/src/pages/SearchFail/styled.tsx
@@ -9,7 +9,7 @@ export const SearchPanel = styled.div`
     margin-bottom: 150px;
   }
 
-  .search__fail__bar {
+  .searchFailBar {
     width: 600px;
     margin: 0 auto;
 
@@ -49,7 +49,7 @@ export const SearchContent = styled.div`
     font-size: 11px;
   }
 
-  .search__fail__items {
+  .searchFailItems {
     font-weight: bold;
     font-size: 16px;
 
diff --git a/src/pages/SimpleUDT/index.tsx b/src/pages/SimpleUDT/index.tsx
index 4d33a8953..bbbf33097 100644
--- a/src/pages/SimpleUDT/index.tsx
+++ b/src/pages/SimpleUDT/index.tsx
@@ -127,8 +127,8 @@ export const SimpleUDT = () => {
         </SimpleUDTHashCard>
 
         <UDTTransactionTitlePanel>
-          <div className="udt__transaction__container">
-            <div className="udt__transaction__title">
+          <div className="udtTransactionContainer">
+            <div className="udtTransactionTitle">
               {`${t('transaction.transactions')} (${localeNumberString(total)})`}
             </div>
             <div className={styles.searchAndfilter}>
diff --git a/src/pages/SimpleUDT/styled.tsx b/src/pages/SimpleUDT/styled.tsx
index 5d049d124..e8489ae74 100644
--- a/src/pages/SimpleUDT/styled.tsx
+++ b/src/pages/SimpleUDT/styled.tsx
@@ -78,86 +78,6 @@ export const SimpleUDTLockScriptController = styled.div`
   }
 `
 
-export const SimpleUDTLockScriptPanel = styled.div`
-  width: 100%;
-  margin-top: 20px;
-
-  @media (max-width: 750px) {
-    margin-top: 10px;
-  }
-
-  .address__lock_script_title {
-    font-weight: 500;
-    height: 25px;
-    padding: 0 0 5px;
-
-    @media (max-width: 750px) {
-      height: 16px;
-      padding: 0;
-    }
-  }
-`
-
-export const SimpleUDTLockScriptItemPanel = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  align-items: flex-start;
-  margin-top: 10px;
-
-  @media (min-width: 750px) {
-    height: 20px;
-  }
-
-  @media (max-width: 750px) {
-    flex-direction: column;
-  }
-
-  .address_lock_script__title {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 130px;
-
-    &::before {
-      content: ' ';
-      width: 9px;
-      height: 9px;
-      border-radius: 50%;
-      background: ${prop => prop.theme.primary};
-
-      @media (max-width: 750px) {
-        width: 5px;
-        height: 5px;
-      }
-    }
-
-    > span {
-      margin-left: 10px;
-      font-weight: 500;
-
-      @media (max-width: 750px) {
-        margin-left: 5px;
-      }
-    }
-  }
-
-  .address_lock_script__content {
-    flex: 1;
-    margin-left: 20px;
-    display: flex;
-    flex-direction: column;
-    transform: translateY(2px);
-
-    @media (max-width: 750px) {
-      margin-left: 10px;
-      word-wrap: break-word;
-      word-break: break-all;
-      transform: translateY(0);
-    }
-  }
-`
-
 export const TypeScriptController = styled(SimpleButton)`
   font-size: 16px;
   font-weight: 600;
@@ -204,7 +124,7 @@ export const UDTTransactionTitlePanel = styled.div`
     padding: 16px;
   }
 
-  .udt__transaction__container {
+  .udtTransactionContainer {
     width: 100%;
     height: 100%;
     display: flex;
@@ -219,7 +139,7 @@ export const UDTTransactionTitlePanel = styled.div`
     }
   }
 
-  .udt__transaction__title {
+  .udtTransactionTitle {
     font-size: 24px;
     font-weight: 600;
     font-style: normal;
diff --git a/src/pages/SimpleUDT/styles.module.scss b/src/pages/SimpleUDT/styles.module.scss
index 622176197..e9d2e39b2 100644
--- a/src/pages/SimpleUDT/styles.module.scss
+++ b/src/pages/SimpleUDT/styles.module.scss
@@ -92,6 +92,7 @@
 
 .antPopover {
   :global {
+    /* stylelint-disable-next-line selector-class-pattern */
     .ant-popover-inner {
       border-radius: 8px;
       box-shadow: 0 2px 10px 0 #eee;
diff --git a/src/pages/StatisticsChart/common/index.tsx b/src/pages/StatisticsChart/common/index.tsx
index 5d66b21f2..d12885913 100644
--- a/src/pages/StatisticsChart/common/index.tsx
+++ b/src/pages/StatisticsChart/common/index.tsx
@@ -130,13 +130,13 @@ const ChartPage = ({
   return (
     <Content>
       <ChartDetailTitle className="container">
-        <div className="chart__detail__title__panel">
+        <div className="chartDetailTitlePanel">
           <span>{title}</span>
           {description && <HelpTip placement="bottom" title={description} iconProps={{ alt: 'chart help' }} />}
         </div>
         {csv && (
           <a
-            className="chart__detail__title__download"
+            className="chartDetailTitleDownload"
             rel="noopener noreferrer"
             href={`data:text/csv;charset=utf-8,${encodeURI(csv)}`}
             target="_blank"
diff --git a/src/pages/StatisticsChart/common/styled.tsx b/src/pages/StatisticsChart/common/styled.tsx
index ac768e555..f3c493182 100644
--- a/src/pages/StatisticsChart/common/styled.tsx
+++ b/src/pages/StatisticsChart/common/styled.tsx
@@ -17,7 +17,7 @@ export const ChartDetailTitle = styled.div`
     margin-top: 20px;
   }
 
-  .chart__detail__title__panel {
+  .chartDetailTitlePanel {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -42,7 +42,7 @@ export const ChartDetailTitle = styled.div`
     }
   }
 
-  .chart__detail__title__download {
+  .chartDetailTitleDownload {
     width: 100px;
     padding: 5px 0;
     border-radius: 2px;
diff --git a/src/pages/StatisticsChart/index.tsx b/src/pages/StatisticsChart/index.tsx
index 9b5a2cc6c..c6fbce4f8 100644
--- a/src/pages/StatisticsChart/index.tsx
+++ b/src/pages/StatisticsChart/index.tsx
@@ -44,8 +44,8 @@ interface ChartCategory {
 }
 
 const ChartTitle = ({ chartData }: { chartData: ChartData }) => (
-  <div className="chart__card__title__penal">
-    <div className="chart__card_title">{chartData.title}</div>
+  <div className="chartCardTitlePenal">
+    <div className="chartCardTitle">{chartData.title}</div>
     {chartData.description && (
       <HelpTip placement="bottom" title={chartData.description} iconProps={{ alt: 'chart help' }} />
     )}
@@ -59,7 +59,7 @@ const ChartCard = ({ chartData }: { chartData: ChartData }) => {
       {isMobile && <ChartTitle chartData={chartData} />}
       <Link to={chartData.path}>
         {!isMobile && <ChartTitle chartData={chartData} />}
-        <div className="chart__card_body">{chartData.chart}</div>
+        <div className="chartCardBody">{chartData.chart}</div>
       </Link>
     </ChartCardPanel>
   )
@@ -235,8 +235,8 @@ export default () => {
         <ChartsTitle>{i18n.t('statistic.charts_title')}</ChartsTitle>
         {chartsData().map(chartData => (
           <ChartsPanel key={chartData.category}>
-            <div className="charts__category__title">{chartData.category}</div>
-            <div className="charts__category__panel">
+            <div className="chartsCategoryTitle">{chartData.category}</div>
+            <div className="chartsCategoryPanel">
               {chartData.charts.map(chart => (
                 <ChartCard chartData={chart} key={chart.title} />
               ))}
diff --git a/src/pages/StatisticsChart/styled.tsx b/src/pages/StatisticsChart/styled.tsx
index fe9caadcd..c95e8e171 100644
--- a/src/pages/StatisticsChart/styled.tsx
+++ b/src/pages/StatisticsChart/styled.tsx
@@ -25,14 +25,14 @@ export const ChartsPanel = styled.div`
     padding: 20px 10px;
   }
 
-  .charts__category__title {
+  .chartsCategoryTitle {
     font-size: 20px;
     font-weight: 600;
     color: #000;
     margin-left: 10px;
   }
 
-  .charts__category__panel {
+  .chartsCategoryPanel {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
@@ -51,13 +51,14 @@ export const ChartCardPanel = styled.div`
     width: 100%;
   }
 
+  /* stylelint-disable-next-line selector-class-pattern */
   .echarts-for-react {
     canvas {
       cursor: pointer;
     }
   }
 
-  .chart__card__title__penal {
+  .chartCardTitlePenal {
     display: flex;
     align-items: center;
     padding-left: 12px;
@@ -74,7 +75,7 @@ export const ChartCardPanel = styled.div`
     }
   }
 
-  .chart__card_title {
+  .chartCardTitle {
     height: 40px;
     line-height: 40px;
     color: #000;
@@ -82,7 +83,7 @@ export const ChartCardPanel = styled.div`
     font-weight: 600;
   }
 
-  .chart__card_body {
+  .chartCardBody {
     border-radius: 0 0 6px 6px;
     box-shadow: 2px 2px 10px 0 rgb(43 43 43 / 5%);
     border: 1px solid #e2e2e2;
diff --git a/src/pages/Tokens/index.tsx b/src/pages/Tokens/index.tsx
index 5418ab54c..ab19b3b95 100644
--- a/src/pages/Tokens/index.tsx
+++ b/src/pages/Tokens/index.tsx
@@ -56,8 +56,8 @@ const TokenItem = ({ token, isLast }: { token: State.UDT; isLast?: boolean }) =>
 
   return (
     <TokensTableItem>
-      <div className="tokens__item__content">
-        <div className="tokens__item__name__panel">
+      <div className="tokensItemContent">
+        <div className="tokensItemNamePanel">
           <img src={token.iconFile ? token.iconFile : SUDTTokenIcon} alt="token icon" />
           <div>
             <TokensItemNamePanel>
@@ -78,18 +78,16 @@ const TokenItem = ({ token, isLast }: { token: State.UDT; isLast?: boolean }) =>
                 </Tooltip>
               )}
             </TokensItemNamePanel>
-            {token.description && !isMobile && <div className="tokens__item__description">{token.description}</div>}
+            {token.description && !isMobile && <div className="tokensItemDescription">{token.description}</div>}
           </div>
         </div>
-        <div className="tokens__item__transactions">{transactions}</div>
-        <div className="tokens__item__address__count">{addressCount}</div>
+        <div className="tokensItemTransactions">{transactions}</div>
+        <div className="tokensItemAddressCount">{addressCount}</div>
         {!isMobile && (
-          <div className="tokens__item__created__time">
-            {parseDateNoTime(Number(token.createdAt) / 1000, false, '-')}
-          </div>
+          <div className="tokensItemCreatedTime">{parseDateNoTime(Number(token.createdAt) / 1000, false, '-')}</div>
         )}
       </div>
-      {!isLast && <div className="tokens__item__separate" />}
+      {!isLast && <div className="tokensItemSeparate" />}
     </TokensTableItem>
   )
 }
@@ -119,7 +117,7 @@ export default () => {
   return (
     <Content>
       <TokensPanel className="container">
-        <div className="tokens__title__panel">
+        <div className="tokensTitlePanel">
           <span>{i18n.t('udt.tokens')}</span>
           <a rel="noopener noreferrer" target="_blank" href={udtSubmitEmail()}>
             {i18n.t('udt.submit_token_info')}
diff --git a/src/pages/Tokens/styled.tsx b/src/pages/Tokens/styled.tsx
index f1e3fc732..6bc9f3df4 100644
--- a/src/pages/Tokens/styled.tsx
+++ b/src/pages/Tokens/styled.tsx
@@ -9,7 +9,7 @@ export const TokensPanel = styled.div`
     margin-bottom: 30px;
   }
 
-  .tokens__title__panel {
+  .tokensTitlePanel {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -117,7 +117,7 @@ export const TokensTableItem = styled.div`
   background: white;
   padding: 0 15px;
 
-  .tokens__item__content {
+  .tokensItemContent {
     display: flex;
     align-items: center;
     width: 100%;
@@ -130,7 +130,7 @@ export const TokensTableItem = styled.div`
     }
   }
 
-  .tokens__item__name__panel {
+  .tokensItemNamePanel {
     display: flex;
     flex: 4.6;
     align-items: center;
@@ -148,7 +148,7 @@ export const TokensTableItem = styled.div`
     > div {
       margin-left: 10px;
 
-      .tokens__item__description {
+      .tokensItemDescription {
         font-size: 12px;
         letter-spacing: 0.17px;
         line-height: normal;
@@ -162,7 +162,7 @@ export const TokensTableItem = styled.div`
     }
   }
 
-  .tokens__item__transactions {
+  .tokensItemTransactions {
     flex: 1.8;
     font-size: 14px;
     text-align: right;
@@ -178,7 +178,7 @@ export const TokensTableItem = styled.div`
     }
   }
 
-  .tokens__item__address__count {
+  .tokensItemAddressCount {
     flex: 1.8;
     font-size: 14px;
     text-align: right;
@@ -194,7 +194,7 @@ export const TokensTableItem = styled.div`
     }
   }
 
-  .tokens__item__created__time {
+  .tokensItemCreatedTime {
     flex: 1.8;
     font-size: 12px;
     text-align: right;
@@ -205,7 +205,7 @@ export const TokensTableItem = styled.div`
     }
   }
 
-  .tokens__item__separate {
+  .tokensItemSeparate {
     background: #d8d8d8;
     width: 100%;
     height: 1px;
diff --git a/src/pages/Transaction/TransactionCell/index.tsx b/src/pages/Transaction/TransactionCell/index.tsx
index 6425f43af..d2f9f548e 100644
--- a/src/pages/Transaction/TransactionCell/index.tsx
+++ b/src/pages/Transaction/TransactionCell/index.tsx
@@ -66,7 +66,7 @@ const Addr: FC<{ address: string; isCellBase: boolean }> = ({ address, isCellBas
     return (
       <AddressText
         linkProps={{
-          className: 'transaction__cell_address_link',
+          className: 'transactionCellAddressLink',
           to: `/address/${address}`,
         }}
       >
@@ -75,7 +75,7 @@ const Addr: FC<{ address: string; isCellBase: boolean }> = ({ address, isCellBas
     )
   }
   return (
-    <span className="transaction__cell_address_no_link">
+    <span className="transactionCellAddressNoLink">
       {isCellBase ? 'Cellbase' : i18n.t('address.unable_decode_address')}
     </span>
   )
@@ -113,7 +113,7 @@ const TransactionCellIndexAddress = ({
   }
   return (
     <TransactionCellAddressPanel>
-      <div className="transaction__cell_index">
+      <div className="transactionCellIndex">
         <div>{`#${index}`}</div>
       </div>
       <TransactionCellHashPanel highLight={cell.addressHash !== null}>
@@ -236,7 +236,7 @@ const TransactionCellDetail = ({ cell }: { cell: State.Cell }) => {
   }
   return (
     <TransactionCellDetailPanel isWithdraw={cell.cellType === 'nervos_dao_withdrawing'}>
-      <div className="transaction__cell__detail__panel">
+      <div className="transactionCellDetailPanel">
         {tooltip ? (
           <Tooltip placement="top" title={tooltip}>
             <img src={detailIcon} alt="cell detail" />
@@ -255,13 +255,13 @@ const TransactionCellInfo = ({ cell, children }: { cell: State.Cell; children: s
   return (
     <TransactionCellInfoPanel>
       <SimpleButton
-        className="transaction__cell__info__content"
+        className="transactionCellInfoContent"
         onClick={() => {
           setShowModal(true)
         }}
       >
         <div>{children}</div>
-        <div className="transaction__cell__info__separate" />
+        <div className="transactionCellInfoSeparate" />
       </SimpleButton>
       <SimpleModal isShow={showModal} setIsShow={setShowModal}>
         <TransactionCellDetailModal>
@@ -285,8 +285,8 @@ const TransactionCellCapacityAmount = ({ cell }: { cell: State.Cell }) => {
 
 const TransactionCellMobileItem = ({ title, value = null }: { title: string | ReactNode; value?: ReactNode }) => (
   <TransactionCellCardContent>
-    <div className="transaction__cell__card__title">{title}</div>
-    <div className="transaction__cell__card__value">{value}</div>
+    <div className="transactionCellCardTitle">{title}</div>
+    <div className="transactionCellCardValue">{value}</div>
   </TransactionCellCardContent>
 )
 
@@ -309,7 +309,7 @@ export default ({
   if (isMobile) {
     return (
       <TransactionCellCardPanel>
-        <div className="transaction__cell__card__separate" />
+        <div className="transactionCellCardSeparate" />
         <TransactionCellMobileItem
           title={
             cell.fromCellbase && cellType === CellType.Input ? (
@@ -344,7 +344,7 @@ export default ({
   return (
     <TransactionCellPanel id={cellType === CellType.Output ? `output_${index}_${txHash}` : ''}>
       <TransactionCellContentPanel isCellbase={cell.fromCellbase}>
-        <div className="transaction__cell__address">
+        <div className="transactionCellAddress">
           {cell.fromCellbase && cellType === CellType.Input ? (
             <Cellbase cell={cell} cellType={cellType} isDetail />
           ) : (
@@ -352,7 +352,7 @@ export default ({
           )}
         </div>
 
-        <div className="transaction__cell_detail">
+        <div className="transactionCellDetail">
           {cell.fromCellbase && cellType === CellType.Input ? (
             <TransactionReward showReward={showReward} cell={cell} />
           ) : (
@@ -360,11 +360,11 @@ export default ({
           )}
         </div>
 
-        <div className="transaction__cell_capacity">
+        <div className="transactionCellCapacity">
           <TransactionCellCapacityAmount cell={cell} />
         </div>
 
-        <div className="transaction__detail__cell_info">
+        <div className="transactionDetailCellInfo">
           <TransactionCellInfo cell={cell}>Cell Info</TransactionCellInfo>
         </div>
       </TransactionCellContentPanel>
diff --git a/src/pages/Transaction/TransactionCell/styled.tsx b/src/pages/Transaction/TransactionCell/styled.tsx
index 760bfcdd3..e36d30951 100644
--- a/src/pages/Transaction/TransactionCell/styled.tsx
+++ b/src/pages/Transaction/TransactionCell/styled.tsx
@@ -15,23 +15,23 @@ export const TransactionCellContentPanel = styled.div`
   color: #000;
   text-align: center;
 
-  .transaction__cell__address {
+  .transactionCellAddress {
     display: flex;
     flex: 0.4;
     min-width: 0;
   }
 
-  .transaction__cell_detail {
+  .transactionCellDetail {
     flex: ${(props: { isCellbase: boolean }) => (props.isCellbase ? '0.6' : '0.22')};
   }
 
-  .transaction__cell_capacity {
+  .transactionCellCapacity {
     flex: 0.3;
     display: ${(props: { isCellbase: boolean }) => (props.isCellbase ? 'none' : 'flex')};
     justify-content: flex-end;
   }
 
-  .transaction__detail__cell_info {
+  .transactionDetailCellInfo {
     flex: 0.08;
     font-size: 12px;
     display: ${(props: { isCellbase: boolean }) => (props.isCellbase ? 'none' : 'flex')};
@@ -48,7 +48,7 @@ export const TransactionCellContentPanel = styled.div`
   }
 `
 export const TransactionCellInfoPanel = styled.div`
-  .transaction__cell__info__content {
+  .transactionCellInfoContent {
     color: rgb(0 0 0 / 60%);
     cursor: pointer;
     width: 45px;
@@ -57,7 +57,7 @@ export const TransactionCellInfoPanel = styled.div`
       width: auto;
     }
 
-    .transaction__cell__info__separate {
+    .transactionCellInfoSeparate {
       background: rgb(0 0 0 / 60%);
       width: 45px;
       height: 1px;
@@ -71,7 +71,7 @@ export const TransactionCellInfoPanel = styled.div`
     &:hover {
       color: ${props => props.theme.primary};
 
-      .transaction__cell__info__separate {
+      .transactionCellInfoSeparate {
         background: ${props => props.theme.primary};
       }
     }
@@ -83,7 +83,7 @@ export const TransactionCellAddressPanel = styled.div`
   display: flex;
   flex-direction: row;
 
-  .transaction__cell_index {
+  .transactionCellIndex {
     margin-right: 3px;
     color: #666;
 
@@ -125,7 +125,7 @@ export const TransactionCellHashPanel = styled.div`
     margin: 0 3px;
   }
 
-  .transaction__cell_address_link {
+  .transactionCellAddressLink {
     max-width: 70%;
 
     @media (max-width: 750px) {
@@ -133,7 +133,7 @@ export const TransactionCellHashPanel = styled.div`
     }
   }
 
-  .transaction__cell_address_no_link {
+  .transactionCellAddressNoLink {
     color: #000;
   }
 `
@@ -146,7 +146,7 @@ export const TransactionCellDetailPanel = styled.div`
   justify-content: space-between;
   align-items: center;
 
-  .transaction__cell__detail__panel {
+  .transactionCellDetailPanel {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -183,7 +183,7 @@ export const TransactionCellDetailModal = styled.div`
 `
 
 export const TransactionCellCardPanel = styled.div`
-  .transaction__cell__card__separate {
+  .transactionCellCardSeparate {
     width: 100%;
     height: 1px;
     background: #ccc;
@@ -206,7 +206,7 @@ export const TransactionCellCardContent = styled.div`
   justify-content: space-between;
   padding: 0 10px;
 
-  .transaction__cell__card__title {
+  .transactionCellCardTitle {
     flex: 1;
     min-width: 0;
     font-size: 16px;
@@ -214,7 +214,7 @@ export const TransactionCellCardContent = styled.div`
     margin-top: 3px;
   }
 
-  .transaction__cell__card__value {
+  .transactionCellCardValue {
     display: flex;
     font-size: 16px;
     color: #000;
diff --git a/src/pages/Transaction/TransactionCellList/index.tsx b/src/pages/Transaction/TransactionCellList/index.tsx
index bb904f3fc..7204a0613 100644
--- a/src/pages/Transaction/TransactionCellList/index.tsx
+++ b/src/pages/Transaction/TransactionCellList/index.tsx
@@ -85,15 +85,15 @@ export default ({
   return (
     <TransactionCellListPanel>
       <TransactionCellListTitlePanel>
-        <div className="transaction__cell_list_titles">
+        <div className="transactionCellListTitles">
           <div>{cellTitle()}</div>
           <div>{isCellbaseInput ? i18n.t('transaction.reward_info') : i18n.t('transaction.detail')}</div>
           <div>{isCellbaseInput ? '' : i18n.t('transaction.capacity_amount')}</div>
         </div>
       </TransactionCellListTitlePanel>
       <TransactionCellsPanel isScroll={isScroll}>
-        <div className="transaction__cell__title">{cellTitle()}</div>
-        <div className="transaction__cell_list_container" onScroll={(event: any) => handleScroll(event)}>
+        <div className="transactionCellTitle">{cellTitle()}</div>
+        <div className="transactionCellListContainer" onScroll={(event: any) => handleScroll(event)}>
           {cells &&
             cells
               .slice(0, offset)
diff --git a/src/pages/Transaction/TransactionCellList/styled.tsx b/src/pages/Transaction/TransactionCellList/styled.tsx
index 793a2cd6b..39a7a5ffe 100644
--- a/src/pages/Transaction/TransactionCellList/styled.tsx
+++ b/src/pages/Transaction/TransactionCellList/styled.tsx
@@ -8,7 +8,7 @@ export const TransactionCellListTitlePanel = styled.div`
     display: none;
   }
 
-  .transaction__cell_list_titles {
+  .transactionCellListTitles {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -69,7 +69,7 @@ export const TransactionCellsPanel = styled.div`
     css`
       padding-top: 10px;
 
-      .transaction__cell_list_container {
+      .transactionCellListContainer {
         max-height: 600px;
         overflow-y: scroll;
 
@@ -79,7 +79,7 @@ export const TransactionCellsPanel = styled.div`
       }
     `};
 
-  .transaction__cell__title {
+  .transactionCellTitle {
     color: #000;
     font-weight: 600;
     font-size: 20px;
diff --git a/src/pages/Transaction/TransactionCellScript/index.tsx b/src/pages/Transaction/TransactionCellScript/index.tsx
index 0a33bfba6..d58d052a4 100644
--- a/src/pages/Transaction/TransactionCellScript/index.tsx
+++ b/src/pages/Transaction/TransactionCellScript/index.tsx
@@ -292,23 +292,23 @@ export default ({ cell, onClose }: { cell: State.Cell; onClose: Function }) => {
           {i18n.t('transaction.capacity_usage')}
           <HelpTip title={i18n.t('glossary.capacity_usage')} placement="bottom" containerRef={ref} />
         </TransactionDetailCapacityUsage>
-        <div className="transaction__detail__modal__close">
+        <div className="transactionDetailModalClose">
           <img src={CloseIcon} alt="close icon" tabIndex={-1} onKeyDown={() => {}} onClick={() => onClose()} />
         </div>
       </TransactionCellDetailPanel>
 
-      <div className="transaction__detail__separate" />
+      <div className="transactionDetailSeparate" />
 
       <TransactionDetailPanel>
         {content && scriptFetched ? (
-          <div className="transaction__detail_content">
+          <div className="transactionDetailContent">
             <ScriptContentJson content={content} state={state} />
           </div>
         ) : (
-          <div className="transaction__detail_loading">{!scriptFetched ? <SmallLoading /> : null}</div>
+          <div className="transactionDetailLoading">{!scriptFetched ? <SmallLoading /> : null}</div>
         )}
         {!content && scriptFetched ? null : (
-          <div className="transaction__detail_copy">
+          <div className="transactionDetailCopy">
             <TransactionDetailCopyButton onClick={onClickCopy}>
               <div>{i18n.t('common.copy')}</div>
               <CopyIcon />
diff --git a/src/pages/Transaction/TransactionCellScript/styled.tsx b/src/pages/Transaction/TransactionCellScript/styled.tsx
index 4fc1708cf..fa545293c 100644
--- a/src/pages/Transaction/TransactionCellScript/styled.tsx
+++ b/src/pages/Transaction/TransactionCellScript/styled.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 export const TransactionDetailContainer = styled.div`
-  .transaction__detail__separate {
+  .transactionDetailSeparate {
     width: auto;
     height: 1px;
     background: #eaeaea;
@@ -91,7 +91,7 @@ export const TransactionCellDetailPanel = styled.div`
     }
   }
 
-  .transaction__detail__modal__close {
+  .transactionDetailModalClose {
     flex: 1;
     display: flex;
     justify-content: flex-end;
@@ -123,7 +123,7 @@ export const TransactionDetailPanel = styled.div`
     margin-top: 10px;
   }
 
-  .transaction__detail_content {
+  .transactionDetailContent {
     border: none;
     width: 100%;
     text-align: left;
@@ -147,7 +147,7 @@ export const TransactionDetailPanel = styled.div`
     }
   }
 
-  .transaction__detail_copy {
+  .transactionDetailCopy {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -166,7 +166,7 @@ export const TransactionDetailPanel = styled.div`
     }
   }
 
-  .transaction__detail_loading {
+  .transactionDetailLoading {
     padding: 20px 0;
 
     @media (max-width: 750px) {
diff --git a/src/pages/Transaction/TransactionComp.tsx b/src/pages/Transaction/TransactionComp.tsx
index 91bbf97c0..c792e0015 100644
--- a/src/pages/Transaction/TransactionComp.tsx
+++ b/src/pages/Transaction/TransactionComp.tsx
@@ -64,7 +64,7 @@ const TransactionInfoItem = ({
   tag?: ReactNode
 }) => (
   <TransactionInfoContentItem>
-    <div className="transaction__info__content_title">
+    <div className="transactionInfoContentTitle">
       {title ? (
         <>
           <span>{title}</span>
@@ -75,8 +75,8 @@ const TransactionInfoItem = ({
         ''
       )}
     </div>
-    <div className="transaction__info__content_container monospace">
-      <div className="transaction__info__content_value">
+    <div className="transactionInfoContentContainer monospace">
+      <div className="transactionInfoContentValue">
         {linkUrl ? (
           <Link to={linkUrl} className="monospace">
             {value}
@@ -86,7 +86,7 @@ const TransactionInfoItem = ({
         )}
         {valueTooltip && <HelpTip title={valueTooltip} />}
       </div>
-      {tag && <div className="transaction__info__content__tag">{tag}</div>}
+      {tag && <div className="transactionInfoContentTag">{tag}</div>}
     </div>
   </TransactionInfoContentItem>
 )
@@ -345,20 +345,20 @@ export const TransactionOverview: FC<{ transaction: State.Transaction }> = ({ tr
   return (
     <TransactionOverviewPanel>
       <OverviewCard items={OverviewItems} hideShadow>
-        <div className="transaction__overview_info">
-          <SimpleButton className="transaction__overview_parameters" onClick={() => setShowParams(!showParams)}>
+        <div className="transactionOverviewInfo">
+          <SimpleButton className="transactionOverviewParameters" onClick={() => setShowParams(!showParams)}>
             <div>{i18n.t('transaction.transaction_parameters')}</div>
             <img alt="transaction parameters" src={transactionParamsIcon(showParams)} />
           </SimpleButton>
           {showParams && (
-            <div className="transaction__overview_params">
+            <div className="transactionOverviewParams">
               {TransactionParams.map(item => (
                 <TransactionInfoItemPanel key={item.title}>
-                  <div className="transaction__info_title">
+                  <div className="transactionInfoTitle">
                     <span>{item.title}</span>
                     {item.tooltip && <HelpTip title={item.tooltip} />}
                   </div>
-                  <div className="transaction__info_value">{item.content}</div>
+                  <div className="transactionInfoValue">{item.content}</div>
                 </TransactionInfoItemPanel>
               ))}
             </div>
@@ -393,7 +393,7 @@ export default ({ transaction }: { transaction: State.Transaction }) => {
   /// [0, 11] block doesn't show block reward and only cellbase show block reward
   return (
     <>
-      <div className="transaction__inputs">
+      <div className="transactionInputs">
         {inputs && (
           <TransactionCellList
             inputs={inputs}
@@ -405,7 +405,7 @@ export default ({ transaction }: { transaction: State.Transaction }) => {
           />
         )}
       </div>
-      <div className="transaction__outputs">
+      <div className="transactionOutputs">
         {displayOutputs && (
           <TransactionCellList
             outputs={displayOutputs}
diff --git a/src/pages/Transaction/TransactionReward/index.tsx b/src/pages/Transaction/TransactionReward/index.tsx
index 0a3b1f3b6..82f742393 100644
--- a/src/pages/Transaction/TransactionReward/index.tsx
+++ b/src/pages/Transaction/TransactionReward/index.tsx
@@ -31,11 +31,11 @@ const TransactionReward = ({ cell, showReward }: { cell: State.Cell; showReward?
 
   return showBlockReward ? (
     <RewardPenal>
-      <div className="transaction__reward__title">{i18n.t('transaction.reward_info')}</div>
+      <div className="transactionRewardTitle">{i18n.t('transaction.reward_info')}</div>
       {Rewards(cell, isMobile).map(reward => (
         <RewardItemPenal key={reward.name}>
-          <div className="reward__name">{reward.name}</div>
-          <div className="reward__capacity">
+          <div className="rewardName">{reward.name}</div>
+          <div className="rewardCapacity">
             <DecimalCapacity value={localeNumberString(shannonToCkb(reward.capacity))} />
           </div>
         </RewardItemPenal>
diff --git a/src/pages/Transaction/TransactionReward/styled.tsx b/src/pages/Transaction/TransactionReward/styled.tsx
index 966075823..bc1f4730c 100644
--- a/src/pages/Transaction/TransactionReward/styled.tsx
+++ b/src/pages/Transaction/TransactionReward/styled.tsx
@@ -13,11 +13,11 @@ export const RewardItemPenal = styled.div`
     justify-content: space-between;
   }
 
-  .reward__name {
+  .rewardName {
     font-weight: 500;
   }
 
-  .reward__capacity {
+  .rewardCapacity {
     margin-left: 15px;
 
     > span {
@@ -31,7 +31,7 @@ export const RewardPenal = styled.div`
     margin-bottom: -20px;
   }
 
-  .transaction__reward__title {
+  .transactionRewardTitle {
     margin-left: 10px;
     margin-top: 12px;
     color: #666;
diff --git a/src/pages/Transaction/styled.tsx b/src/pages/Transaction/styled.tsx
index 5434fd67c..fe7d5f84c 100644
--- a/src/pages/Transaction/styled.tsx
+++ b/src/pages/Transaction/styled.tsx
@@ -14,11 +14,11 @@ export const TransactionDiv = styled.div.attrs({
     padding: 20px;
   }
 
-  .transaction__inputs {
+  .transactionInputs {
     width: 100%;
   }
 
-  .transaction__outputs {
+  .transactionOutputs {
     width: 100%;
     margin-top: 20px;
   }
@@ -27,12 +27,12 @@ export const TransactionDiv = styled.div.attrs({
 export const TransactionOverviewPanel = styled.div`
   width: 100%;
 
-  .transaction__overview_info {
+  .transactionOverviewInfo {
     margin-bottom: 12px;
     display: flex;
     flex-direction: column;
 
-    .transaction__overview_parameters {
+    .transactionOverviewParameters {
       font-size: 16px;
       font-weight: 600;
       margin: 8px 0;
@@ -58,7 +58,7 @@ export const TransactionOverviewPanel = styled.div`
     }
   }
 
-  .transaction__overview_params {
+  .transactionOverviewParams {
     background: #f1f1f1;
     padding: 0 12px;
   }
@@ -79,7 +79,7 @@ export const TransactionInfoItemPanel = styled.div`
     margin-top: 3px;
   }
 
-  .transaction__info_title {
+  .transactionInfoTitle {
     display: flex;
     align-items: center;
     margin-top: 10px;
@@ -90,7 +90,7 @@ export const TransactionInfoItemPanel = styled.div`
     }
   }
 
-  .transaction__info_value {
+  .transactionInfoValue {
     margin-left: 10px;
     margin-top: 5px;
     max-height: 250px;
@@ -122,7 +122,7 @@ export const TransactionInfoContentItem = styled.div`
     color: ${props => props.theme.primary};
   }
 
-  .transaction__info__content_title {
+  .transactionInfoContentTitle {
     display: flex;
     align-items: center;
     width: 160px;
@@ -134,7 +134,7 @@ export const TransactionInfoContentItem = styled.div`
     }
   }
 
-  .transaction__info__content_container {
+  .transactionInfoContentContainer {
     color: #333;
     font-size: 14px;
     width: 100%;
@@ -149,13 +149,13 @@ export const TransactionInfoContentItem = styled.div`
       font-size: 12px;
     }
 
-    .transaction__info__content_value {
+    .transactionInfoContentValue {
       display: flex;
       align-items: center;
       flex-shrink: 0;
     }
 
-    .transaction__info__content__tag {
+    .transactionInfoContentTag {
       width: 400px;
       max-width: 100%;
     }