メンヘラテクノロジーは世界観を大切にしており、プロダクト作りでもかわいさを重視しています
それはアプリのUI、コーポレートサイト、各種LPにも反映されていて、既存のUIライブラリを使うことは少なく、スクラッチでCSSを書くことが多いです。社内ツールではChakraUIを愛用していますが、ユーザー向けのものではSCSSを書いています

周りのCSSオタクたちに教えてもらって実践していることをまとめてみました

シンプルに書く

gridで中央寄せする

今まで中央寄せする際は次のようなコードをよく書いていたと思います

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

現在はこれが次のように書けます

.container {
  display: grid;
  place-content: center;
}

flexよりも短く書けるので良いですね

gapで要素間のmarginを決める

要素間のmarginを書いていくとき、今までは各要素にmargin-top(bottom)などを書いていたと思います

.parent {
  display: flex;
  flex-direction: column;

  .child-a {
    margin-bottom: 8px;
  }

  .child-b {
    margin-bottom: 8px;
  }
}

最近は親要素にgapを書くことで各要素に書く必要がなく、均等にmarginがついていきます

.parent {
  display: flex;
  flex-direction: column;
  gap: 8px
}

では要素間のmarginが均等ではないときはどうするかというと、それはhtmlの構造としてdivの入れ子関係が適切ではないと考えることができます
つまり並列なものはmarginが同じになり、marginが異なる場合はdiv間に親子関係があるはずだと考えます

<div> // この中はgapが8px
  <div> // この中はgapが4px
    <div></div>
    <div></div>
    <div></div>
  <div>
  <div></div>
</div>

divの親子関係にも気を配るようになるというメリットもあります

短いクラス名で堅牢なCSSを書く

Nuxtでフロントエンドを実装するときはコンポーネントに切っているのでstyleはもちろんscopedで書きますが、コンポーネント内でも堅く書きたいです

今まではケバブケースで繋げて書いていくことでクラス名が被らないようにしてきました

// template
<div class="user">
  <div class="user-icon"></div>
  <div class="user-texts">
    <div class="user-texts-name"></div>
    <div class="user-texts-bio"></div>
  <div>
</div>

// style
.user {
  &-icon {
  }
  &-texts {
    &-name {
    }
    &-bio {
    }
  }
}

このとき &- を使うことで親のクラス名を書かずに済むのでstyle内ではクラス名を短く書けます

しかし、これだとネストが深くなるほどクラス名が長くなり、templateが汚れていきます

これを防ぐために短いクラス名を使いたいですが、抽象度が高いクラス名はぶつかると可能性があります

そこで、直下のクラスにのみスタイルを当てるために & > で書くことで、例えば texts のような抽象的なクラス名でも被ることが減ります

// template
<div class="user">
  <div class="icon"></div>
  <div class="texts">
    <div class="name"></div>
    <div class="bio"></div>
  <div>
</div>

// style
.user {
  & > .icon {
  }
  & > .texts {
    & > .name {
    }
    & > .bio {
    }
  }
}

さいごに

ロジックの実装に比べ、CSSの実装は気をつけないとどうしても愚直なコードになったり、レビューでもスルーされがちな印象があります

最新のイケてる書き方を常に追うのはよほどCSSが好きでない限りむすがしいと思いますが、簡単に取り入れられるものは今後も実践していきたいです