Zenn
🌏

Master CSS？インラインスタイルでいいじゃん

2023/11/13に公開
CSS
Tailwind CSS
CSS設計
mastercss
ユーティリティファースト
tech

Master CSS をご存知でしょうか？

本記事は最近フロントエンド界隈で話題（になりかけている）の Master CSS について紹介する記事です。

🌎 Master CSS って何？

Master CSS はユーティリティファーストの CSS フレームワークです。

こちら公式ドキュメントです。

https://css.master.co/

ユーティリティファーストの CSS フレームワークで有名どころとして Tailwind CSS があげられます。

Master CSS は Tailwind CSS とも少し違うので簡単に特徴を紹介します。

CSS を直接記述できる

Master CSS では class 属性に直接 CSS を指定することができます。

例えばこのようなコードがあったとします。

HTML

<h1 class="title">
  Hello Master CSS
</h1>

CSS

.title {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  background-color: #000000;
}

Master CSS だとどうなるのか？

<h1 class="font-size:24px font-weight:bold color:#ffffff background-color:#000000">
  Hellow Master CSS
</h1>

画面確認するとしっかりスタイルが当たっています。

image

このように Master CSS では class 属性に直接 CSS を指定することができます。

厳密に言うとプロパティと値の間に半角スペースがなくなったり、最後のセミコロンがなかったりと違いはありますが、だいぶ直感的にスタイルを当てられます。

Master CSS ではさらに強力な特徴がいくつかあるのですが、後の章で触れるとして簡単な説明は以上となります。

🫠 インラインスタイルで良いじゃん

インラインスタイルとは？

コードを確認した方が早いので先ほどのコードをインラインスタイルで書き換えてみます。

<h1 style="font-size: 24px; font-weight: bold; color: #ffffff; background-color: #000000;">
  Hellow Master CSS
</h1>

このように style 属性で CSS を指定することをインラインスタイルと呼びます。

🍵茶番

ミルク🥛「うちのオカンがね、好きなスタイルの当て方があるらしいんやけど」
ミルク🥛「その名前をちょっと忘れたらしくてね」
ミルク🥛「でまあ色々聞くんやけどな全然分からへんねんな」

ボーイ👦「分からへんの？」
ボーイ👦「ほな俺がねおかんの好きなスタイルの当て方ちょっと一緒に考えてあげるから」
ボーイ👦「どんな特徴ゆうてたかってのを教えてみてよ」

ミルク🥛「あのー、DOM に直接 CSS を書くようにスタイルを当てられるやつって言うねんな」

ボーイ👦「ほー、インラインスタイルやないかい、その特徴はもうインラインスタイルやがな」

〜茶番終わり〜

Master CSS についての特徴を聞いてこんなことを思う方もいるのではないでしょうか？
🧐 「つまり Master CSS は DOM の class に CSS を書けるものなのね？」
🤓 「じゃあインラインスタイルで良いじゃん！」

結論から述べると、Master CSS とインラインスタイルは全然違います。

Master CSS（というかユーティリティファースト）とインラインスタイルの違いの鍵となるのが CSS 詳細度です。

CSS詳細度とは？

CSS 詳細度とは、複数の CSS ルールが同じ HTML 要素に適用される場合に、どのルールが優先されるかを決定するためのメカニズムです。

例えばこちらの HTML 要素に2つの CSS を適用した場合どちらのスタイルが当たるでしょうか？

<h1 id="title" class="title">
  Hello World
</h1>

<style>
#title {
  color: blue;
}
.title {
  color: red;
}
</style>

画面で確認すると

image

Dev Tools も確認すると

image

id セレクタで適用した方のスタイルが当たっています。

なぜ id セレクタで指定されたスタイルが適用されて、class セレクタで指定したスタイルが適用されないのでしょうか？

答えは明白で、class セレクタよりも id セレクタの方が詳細度が高いからです

詳細度の計算

CSS詳細度は、以下の4つのカテゴリに基づいて計算されます。

  1. インラインスタイル
    HTML要素に直接適用されたスタイル。最も高い詳細度を持ちます。
    (例：style="color: red;")
  2. IDセレクタ
    ID属性を使用したセレクタ。(例：#title)
  3. クラス、属性、擬似クラスセレクタ ← Master CSS はここ
    クラスセレクタ (例：.button)
    属性セレクタ (例：[type="text"])
    擬似クラス (例：:hover)
  4. 要素、擬似要素セレクタ
    要素名（例：div）
    擬似要素（例：::before）

下にさがるにつれて詳細度が低くなっていきます。

詳しくは Mozilla の公式ドキュメントをご覧ください。

インラインスタイルがいけない理由

詳細度の計算を確認するとわかるのですが、
インラインスタイルは最も詳細度高いスタイルの適用方法となります。
インラインスタイルで指定されたスタイルを上書きするためには !important を使用する他ないです。

詳細度の高いセレクタを使用することには注意が必要です。

ここからは筆者の意見なのですが、プロダクトを通して詳細度はクラスセレクタのレベルでスタイルを当てていくのがベターだと思っています。
不必要に高い詳細度を指定すると後々技術的負債になりリファクタリングが必要になったり、詳細度でバトルしなければならなくなるからです。

余談

Master CSSの公式ドキュメントにもインラインスタイルだとなぜいけないのかについて記述されています。

下記引用

Why not just inline styles?

I want the button to be bigger at viewport width >=1024px and then fade when disabled.

<button style="font-size: .875rem; text-align: center; height: 2.5rem;" disabled>Oops...</button>

Inline styles cannot apply selectors, media queries, and many CSS features. With Master CSS, you can now implement them with the most succinct syntax.

<button class="font:14 text:center height:40 height:56@md opacity:.5[disabled]" disabled>Yeah!</button>

要約すると
「インラインスタイルだと CSS の機能をフルに使えないけど、Master CSS だと簡潔に実装できるZE！！！」
みたいなことが書いてあるけど、詳細度のことも書けば良いのにと思いました。
ユーティリティファーストの良さであって Master CSS の良さではないからなのかな？

〜余談終わり〜

💨 じゃあ、Tailwind CSS で良いじゃん

🧐 「インラインスタイルの良くないところはわかった」
🤓 「じゃあ、Tailwind CSS で良いじゃん」

はい、Tailwind CSS でも良いです。

正直 Tailwind CSS を使うか Master CSS を使うかは好みの問題かと思います。

個人的には Tailwind CSS は非常に優れた CSS フレームワークだと思っているのですが、あえて良くないところを挙げるとすると

クラス名が分かりづらい

慣れてしまえば問題ないのですが、ユーティリティクラスの名前が Tailwind CSS 独自のものなので慣れるまで公式ドキュメントを開きながら実装しなければなりません。

例えば、

CSS Tailwind CSS
border-radius rounded
line-height leading
letter-spacing tracking

のように CSS プロパティからは推測できないクラス名がたまに設定されています。
でもすぐ慣れるので大きな問題ではないです。

用意されていないプロパティがある

基本的な CSS プロパティは用意されているが、用意されていないプロパティもあり結局 CSS を書かなければならない時があります。

Tailwind CSS の良くないところは大きくこの2点かなと思っています。

その他の意見

他にも Tailwind CSS (というかユーティリティファースト)アンチの方の意見を調べたところ

  1. 横一列に並んだ大量のクラスがツラい
  2. レスポンシブ対応がしんどい
  3. クラス名から何作ってるのかわからなくなる

などが見受けられました。

これらは Tailwind CSS 自体のつらさというよりかはユーティリティファースト自体のつらさだと思うので本記事では深く触れません。

正直フォーマッターの設定でいかようにもなる気がするのと、レスポンシブ対応はどのみちしんどいです。

参考文献

https://zenn.dev/saltedlemon/articles/2e16ec10404f2d
https://qiita.com/sazumy/items/66a316ee5369c2001b04

🌍 Master CSS のココがスゴイ！

ここまで長々と書いてきましたが、ここでやっと Master CSS のスゴさに迫っていきたいと思います。

本記事の冒頭に Master CSS は、クラスセレクタに CSS を記述できると紹介しましたが、それは Master CSS のベストプラクティスではありません。

公式ドキュメントのコードを例にして紹介します。

Shorthands (速記法)

クラス属性が長すぎるユーティリティファーストのつらさを軽減させてくれます。

<a class="animation-name:fade animation-duration:1s animatino-timing-function:ease transition-property:opacity transition-duration:.3s margin-top:1rem margin-bottom:1rem margin-right:2rem margin-left:2.5rem"></a>

速記で書き直すと
↓ 62 %コード削減できます

<a class="animation:fade|1s|ease transition:opacity|.3s margin:16|32|16|40"></a>

推奨されている記号と頭字語を含むと
↓ 80 %コード削減できます

<a class="@fade|1s|ease ~opacity|.3s m:16|32|16|40"></a>

だいぶスッキリしました

また、Tailwind CSS の良くないところで挙げたクラス名がわかりづらい問題も軽減されています。

CSS Master CSS
border-radius r
line-height lh
letter-spacing ls

短すぎて逆にわかりづらい感は否めませんが、CSS プロパティには寄り添ってくれています。

省略記法での場合を紹介しましたが CSS プロパティもそのまま使えるので必ずしも省略しなければいけないわけではないです。

また、CSS プロパティも使用できるということは Tailwind CSS の良くないところで挙げた用意されていないプロパティがある問題も解消していると言えます。

グループ化

擬似クラスや擬似要素、ブレークポイントごとのまとまりをグループ化することによってコードが長さを軽減できます。
また、レスポンシブ対応のつらさも軽減できます。

<ul class="block>li:hover@md p:16>li:hover@md w:full>li:hover@md text:center>li:hover@md font:blue/.5>li:hover@md"></ul>

↓ 45 %コード削減できます

<ul class="{block;p:16;w:full;text:center;font:blue/.5}>li:hover@md"></ul>

その他

その他にもカスタマイズ性や、動的に値が変えやすかったり、ハイブリッドレンダリングや IDE など紹介されているので気になる方は公式ドキュメントをご覧ください。

🤨 Master CSS 気になるところ

このまま終えると Master CSS の太鼓持ちみたくなってしまうので、個人的に気になった点も挙げていきます。

独特な書き方

正直、初めて Tailwind CSS を触った時も感じたのですが Master CSS は一段とクセが強いなと感じています。

先ほどの章で紹介したコードですが、初見では呪文のように見えます。

<a class="@fade|1s|ease ~opacity|.3s m:16|32|16|40"></a>

<ul class="{block;p:16;w:full;text:center;font:blue/.5}>li:hover@md"></ul>

これは Tailwind CSS 同様に慣れれば解決すると思いますが、、

省略記法

Master CSS のココがスゴイで挙げた省略記法ですが

省略記法の種類が多く、プロダクトで統一するのは難しそうに感じます。

font-size: 16px;を当てる場合を例にそれぞれのコードを見ていきましょう。

Tailwind CSS

<p class="text-base"></p>
<p class="text-[16px]"></p> // Arbitrary values を用いた場合

Master CSS

<p class="font-size:16"></p>
<p class="font:16"></p>
<p class="f:16"></p>
<p class="font-size:16px"></p>
<p class="font:16px"></p>
<p class="f:16px"></p>

考えられる指定の仕方でこれだけあります。
（rem とか em とか他の単位を使えばもっとある）

開発者の人数が多いプロダクトで使用するとカオスになりそうな予感がしています。

CSS を理解していないと使いこなせない

Tailwind CSS でも言われていますが、ユーティリティファーストは CSS の知識がないと使いこなすのは難しいです。

Master CSS の場合はさらに難しくなっています。

フクロウセレクタを例にそれぞれのコードを見ていきましょう。

CSS

.stack > * + * {
  margin-top: 16px;
}

Tailwind CSS

<section class="space-y-4"></section>

フクロウセレクタにおいては Tailwind CSS はうまく CSS の複雑さを隠蔽していたと感じます。

Master CSS

<section class="mt:16>*+*"></section>

Master CSS ではより CSS ライクな書き方に戻りました。

CSS に興味がないエンジニアには呪文のように見えることでしょう。

🚀 Master CSSは世界を変えられるか？

個人の意見ですが、Master CSS が爆発的に普及する可能性は低いと考えています。

ただ、個人開発や小規模のプロジェクトでは採用する価値は十分にあるとも考えています。

Tailwind CSS がそうなってはいないように大規模のプロダクトには向かない印象を受けました。

個人的には、これから一人で何か作るときは Master CSS がファーストチョイスになりそうです。

✅ まとめ

Master CSS は Tailwind CSS で感じていたモヤモヤしたところを解消しつつも、Master CSS ならではの新たなモヤモヤもまた生まれつつあると感じました。

まだ触ってみて2日ですが、Master CSS には浪漫を感じるのでこれからも使っていきたいと思っています。

まだ紹介しきれていない機能もあるので、また Master CSS の記事を書いていきます。

CSS設計に決着がつく日は来るのでしょうか？

📔 参考文献

https://css.master.co/
https://tailwindcss.com/
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

Discussion