🎨

Master CSS、一緒に始めてみましょ

2024/03/12に公開

CSS

導入

みなさんはMaster CSSをご存知でしょうか？
私も最近知って、ちょっと使ってみたのでそれを共有するという目的で記事を書きました。

https://css.master.co/#design

Master CSSの特徴

Master CSSの特徴をTailwind CSSと比較しながら紹介していきます。

直感的なスタイル指定

MasterCSSは、生のCSSとほぼ同じ構文を使用できるため、既にCSSをよく知る開発者にとって、新しいフレームワークの習得が容易になります。CSSのプロパティと値を直接クラス名に変えるこの方法により、純粋なCSSにとても近い方式でスタイルを定義することが可能です。

<!-- Tailwind CSS-->
<div class="w-[50px] h-[50px] bg-[#eb5f63] rounded-full"></div>

<!-- Master CSS-->
<div class="width:50px height:50px background-color:#eb5f63 border-radius:50%"></div>

<!-- Pure CSS -->
<style>
.circle{
   width: 50px;
   height:50px;
   background-color: #eb5f63
   border-radius:50%;
}
</style>

単位変換

Master CSSでは単位を設定しないと、自動的にremへと単位変換を行なってくれます。

<!-- Master CSS -->
<div class="width:50px height:50px background-color:#eb5f63 border-radius:50%"></div>

<div class="width:50 height:50 background-color:#eb5f63 border-radius:50%"></div>

ルート要素のフォントサイズが16pxに設定されている場合、50/16=3.125remとなります。上記のコードのスタイルをデベロッパーツールで確認してみました。

もちろん、直接3.125remとすることもできます。

<!-- Master CSS-->
<div class="width:3.125rem height:3.125rem background-color:#eb5f63 border-radius:50%"></div>

多様な記法

先ほどのコードをより簡潔化した書き方もMaster CSSは提供しています。これは、ユーティリティファーストのCSSフレームワークが持つクラスの肥大化という問題点を改善してくれていると思います。

<!-- Master CSS -->
<div class="width:50px height:50px background-color:#eb5f63 border-radius:50%"></div>

<div class="w:50 h:50 bg:#eb5f63 r:50%"></div>

しかし、Master CSSには他にもいくつかの略記パターンがあり、複数人での開発ではコードに統一性がなくなるというリスクもあります。

<!-- Master CSS -->
<div class="font-size:10">Master CSS</div>
<div class="font:10">Master CSS</div>
<div class="f:10">Master CSS</div>

短縮記法

Tailwind CSSでは別途記述しなくてはならなかったクラスをまとめることが可能です。これも前章同様、ユーティリティファーストのCSSフレームワークが直面しがちな問題を解決します。

<!-- Tailwind CSS-->
<div class="mt-[5px] mr-[6px] mb-[7px] ml-[8px]"></div>

<!-- Master CSS-->
<div class="m:5px|6px|7px|8px"></div>

グループ化

擬似要素や擬似クラスを波括弧で括るってグループ化することができます。

<!-- Tailwind CSS-->
<div class="w-[40px] h-[40px] bg-orange-200 hover:w-[30px] hover:h-[30px] hover:bg-orange-100"></div>

<!-- Master CSS before grouping-->
<div class="w:40 h:40 bg:orange-50 w:30:hover h:30:hover bg:orange-20:hover"></div>

<!-- Master CSS after grouping-->
<div class="w:40 h:40 bg:orange-50 {w:30;h:30;bg:orange-20}:hover"></div>

ブレイクポイントも同様にグループ化することが可能です。

<div class="{f:30px;bg:#ff0000}@md {f:50px;bg:#0000ff}@lg">hello</div>

拡張機能

Master CSSはVScodeの拡張機能も存在し、シンタックスハイライトの魅力について公式ドキュメントに書かれていました。また、プレビューやコード補完機能も提供されていますが、これらはTailwind CSSにも同様に存在します。

Master CSSの疑問点

インラインスタイルとの違い

<!-- inline styles -->
<div style="width: 50px; height: 50px; background-color: #eb5f63; border-radius: 50%"></div>

<!-- Master CSS-->
<div class="width:50px height:50px background-color:#eb5f63 border-radius:50%"></div>

公式ドキュメントを見ると以下のように書かれています。

インラインスタイルでは、セレクター、メディアクエリ、および多くの CSS 機能を適用できません。マスター CSS を使用すると、最も簡潔な構文で実装できるようになります。

まとめ

ぜひみなさんもMaster CSSに入門してみてください!!
私もまだ始めたばかりなので、その他のMaster CSSの特徴をこのコメント欄に共有していただけると嬉しいです。