ぜんぜん知らんかった…CSS設計REMM（レム）について調べてみた #CSS設計

REMMってCSS設計知ってますか？
恥ずかしながら知りませんでした…

本記事はREMMってどんなものなのか？をキャッチアップするために役立ててもらえると幸いです！

REMMってなに？

R...Roots
E...Element
M...Modify
M...Modifier

の頭文字をとってREMMです！

ICT株式会社によって考案されたCSS設計で2019年5月29日にガイドラインが公開されています！
公式サイトはこちらです。

REMM（レム）は、フロントエンド開発における「要素命名」と「CSS管理」、「スタイリングアプローチ」の方法論です。
「Roots（ルーツ）」という考え方でHTML要素の命名を概念的にグルーピングすることによって、CSS設計の自由さと、CSSプロパティ汚染に対する適度な堅牢性が得られます。

と記述されていました。

公式サイトには概要を把握したい人のためのNotesとCSS設計のパターンガイドが用意されています。

公式サイトの内容が充実している印象です！
REMMそれぞれの役割や制作の全体像から具体的な事例まで定義されているのでわかりやすいと感じました！

REMMのガイドラインを読んだ所感　

これまでのSACSSやFLACSSを知っていれば大枠を理解するのにそれほど時間はかからない印象です。
既存のCSS設計やフレームワークとの併用などすでに運用されているサービスにも取り入れられるようにと考えられているところも特徴だと感じました。

REMMのなるほど！と思ったケバブケースへのこだわり

Notesに「ケバブケースへのこだわり」について書かれているところがあります。
この考え方はなかったな…と思ったのと同時に重要な考え方だと思ったので2点紹介します！

一般的なキーボードにおいて、補助キーなしで入力できる
エディタ上でテキストをダブルクリックした時に「-」で選択が止まるため、構造単位で単語を選択できる

開発のちょっと手間を惜しんでいく考え方に感銘を受けました！

詳細はこちらをご覧ください！

REMMの「予約語」という考え方

JavaScriptなどのプログラミング言語ではお馴染みですが、CSSではREMMを知るまで意識したこともありませんでした。

予約語として定義したclassにはスタイリングしません。

text.scss

// textを予約後として定義する
.text {}

REMMでは予約語を拡張することや他のRootsの中で利用することも可能です。

予約語として定義したtextを拡張する

text.scss

.text {}

.text-strong {}

他のRootsで利用する

card.scss


.card {
  .text {}
}

.textは予約語としてスタイルの当たっていないclassのため他のRootsで使っても影響を受けません。

詳細度が上がるのは気になりますが、ネームスペースを確保して置けるのはメリットだと思います。

サービスが大きくなればなるほど命名が苦しくなります。

状況によるトレードオフかもしれませんが、命名に使う時間を節約できることで実装したい機能のクオリティが上がるなら詳細度が多少あがるのは許容してもいいと考えます。

基本的に詳細度が上がることは良くないと考えてます。
理想を言えば全て同じが良いところですはそうは言ってられないこともあるのでルールを決めて、stylelintでmax-nesting-depthを制御する方法を用いるのが良いかと思いました！

また、詳細度が高くなるのであれば下げるように書く方法もあります！

CSSの詳細度を下げるための書き方

ネストしながらも詳細度を下げる方法があります。

card.scss


.card {
  .text {
    color: blueviolet;
  }
}

.text-accent {
  color: cadetblue;
}

// トランスパイル後
.card .text {} // 詳細度 0.2.0
.text-accent {} // 詳細度 0.1.0

この状態だと後からtext-accentでtextカラーを上書きしようと思っても詳細度が.card .textの方が高く無理です。

下記のように記述することで詳細度を下げることができます。

card.scss

.card {
  [class=text] {
    color: blueviolet;
  }
}

HTML側は下記のようになります。

<div class="card">
  <p class="text text-accent">text</p>
</div>

まとめ

今時CSS設計なんて…って考えられる方も多いかもしれませんが、運営歴が長いサービスではすぐに新しいフレームワークや優れたデザインシステムを導入するのは現実的に厳しいことが多いと思います。

さまざまなCSS設計の考え方を取り入れながら今の課題感と照らし合わせて見直すなり、導入を検討するなりで安定的にサービスを運用できる方法を引き続き模索していきたいと思います！