chore: standardize css class name

.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.

src/components/Banner/index.module.scss

@@ -1,6 +1,6 @@
 $backgroudColor: #232323;
 
-.Root {
+.root {
   width: 100%;
   background-color: $backgroudColor;
   height: 200px;

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} />

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>

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;

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>

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;
   }
 `

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} />
           ))}

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;
   }
 `

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>
 )

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;

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>
   )
 }

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) {

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>

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;

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>