高橋  花子

高橋 花子

1655745120

StylifyとMasterStyles:TailwindのようなCSSユーティリティライブラリの比較

CSSは、Webページをスタイリングするための宣言型のグローバル言語です。HTMLに依存する場合、HTMLが変更されるたびに変更する必要があるため、大規模な保守が困難になります。

この問題は、オブジェクト指向CSSの概念によってかなり前に解決されました。これは、再利用性を導入しながら、BootstrapやBulmaなどの多くのライブラリを備えたコンポーネントCSSを生み出しました。

コンポーネントベースのフレームワークに付属する再利用性の種類は限られており、これからTailwindCSSなどのユーティリティファーストのフレームワークが生まれました。

この記事では、ユーティリティファーストの2つのCSSライブラリであるStylifyとMaterStylesを比較します。これにより、少ないコードで、独自のレスポンシブUIを構築できます。

また、両方が提供する開発者の経験と、彼らが適しているプロジェクトの種類についても説明します。

前提条件

  • 基本的なCSSで快適
  • ユーティリティファーストフレームワークの基本的な知識

ユーティリティファーストCSSとは何ですか?

コンポーネントベースのライブラリには、HTML要素がどのように表示されるかを通知するのではなく、それが何であるかを通知する一連のビルド済みコンポーネントとセマンティッククラスが付属しています。

コンポーネントベースのライブラリの問題は、HTMLが変更されるたびにCSSが壊れることです。この問題は、ユーティリティファーストライブラリを使用して解決されます。

ユーティリティファーストライブラリは、HTMLタグ内にカスタムの複雑なスタイルを構築するためのヘルパークラスを提供します。これらのクラスは、HTML要素への洞察を与えるために、単一目的で、簡単にカスタマイズでき、スタイル指向です。

Stylifyとは何ですか?

Stylifyは軽量(20KB)のCSSライブラリであり、作成したHTMLに基づいてユーティリティファーストのCSSを動的に生成します。

ネイティブCSSプロパティ値をセレクターとして使用するネイティブプリセットが付属しており、複数のブラウザーのほぼすべてのCSSプロパティに一致させることができます。Stylifyを使用すると、CSSをファイル、コンポーネント、ページ、またはレイアウトごとに個別に生成できます。

構文

Stylifyには、&&(and)や||などの論理演算子を使用して画面を組み合わせるオプションがあります。(または)、および特別な構文、つまり、スペースを表す__(二重アンダースコア)と引用符を表す^(キャレット)。

これにより、次のようなセレクターを作成できます。

<p class="
margin:0__auto 
font-family:^Roboto__Mono^,__monospace
">
  Hello World!
</p>

上記のコードは縮小され、次のCSSが生成されます。

._nmed{
 margin:0 auto
}
._l4hja{
 font-family:'Roboto Mono', sans-serif
} 

Sylifyのインストール

CDNを介してビルドされたデフォルトの構成を使用するには、次のコードをコピーしてHTMLファイルに配置します。

<script src="https://unpkg.com/@stylify/stylify@0.0.2/dist/stylify.native.min.js"></script>

npmやYarnなどのパッケージマネージャーを使用して、CLIからStylifyをインストールすることもできます。

// for npm
npm i -D @stylify/stylify
// for yarn
yarn add -D @stylify/stylify

StylifyをLaravel、Next.jsなどのツールと統合する方法については、このガイドのリストを参照してください。

さらに、Stylifyを既存のプロジェクトに統合する方法については、このガイドを参照してください。Stylifyには、npmまたはYarnを使用してインストールできる複数のパッケージも付属しています。

詳細については、インストールガイドを参照してください。

マスタースタイルとは何ですか?

マスタースタイルは単なるフレームワークやライブラリではありません。また、ユーザーインターフェイスを構築するためのユーティリティを含むエコシステムでもあります。

その概念は、設計の再利用性、構文が強化された仮想CSS、および動的な割り当てに基づいています。172を超えるスタイルをすぐに使用でき、構成は不要です。

構文

Masterの構文は、他のユーティリティファーストのCSSライブラリとはまったく異なり、ネイティブCSSに非常に近いものです。

マスタースタイルは体系的なCSS構文を提供し、コードの行を高速化および削減するための省略形、頭字語、および記号構文を提供します。

マスタースタイルでフォントサイズが32px(ピクセル)で背景色が緑のページの中央に揃えられた簡単な段落を作成する3つの方法を次に示します。

<p class="text-align:center font-size:2rem background-color:green-50"></p>

プロパティの省略形を使用すると、コードの行が減ります。

<p class="text:center font:32 background:green-50"></p>

頭字語を使用すると、コードがさらに削減されます。

<p class="t:center f:32 bg:green-50"></p>

マスタースタイルのインストール

パッケージマネージャーを使用してマスタースタイルをインストールできます。マスタースタイルをインストールするには、お好みのパッケージマネージャーのコードをコピーします。

// using npm
npm install @master/styles @master/normal.css
// using yarn
yarn add @master/styles @master/style @master/normal.css
// using pnpm
pnpm install @master/styles @master/style @master/normal.css

次のステップは、@ master/stylesをnode_modulesからJavaScriptエントリファイルにインポートすることです。

import '@master/styles';

次に、@ master/normal.cssをnode_modulesからCSSエントリファイルにインポートします。

import '@master/normal.css.'

マスタースタイルをさまざまなフレームワークに統合する方法については、このガイドを参照してください。

使いやすさ

どちらのフレームワークもセットアップと使用が簡単で、学習曲線が小さく、使い始めるのも簡単です。特に、TailwindのようなユーティリティファーストのCSSフレームワークに既に精通している場合はそうです。

ライブラリの使いやすさは、主にそのドキュメントがどれほど直感的で有益であるかに基づいています。

この点で、Stylifyのドキュメントはより説明的であり、新しいユーザーをライブラリに紹介するのに適しています。一方、Master Stylesのドキュメントは、Stylifyのドキュメントよりも少し複雑で、初めて使用する場合は時間がかかります。

パフォーマンス

フレームワークを選択する際には、パフォーマンスと速度が重要な要素になります。ただし、サイズが小さいほどフレームワークが高速になるため、サイズはフレームワークのパフォーマンスに寄与する重要な要素です。

どちらのライブラリも軽量ですが、Master Styles(13KB)はStylify(28KB)よりも少し小さいです。Stylifyよりも高速です。

さらに、Master Stylesは、サーバー側でHTMLからCSSを事前生成し、逆解析によってクライアント側でJITを使用できるハイブリッドアーキテクチャを提供します。これにより、実行時の柔軟性とページの読み込み速度が向上します。

どちらも、コードの行を減らすための優れた構文と、UIのカスタマイズに役立つユーティリティクラスを提供します。

開発者の経験

開発者の経験は、フレームワークを選択する際のもう1つの重要な要素です。どちらのライブラリも、フレームワークに依存しません。

Stylifyは、Next.js、Nuxt.js、Laravel、Symfonyなどのフレームワークへのシームレスな統合を提供します。WebpackRollup.jsでもうまく機能します。Stylifyを既存のプロジェクトに統合するのは簡単です。

Master Stylesは、React、Next.js、Angular、Nuxt.js、Laravelなどのフレームワークへの統合も提供します。ほとんどのCSSライブラリとは異なり、マスターはブラウザでリアルタイムに実行されます。

コンポーネント

Stylifyには、コンポーネントを作成し、必要に応じて再利用するオプションがあります。これは、同じコード行を書き直す手間を減らすために、 DRYの原則(繰り返してはいけません)に従います。また、コンポーネントをユーティリティセレクターと混在させることもできます。

執筆時点では、マスタースタイルはコンポーネントの使用をサポートしていません。必要に応じて、同じコード行を繰り返し書き直す必要があります。

ただし、頭字語を使用してコード行を減らすことができる直感的な省略形を提供します。

サンプルボタンの作成

Stylifyでシンプルな赤いボタンを作成する方法は次のとおりです。

<button class="font-weight:bold font-size:24px border-radius:4px padding:15px width:400px margin:50px__auto__0__auto text-align:center background:red color:white">Red Button</button>

マスタースタイルで青いボタンを作成する方法の例を次に示します。

<button class="font-size:24px border-radius:4px padding:15px width:400px margin:50px;auto;0;50px text-align:center color:white bg:blue-60 ">Blue Button</button>

どちらのフレームワークも、いくつかの基本的な違いがある優れたUIを作成する際に、同様のパターンに従います。どちらにも、次のような共通点があります。

  • パディング、マージンなどのネイティブCSSプロパティの使用を許可します。
  • どちらも変数の使用を許可します
  • どちらもフレームワークに依存しません
  • どちらも軽量です
  • どちらもユーティリティファーストのCSSライブラリです

どのライブラリをいつ使用する必要がありますか?

選択は比較的簡単です。大規模なプロジェクトにはSylifyを使用し、画像の多いWebサイトや複数のアニメーションまたは要求の厳しいアニメーションを必要とするWebページにはマスタースタイルを使用します。

大規模なプロジェクトでは、より多くのコンポーネントが再利用されます。つまり、CSSの成長が遅くなり、ページの読み込みが速くなります。これにより、Stylifyは大規模なプロジェクトに最適な選択肢になります。

一方、マスタースタイルは、「@」(アニメーション)や「〜」(遷移)などの記号を提供し、完全な機能を提供し、要素のアニメーション化を容易にします。

また、機能を実現するために一般的に使用されるキーフレーム(スピリッツ用)のセットを提供し、カスタムキーフレームを作成できるようにします。これにより、マスタースタイルは強烈なアニメーションWebページに適しています。

結論

この記事では、次世代のTailwindのようなCSSユーティリティライブラリと呼ばれる2つのアンダードッグCSSフレームワーク(StylifyとMaster Styles)を比較します。パフォーマンス、学習曲線、類似性、およびその他の要因に基づいて、両方のフレームワークを比較しました。

両方のフレームワークは似ていますが、Stylifyはコンポーネントの使用を提供し、ほとんどのユーティリティファーストのCSSライブラリよりも動的になります。これは大規模なプロジェクトに最適ですが、マスタースタイルはアニメーション化されたWebページに最適です。

SylifyとMasterStylesのどちらが優れたCSSライブラリであるかは、開発者のユースケースによって異なります。どちらのライブラリも新しいものですが、両方のフレームワークを使用した経験は素晴らしいので、開始するにはそれらのドキュメントを確認することをお勧めします。

このストーリーは、もともとhttps://blog.logrocket.com/stylify-vs-master-styles-comparing-css-utility-libraries/で公開されました。

#stylify  #css 

What is GEEK

Buddha Community

StylifyとMasterStyles:TailwindのようなCSSユーティリティライブラリの比較
高橋  花子

高橋 花子

1655745120

StylifyとMasterStyles:TailwindのようなCSSユーティリティライブラリの比較

CSSは、Webページをスタイリングするための宣言型のグローバル言語です。HTMLに依存する場合、HTMLが変更されるたびに変更する必要があるため、大規模な保守が困難になります。

この問題は、オブジェクト指向CSSの概念によってかなり前に解決されました。これは、再利用性を導入しながら、BootstrapやBulmaなどの多くのライブラリを備えたコンポーネントCSSを生み出しました。

コンポーネントベースのフレームワークに付属する再利用性の種類は限られており、これからTailwindCSSなどのユーティリティファーストのフレームワークが生まれました。

この記事では、ユーティリティファーストの2つのCSSライブラリであるStylifyとMaterStylesを比較します。これにより、少ないコードで、独自のレスポンシブUIを構築できます。

また、両方が提供する開発者の経験と、彼らが適しているプロジェクトの種類についても説明します。

前提条件

  • 基本的なCSSで快適
  • ユーティリティファーストフレームワークの基本的な知識

ユーティリティファーストCSSとは何ですか?

コンポーネントベースのライブラリには、HTML要素がどのように表示されるかを通知するのではなく、それが何であるかを通知する一連のビルド済みコンポーネントとセマンティッククラスが付属しています。

コンポーネントベースのライブラリの問題は、HTMLが変更されるたびにCSSが壊れることです。この問題は、ユーティリティファーストライブラリを使用して解決されます。

ユーティリティファーストライブラリは、HTMLタグ内にカスタムの複雑なスタイルを構築するためのヘルパークラスを提供します。これらのクラスは、HTML要素への洞察を与えるために、単一目的で、簡単にカスタマイズでき、スタイル指向です。

Stylifyとは何ですか?

Stylifyは軽量(20KB)のCSSライブラリであり、作成したHTMLに基づいてユーティリティファーストのCSSを動的に生成します。

ネイティブCSSプロパティ値をセレクターとして使用するネイティブプリセットが付属しており、複数のブラウザーのほぼすべてのCSSプロパティに一致させることができます。Stylifyを使用すると、CSSをファイル、コンポーネント、ページ、またはレイアウトごとに個別に生成できます。

構文

Stylifyには、&&(and)や||などの論理演算子を使用して画面を組み合わせるオプションがあります。(または)、および特別な構文、つまり、スペースを表す__(二重アンダースコア)と引用符を表す^(キャレット)。

これにより、次のようなセレクターを作成できます。

<p class="
margin:0__auto 
font-family:^Roboto__Mono^,__monospace
">
  Hello World!
</p>

上記のコードは縮小され、次のCSSが生成されます。

._nmed{
 margin:0 auto
}
._l4hja{
 font-family:'Roboto Mono', sans-serif
} 

Sylifyのインストール

CDNを介してビルドされたデフォルトの構成を使用するには、次のコードをコピーしてHTMLファイルに配置します。

<script src="https://unpkg.com/@stylify/stylify@0.0.2/dist/stylify.native.min.js"></script>

npmやYarnなどのパッケージマネージャーを使用して、CLIからStylifyをインストールすることもできます。

// for npm
npm i -D @stylify/stylify
// for yarn
yarn add -D @stylify/stylify

StylifyをLaravel、Next.jsなどのツールと統合する方法については、このガイドのリストを参照してください。

さらに、Stylifyを既存のプロジェクトに統合する方法については、このガイドを参照してください。Stylifyには、npmまたはYarnを使用してインストールできる複数のパッケージも付属しています。

詳細については、インストールガイドを参照してください。

マスタースタイルとは何ですか?

マスタースタイルは単なるフレームワークやライブラリではありません。また、ユーザーインターフェイスを構築するためのユーティリティを含むエコシステムでもあります。

その概念は、設計の再利用性、構文が強化された仮想CSS、および動的な割り当てに基づいています。172を超えるスタイルをすぐに使用でき、構成は不要です。

構文

Masterの構文は、他のユーティリティファーストのCSSライブラリとはまったく異なり、ネイティブCSSに非常に近いものです。

マスタースタイルは体系的なCSS構文を提供し、コードの行を高速化および削減するための省略形、頭字語、および記号構文を提供します。

マスタースタイルでフォントサイズが32px(ピクセル)で背景色が緑のページの中央に揃えられた簡単な段落を作成する3つの方法を次に示します。

<p class="text-align:center font-size:2rem background-color:green-50"></p>

プロパティの省略形を使用すると、コードの行が減ります。

<p class="text:center font:32 background:green-50"></p>

頭字語を使用すると、コードがさらに削減されます。

<p class="t:center f:32 bg:green-50"></p>

マスタースタイルのインストール

パッケージマネージャーを使用してマスタースタイルをインストールできます。マスタースタイルをインストールするには、お好みのパッケージマネージャーのコードをコピーします。

// using npm
npm install @master/styles @master/normal.css
// using yarn
yarn add @master/styles @master/style @master/normal.css
// using pnpm
pnpm install @master/styles @master/style @master/normal.css

次のステップは、@ master/stylesをnode_modulesからJavaScriptエントリファイルにインポートすることです。

import '@master/styles';

次に、@ master/normal.cssをnode_modulesからCSSエントリファイルにインポートします。

import '@master/normal.css.'

マスタースタイルをさまざまなフレームワークに統合する方法については、このガイドを参照してください。

使いやすさ

どちらのフレームワークもセットアップと使用が簡単で、学習曲線が小さく、使い始めるのも簡単です。特に、TailwindのようなユーティリティファーストのCSSフレームワークに既に精通している場合はそうです。

ライブラリの使いやすさは、主にそのドキュメントがどれほど直感的で有益であるかに基づいています。

この点で、Stylifyのドキュメントはより説明的であり、新しいユーザーをライブラリに紹介するのに適しています。一方、Master Stylesのドキュメントは、Stylifyのドキュメントよりも少し複雑で、初めて使用する場合は時間がかかります。

パフォーマンス

フレームワークを選択する際には、パフォーマンスと速度が重要な要素になります。ただし、サイズが小さいほどフレームワークが高速になるため、サイズはフレームワークのパフォーマンスに寄与する重要な要素です。

どちらのライブラリも軽量ですが、Master Styles(13KB)はStylify(28KB)よりも少し小さいです。Stylifyよりも高速です。

さらに、Master Stylesは、サーバー側でHTMLからCSSを事前生成し、逆解析によってクライアント側でJITを使用できるハイブリッドアーキテクチャを提供します。これにより、実行時の柔軟性とページの読み込み速度が向上します。

どちらも、コードの行を減らすための優れた構文と、UIのカスタマイズに役立つユーティリティクラスを提供します。

開発者の経験

開発者の経験は、フレームワークを選択する際のもう1つの重要な要素です。どちらのライブラリも、フレームワークに依存しません。

Stylifyは、Next.js、Nuxt.js、Laravel、Symfonyなどのフレームワークへのシームレスな統合を提供します。WebpackRollup.jsでもうまく機能します。Stylifyを既存のプロジェクトに統合するのは簡単です。

Master Stylesは、React、Next.js、Angular、Nuxt.js、Laravelなどのフレームワークへの統合も提供します。ほとんどのCSSライブラリとは異なり、マスターはブラウザでリアルタイムに実行されます。

コンポーネント

Stylifyには、コンポーネントを作成し、必要に応じて再利用するオプションがあります。これは、同じコード行を書き直す手間を減らすために、 DRYの原則(繰り返してはいけません)に従います。また、コンポーネントをユーティリティセレクターと混在させることもできます。

執筆時点では、マスタースタイルはコンポーネントの使用をサポートしていません。必要に応じて、同じコード行を繰り返し書き直す必要があります。

ただし、頭字語を使用してコード行を減らすことができる直感的な省略形を提供します。

サンプルボタンの作成

Stylifyでシンプルな赤いボタンを作成する方法は次のとおりです。

<button class="font-weight:bold font-size:24px border-radius:4px padding:15px width:400px margin:50px__auto__0__auto text-align:center background:red color:white">Red Button</button>

マスタースタイルで青いボタンを作成する方法の例を次に示します。

<button class="font-size:24px border-radius:4px padding:15px width:400px margin:50px;auto;0;50px text-align:center color:white bg:blue-60 ">Blue Button</button>

どちらのフレームワークも、いくつかの基本的な違いがある優れたUIを作成する際に、同様のパターンに従います。どちらにも、次のような共通点があります。

  • パディング、マージンなどのネイティブCSSプロパティの使用を許可します。
  • どちらも変数の使用を許可します
  • どちらもフレームワークに依存しません
  • どちらも軽量です
  • どちらもユーティリティファーストのCSSライブラリです

どのライブラリをいつ使用する必要がありますか?

選択は比較的簡単です。大規模なプロジェクトにはSylifyを使用し、画像の多いWebサイトや複数のアニメーションまたは要求の厳しいアニメーションを必要とするWebページにはマスタースタイルを使用します。

大規模なプロジェクトでは、より多くのコンポーネントが再利用されます。つまり、CSSの成長が遅くなり、ページの読み込みが速くなります。これにより、Stylifyは大規模なプロジェクトに最適な選択肢になります。

一方、マスタースタイルは、「@」(アニメーション)や「〜」(遷移)などの記号を提供し、完全な機能を提供し、要素のアニメーション化を容易にします。

また、機能を実現するために一般的に使用されるキーフレーム(スピリッツ用)のセットを提供し、カスタムキーフレームを作成できるようにします。これにより、マスタースタイルは強烈なアニメーションWebページに適しています。

結論

この記事では、次世代のTailwindのようなCSSユーティリティライブラリと呼ばれる2つのアンダードッグCSSフレームワーク(StylifyとMaster Styles)を比較します。パフォーマンス、学習曲線、類似性、およびその他の要因に基づいて、両方のフレームワークを比較しました。

両方のフレームワークは似ていますが、Stylifyはコンポーネントの使用を提供し、ほとんどのユーティリティファーストのCSSライブラリよりも動的になります。これは大規模なプロジェクトに最適ですが、マスタースタイルはアニメーション化されたWebページに最適です。

SylifyとMasterStylesのどちらが優れたCSSライブラリであるかは、開発者のユースケースによって異なります。どちらのライブラリも新しいものですが、両方のフレームワークを使用した経験は素晴らしいので、開始するにはそれらのドキュメントを確認することをお勧めします。

このストーリーは、もともとhttps://blog.logrocket.com/stylify-vs-master-styles-comparing-css-utility-libraries/で公開されました。

#stylify  #css