ボタン（component）の命名規則とコーディングルール

.component:not(:root):not(:root):not(:root):not(:root):not(:root) {
  //ボタン３
  &.button {
    &.btn3_custom01 {
      .button-cont {
        a {
          &:is(.size-s,.size-m,.size-l) {
          〜〜〜
          }
        }
      }
    }
  }
 }

&.button {
      &.btn1_custom01 {
        .button-cont {
          a {
            &:is(.size-s,.size-m,.size-l) {
              //基本的にここに記述を行う↓
              &::before {}
            }
            &:is(.blue,.red,.orange,.black,.white) {
              //色に関する記述のみにここに行う↓
            }
            &:hover {}
          }
        }
      }
    }

/*--- カスタムボタンサンプル集 ---*/

.component {
  &.button {
    &:where(
      .btn_custom01,
      .btn_custom02,
      .btn_custom03
    ) {
      //サイズボタン設定
      .button-cont {
        a {
          〜 中略 〜
          //サイズ小のとき
          &.size-s {
          //ここにサイズSの時の記述
          }
          //サイズ中のとき
          &.size-m {
          //ここにサイズMの時の記述
          }
          //サイズ大のとき
          &.size-l {
          //ここにサイズLの時の記述
          }
          &:hover {
            opacity: 1;
          }
        }
      }
          〜 中略 〜
    }
    /*-- カスタムボタン設定 --*/
    //ボタンバリエ01
    &.btn_custom01 {
      .button-cont {
        a {
          &:is(.blue,.red,.orange,.black,.white) {
            //ここにサイズ以外のデザインに関する記述
               … 以下省略

//TELボタン
    &.button[data-designpart-id="642f669ce4dc09621d945abc"] {
      .button-cont {
        a {
          //サイズ小
          &.size-s {
            font-size: calc(4px + var(--fo-button-small-font-size));
          }
          //サイズ中
          &.size-m {
            font-size: calc(4px + var(--fo-button-medium-font-size));
          }
          //サイズ大
          &.size-l {
            font-size: calc(10px + var(--fo-button-large-font-size));
          }
        }
      }
    }