サイトアイコン APPSWINGBY Developers Blog

WindiCSS3.0β！ロード時間の短縮とHMRの高速化を実現するWindiCSSとは？

Takahashi

Windi CSS 3.0がベータ版としてリリース！との情報が入ってきましたので、簡単にWindi CSSのご紹介をします。

Windi CSSとは？

Windi CSSは、次世代のCSSフレームワークとして、tailwindcssに代わるtailwindcss2.0に互換性があるフレームワークです。

Windi CSSガイドには、”HTMLとCSSをスキャンし、オンデマンドでユーティリティを生成することによって、開発時のロード時間の短縮とHMRの高速化を実現するので、本番環境でのパージを必要としません。”といった内容が書いてありますが、簡単に言えば、”tailwind v2.0完全互換の動的生成コンパイラ”です。

Windi CSSは、CSS 内のユーティリティとディレクティブを検出し、動的に処理してくれるのがWindi CSSの大きな特長となっています。つまり、使用するCSSのみをロードするのでコンパイル速度が大幅に向上し、さらにパージする必要がないといった特長を持っています。

Windi CSSとtailwindcssの速度比較

tailwindcssとWindi CSSを比較してくれた人がいましたので、↓に張り付けておきます。Windi CSSが高速なのかが一目でわかる動画になっています。

因みに、4月30日現在でのWindi CSSの最新バージョンは、v2.5.14です。

Windi CSSの特長

tailwindcss v2.0完全互換、値の自動推測、バリアントグループ、レスポンシブデザインなどが挙げられています。tailwindcss v2.0完全互換については、そのままですので解説はしませんが、taildwindcssの愛好者にとって完全互換は非常に嬉しいポイントです。

セマンティクスとは

セマンティクスという言葉は、開発の現場ではほとんど聞くことの無い言葉なのですが、HTML系の解説書などには度々登場する言葉です。イマイチよくわからないという方も多いと思います。ネットで検索すると、「semantics、意味論」といった説明がでてきますが、プログラミングの世界では少し意味が異なります。

ここで言うセマンティクスは、コードの記述者が表現しようとした意味・意図・内容。データの持つ意味となります。

その他にも、Windi CSSの特長として”ショートカット”、”ビジュアルアナライザー”などの素晴らしい特長を持っているのがWindi CSSです。

Windi CSS v3.0ベータで出てきたAttrivutify Mode

Windi CSS v3.0ベータがリリースされた「Attrivutify Mode」について軽くおさえておきます。

Attrivutify Mode

Attrivutify Modeは、コードを見れば一目瞭然ですので、ガイドに記載のあったサンプルコードをみてみましょう。

下はtailwind cssで使用される構文です。Attrivutify Modeと比較した際に色分けしてみると理解しやすいので、色分けしておきました。

<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
  Button
</button>

次は、Windi CSSのAttrivutify Modeで記述されたコードです。

<button 
　bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
　text="sm white"
　font="mono light"
　p="y-2 x-4"
　border="2 rounded blue-200"
>
  Button
</button>

tailwindcssでは、classの中の記述がどうしても長くなり、一行で表現されていると見にくいといったストレスがありましたが、windi css v3.0を習得しておけば、コードが見やすく、シンプルに、美しくまとめることができそうです。

気になる方は是非、Windi CSS v3.0ベータを触ってみてください。

今日も一日頑張りましょう！

Have a great day!

モバイルバージョンを終了