ペースの速い Web 開発の世界では、保守可能、スケーラブル、最適化されたコードを作成することがこれまで以上に重要になっています。モジュール性と明確さを重視する開発者にとって、Galadriel CSS は強力なソリューションを提供します。 Galadriel CSS の中心には、宣言的な方法でスタイルの作成を簡素化するように設計されたドメイン固有言語 (DSL) である Nenyr があります。この記事では、Galadriel CSS と Nenyr の両方の中核となる機能を探り、それぞれの独自の設計哲学、それらを推進するメカニズム、およびそれらがどのように連携して効率的でユーティリティ優先の CSS を作成するかについて詳しく説明します。また、2 つの基本的な Nenyr ドキュメント (中央とモジュール) を定義することによって、これらのツールがどのように相互作用するかを示します。それぞれが Galadriel CSS の重要な原則を強調する役割を果たします。
Galadriel CSS と Nenyr の紹介
Galadriel CSS と Nenyr がどのように動作するかを詳細に掘り下げる前に、それらが解決しようとしている問題を理解することが重要です。従来の CSS ワークフローでは、スタイル定義が複雑で反復的なものになる可能性があり、大規模なプロジェクトを効率的に管理することが困難になります。 Galadriel CSS は、モジュール式および階層的なアプローチを導入することで、Nenyr 言語の力を活用して Web デザインに明確さと柔軟性をもたらし、これらの問題を克服しようとしています。
ガラドリエル CSS とは何ですか?
Galadriel CSS は、CSS を記述するためのモジュール式でスケーラブルなシステムを作成することにより、Web サイトのスタイル設定プロセスを最適化するように設計されたフレームワークです。デザイン プロセスを、中央、レイアウト、モジュールという個別のコンテキストに分割し、それぞれがスタイル ルールを管理する特定の目的を果たします。この階層システムにより、スタイルが Web サイトのさまざまな部分に一貫して適用され、競合や冗長性の可能性が軽減されます。
Galadriel CSS の中核的な機能は、Nenyr の統合です。 Nenyr はスタイルを宣言的に定義するための言語として使用され、開発者が明確で再利用可能なコードを作成できるようにします。スタイルの命令的定義を必要とする従来の CSS とは異なり、Nenyr ではドキュメント自体の構造を反映する方法でスタイル プロパティを宣言できます。
ネニールとは何ですか?
Nenyr は、より直観的かつモジュール式の方法でスタイルの作成を容易にするドメイン固有の言語です。その主な目的は、後で Galadriel CSS によって解析され、最適化されたユーティリティ優先の CSS 出力に変換されるスタイルを定義するための宣言構文を提供することです。 Nenyr ドキュメントには、クラス、ブレークポイント、変数、エイリアス、テーマ、および HTML 要素のスタイル設定ルールを定義するその他の定義が含まれていますが、ユーザーは CSS で各ルールを手動で記述する代わりに、構造化された階層形式でスタイルを定義します。
Nenyr は、クラスの再利用を可能にし、従来の CSS の複雑さを軽減することで、スタイルを記述するプロセスを簡素化します。 Galadriel CSS と連携して、これらの高レベルの宣言的なスタイル定義を、最適化され、冗長性のない最終的な CSS ファイルに変換します。
Galadriel CSS と Nenyr の連携方法
Galadriel CSS の中心には、Nenyr ドキュメントを解析し、抽象構文ツリー (AST) を生成し、継承、拡張、および単一性に関する特定のルールを適用するシステムがあります。このプロセスをさらに詳しく見てみましょう。
Nenyr ドキュメントの解析: Nenyr パーサーの役割
Galadriel CSS ワークフローの最初のステップは、Nenyr ドキュメントを解析することです。 Nenyr ドキュメントが処理されると、それは Nenyr パーサーに入力され、抽象構文ツリー (AST) が生成されます。この AST は、Nenyr ドキュメントの構造とコンテンツを表し、個々のスタイル ルールに分割して、後で HTML 要素に適用されるユーティリティ CSS クラスに変換されます。
Nenyr パーサーは各ドキュメントを処理し、クラス定義、プロパティ、および値を抽出します。解析された結果の AST には、Galadriel CSS が次のステップに進むために必要なすべてのスタイル情報が含まれています。ここでの主な利点は、Nenyr 言語を使用すると、開発者が宣言的な方法でスタイルを定義できるため、より効率的で読みやすいコードが得られることです。
拡張、継承、コンテキスト認識、および単一性ルールの適用
AST が生成されると、Galadriel CSS はいくつかの重要なルールを適用して、最終的な CSS 出力がクリーンで効率的であることを保証します。
最終的な CSS の生成
拡張、継承、コンテキスト認識、および単一性のルールを適用した後、Galadriel CSS は最終的な CSS 出力を生成します。この出力はパフォーマンスを考慮して最適化されており、必要なスタイル ルールのみが含まれ、冗長性が存在しないことが保証されます。結果として得られる CSS ファイルはユーティリティファーストです。つまり、Web サイト全体のさまざまな要素に適用できる再利用可能なアトミック クラスが含まれています。
実践的な例: Nenyr でのセントラル ドキュメントとモジュール ドキュメントの定義
この記事では、Next.js を使用して Galadriel CSS をセットアップするプロセスを説明し、2 つの単純な Nenyr ドキュメント (グローバル スタイル用の中央ドキュメントと特定のコンポーネント用のモジュール ドキュメント) を作成する方法を示します。この基本的なセットアップでは、Galadriel CSS がどのように機能するか、およびスタイリングに Nenyr を使用する方法について包括的に説明します。
環境のセットアップ
始める前に、Galadriel CSS 開発サーバーがインストールされ、適切に構成されていることを確認してください。詳しいインストール手順については、https://galadrielcss-docs.vercel.app/docs/installation を参照してください。こちら
Next.js を使用した Galadriel CSS のセットアップ
始めるには、Next.js アプリケーションと一緒に Galadriel CSS 開発サーバーを構成する必要があります。 Galadriel CSS は現在 Webpack をサポートしているため (将来的には Vite、ESBuild、Rollup などの他のバンドラーも予定されています)、この例では Webpack を使用します。
Galadriel CSS 開発サーバーを起動します: 専用のターミナル ウィンドウで次のコマンドを実行して、Galadriel CSS 開発サーバーを起動します。
このコマンドは、Nenyr ファイルを処理し、最適化された CSS を生成するバックエンド サーバーをセットアップします。
Next.js 開発サーバーを起動します。別のターミナル ウィンドウで、Next.js プロジェクト ディレクトリに移動し、次のコマンドを実行します。
これにより、Next.js の開発サーバーが起動します。最初に Galadriel CSS を開始する必要があることに注意してください。それ以外の場合、Webpack 統合クライアントは Galadriel CSS バックエンドへの接続を試行し、見つからない場合はエラーをスローします。
Galadriel CSS Webpack クライアントをインストールする: Galadriel CSS を Next.js と統合するには、Webpack 用の Galadriel CSS プラグインをインストールする必要があります。クライアントのインストールと構成方法の詳細については、公式ドキュメントを参照してください: https://galadrielcss-docs.vercel.app/docs/integrating-with-next-and-docusaurus.
グローバル CSS 構成: Next.js では、グローバル スタイルは通常、global.css ファイルで定義されます。 Galadriel CSS スタイルが確実に含まれるようにするには、global.css の先頭に次のディレクティブを追加します。
このディレクティブは、生成されたスタイルをアプリケーションに挿入するように Galadriel CSS 統合クライアントに指示します。
中央ドキュメントの作成
Galadriel CSS の中心となるドキュメントは、アプリケーション全体のグローバル スタイルを定義します。これは他のスタイルが構築される基礎となります。この例では、
フォルダー構造
このチュートリアルでは、Next.js アプリに次のフォルダー構造を使用します:
central.nyr ファイルを src フォルダー内に配置できますが、この例では、わかりやすくするためにルート ディレクトリに保存します。
中央ネニール文書の作成
Central.nyr ファイル内で、Central コンテキストを定義し、
説明
Construct Central: これは、グローバル スタイルが適用される中央コンテキストを定義します。
Declare Class("body"): これにより、「body」という名前の Nenyr クラスが作成されます。このクラスのスタイルは、後で body 要素に適用されます。
スタイルシート: クラス内では、Stylesheet メソッドを使用して、クラスの Nenyr プロパティを定義します。フレックスボックスを使用してコンテンツを垂直方向と水平方向の両方で中央に配置し、高さと幅をそれぞれ 100vh と 100vw を使用してビューポートの 100% に設定します。
central.nyr ファイルが作成されると、Galadriel CSS は自動的にそれを処理し、対応する CSS を生成します。
次に、中央コンテキストから「body」クラスを body 要素に適用し、Next.js アプリケーションのlayout.tsx ファイルを変更しましょう。
layout.tsx のコード
ここでは、タイプ「@class」を使用する必要があります。このマークアップは、
のスタイルを設定するために使用するクラスを示しています。要素は中央コンテキスト内にあります。次に、中央コンテキストに存在するクラスの名前を指定します。最終的なスタイル アプリケーションは次のようになります: className=“@class:body”。 Webpack 統合クライアントは、ビルド プロセス中にこのマーカーを適切なユーティリティ クラス名に置き換えます。モジュールドキュメントの定義
Galadriel CSS では、中心的なコンテキストに加えて、モジュール ドキュメントを定義することもできます。これらは、アプリケーションの特定のコンポーネントまたは部分に固有のスタイルを定義するために使用されます。この例では、
モジュール Nenyr ドキュメントの作成
src/app フォルダー内に page.nyr という名前のファイルを作成します。このファイルでは、モジュール コンテキストと
説明
モジュールの構築: これは、特定のコンポーネント スタイルに対して「ページ」という名前のモジュール コンテキストを定義します。
Declare Class("box"): これにより、「box」という名前の Nenyr クラスが作成されます。このクラス内のスタイルは、後で div 要素に適用されます。
スタイルシート: スタイルシート メソッドは、スタイル プロパティを定義するために使用されます。この場合、パディングの追加、背景色の設定、テキストの色の変更、要素内のテキストの中央揃えなどを行います。
この page.nyr ファイルを配置すると、Galadriel CSS は「box」クラスに必要なスタイルを生成します。次に、ボックス クラスを
page.tsx のコード
ここで、Nenyr ドキュメント内のクラスの場所を指定する必要があります。この場合、クラスは「page」という名前のモジュール コンテキスト内にあります。次に、「@module」タイプを使用して、それがモジュール マップ内にあることを示す必要があります。次に、クラスがどのモジュール内にあるかを指定する必要があります。この場合、クラスは「ページ」コンテキスト内にあります。最後に、使用する実際のクラスを指定します。ここでは「box」です。最終的なマークアップは className=“@module:page::box” になります。統合クライアントは、ビルド プロセス中に、このマーカーをページ ノードのモジュール マップにある適切なユーティリティ クラス名に解決します。
これらの例は、モジュール式および階層的なスタイル設定に対する Galadriel CSS のシンプルさと強力さを示しています。グローバル スタイルとコンポーネント固有のスタイルを個別の Nenyr ドキュメントに分離することで、クリーンでスケーラブルなコードベースを実現できます。
統合クライアントは、Galadriel CSS のワークフローのバックボーンとして動作します。開発中に、アプリケーション コンポーネントをスキャンして、Nenyr 固有のプレースホルダー、つまり「@class:body」や「@module:page::box」などの「マークアップ」を識別します。これらのプレースホルダーは、Nenyr ドキュメントで定義されたスタイルを適用する場所を示します。統合クライアントはこれらのマーカーを処理し、Galadriel CSS によって動的に生成されたユーティリティ クラス名に置き換えます。
各 Nenyr クラスは CSS ユーティリティ クラス名のセットに対応し、Nenyr クラス内の各プロパティ値は一意のユーティリティ クラスを表します。たとえば、Nenyr クラスのbackgroundColor: “blue” プロパティ値は、背景色を設定するための対応する CSS ユーティリティ クラスを生成します。統合クライアントは、これらのユーティリティ クラスをコンポーネント内の指定された要素にリンクし、手動介入なしで適切なスタイルが確実に適用されるようにします。
最適化されたスタイルを生成するプロセス
Galadriel CSS は最適化を中心に設計されています。 CSS ユーティリティ クラスを作成するときは、ユーティリティ クラスがすでに存在するかどうかを確認して重複を回避します。ユーティリティ クラスがすでに存在する場合、既存の CSS ユーティリティ クラスとそれを必要とする Nenyr クラスとの間の参照を確立するだけです。このアプローチにより冗長性が排除され、無駄のない効率的なグローバル スタイルシートが作成されます。
プロセスの最後に、Galadriel CSS はすべての Nenyr クラスとそれらがリンクされているユーティリティ クラス名を追跡するマップを生成します。これは、後で統合クライアントによって必要なデータをアプリケーションの出力ビルドに挿入するために使用されます。このマッピングにより、保守性が向上するだけでなく、最終出力には必要な CSS ルールのみが含まれるようになります。その結果、未使用のスタイル、汚染、CSS の肥大化のないビルド出力が得られ、アプリケーションのスケーラビリティとパフォーマンスの向上につながります。
Galadriel CSS: スタイルの最適化と開発ワークフローに革命を起こす
最新の Web アプリケーションを構築する場合、開発者は、開発中のクリーンで保守可能なコードと、実稼働用に高度に最適化された出力のバランスを取るという課題に直面することがよくあります。 Galadriel CSS は、これらの課題に対する画期的なソリューションを提供し、合理化された開発エクスペリエンスを提供し、運用ビルドでの最高のパフォーマンスを保証します。
Galadriel CSS によるリアルタイム開発
Galadriel CSS と Next.js 開発サーバーの両方を開始したことがある場合は、リアルタイムのスタイル更新という印象的な機能に気づいたでしょう。このシームレスなエクスペリエンスは、Galadriel CSS の開発者中心の哲学の中心です。スタイルへの変更は即座に反映されるため、開発者は迅速に反復して、魅力的で高度なデザインの作成に集中できます。
しかし、本当の魔法は、開発から運用に移行するときに起こります。 Next.js ビルド コマンド npm run build を実行すると、Galadriel CSS が提供する統合クライアントによって調整された高度なプロセスがトリガーされます。この統合により、アプリケーションは軽量でパフォーマンスが高く、不要な依存関係がなくなることが保証されます。
ビルドプロセスを理解する
ビルド コマンドを実行すると Webpack が開始され、続いて Galadriel CSS 統合クライアントがアクティブになります。クライアントは次の主要なタスクを実行します:
最終ビルドに不要なオーバーヘッドが含まれる可能性がある従来の CSS フレームワークとは異なり、Galadriel CSS は完全に最適化された静的な出力を生成します。このアプローチにより、実行時のシステムへの依存が排除され、実稼働環境が無駄がなく効率的になります。
開発モードでは、Galadriel CSS は依存関係フォルダーを生成したり、追加の依存関係を作成したりせずに動作します。代わりに、マシンにグローバルにインストールされたシステムを利用して、シームレスな機能を実現します。対照的に、ビルド モードでは、統合クライアントは GitHub リリースから最新バージョンの Galadriel CSS を自動的にダウンロードします。この自動化によりビルド プロセスが合理化され、手動介入が減り、開発者のワークフローが簡素化されます。 Galadriel CSS は舞台裏で複雑なプロセスを処理することで、開発者が直感的な Nenyr 構文を使用して高度で視覚的に美しいスタイルを簡単に作成することに集中できるようにします。
ビルド出力の探索
ビルド プロセスが完了すると、結果のコードは .next フォルダーに保存されます。このフォルダーには、アプリケーションに必要な HTML ファイルと CSS ファイルの両方が含まれています。変換を説明するには、次の点を考慮してください:
開発コード例
ここで、クラス属性は Nenyr マークアップを使用します。これは、HTML 要素へのスタイルの適用を定義するために Nenyr によって提供される宣言構文です。このクリーンで読みやすいアプローチは開発中に非常に貴重であり、開発者はユーティリティ クラスの煩雑さを気にせずに構造と機能に集中できます。
出力ビルド コード例
これらの要素は開発中に作成されたものと同じですが、このバージョンは Next.js ビルド出力の一部です。特に、「@class:body」や「@module:page::box」などの Nenyr マークアップがクラス属性に存在しなくなりました。代わりに、クラス属性には、各要素のスタイルを設定する実際のユーティリティ クラス名が含まれるようになりました。この変換は統合クライアントによって処理され、Nenyr マークアップを対応するユーティリティ クラスに置き換えます。ビルド コンポーネントは静的コンテンツのみで構成されており、最終出力には Galadriel CSS または Nenyr への直接参照は残りません。 body タグと div タグに適用される各ユーティリティ クラスは、Nenyr クラスで定義されたプロパティと値のペアに対応します。この合理化された効率的なシステムは、最適化されたパフォーマンス重視のビルド出力を生成しながら、クリーンで保守可能な開発コードを実現するという、Galadriel CSS の真の力を強調しています。
生成された CSS: 最適化の力
Galadriel CSS がビルド プロセス中に生成する CSS は、効率性への取り組みを実証しています。以下は、.next/static/css にある CSS ファイルからの抜粋です:
Galadriel CSS によって生成されるユーティリティ ルールはすべて最適化されており、冗長性はなく、必要なスタイルのみが含まれています。たとえば、中央ドキュメントと「ページ」モジュール コンテキストの両方で、表示スタイル: flex、justifyContent: center、および alignItems: center が複数回定義されていました。ただし、Galadriel CSS はスタイルごとに単一のユーティリティ クラスを効率的に生成し、CSS ルールの繰り返しを回避しました。さらに、これらのユーティリティ クラスは出力の body 要素と div 要素の両方に適用され、ルールが重複することなくスタイルが一貫して適用されるようになりました。これは、Galadriel CSS の威力を実証しています。これにより、開発コードがクリーンに保たれ、他のフレームワークでよく見られるクラス名の乱雑さがなくなり、ビルド出力は静的かつ軽量で、パフォーマンスが最適化されたままになります。 Galadriel CSS は、クリーンな開発ワークフローと効率的なビルド出力を提供することで、保守性、拡張性、および全体的なアプリケーションのパフォーマンスを向上させます。
1.クリーンな開発ワークフロー
Galadriel CSS は Nenyr の宣言機能を活用しており、開発者はユーティリティ クラス名に邪魔されることなく、モジュール式で再利用可能なスタイルの作成に集中できます。これにより、開発プロセスが簡素化され、チーム間のコラボレーションが向上します。
2.スケーラブルでパフォーマンスの高い本番ビルド
ビルドプロセス中に生成される最適化された CSS により、不必要なオーバーヘッドがなく、アプリケーションがスケーラブルでパフォーマンスが高いことが保証されます。これは、1 キロバイト単位が重要となる大規模プロジェクトの場合に特に有益です。
3.自動化と効率化
Galadriel CSS は、依存関係の管理、スタイルの挿入、クリーンアップなどのタスクを自動化することで、手動の労力と潜在的なエラーを削減します。これにより、開発者はユーザー エクスペリエンスの作成により多くの時間を費やすことができます。
4.保守性の向上
開発と運用の関係を分離することで、保守性が向上します。 Nenyr マークアップはスタイルのソースを明確に示し、必要に応じてスタイルを見つけて更新するのが簡単になります。
結論
Galadriel CSS は、Web 開発におけるスタイル管理の標準を再定義します。宣言型 Nenyr マークアップによるクリーンな開発エクスペリエンスを提供し、高度に最適化された運用ビルドを提供することで、開発者は洗練されたアプリケーションを簡単に作成できます。
Galadriel CSS は、モジュール型のコンテキスト中心のアプローチでスタイル管理に革命をもたらし、Web 開発における保守性、拡張性、パフォーマンスに対処します。その革新的なデザインは、スタイルを中央、レイアウト、およびモジュールのコンテキストに編成し、再利用を促進しながら分離と精度を確保します。カスタム Nenyr DSL を活用することで、このフレームワークは CSS の肥大化を最小限に抑え、最適化されたユーティリティ優先のスタイルを生成し、成長に合わせてシームレスに適応するクリーンでスケーラブルなアプリケーションを実現します。
Galadriel CSS を使用すると、本当に重要なこと、つまり美しく機能的でインパクトのある Web アプリケーションのデザインに集中できます。もっと良くしてください。違うものにしましょう。 Galadriel CSS のパワーを活用してください。
テストアプリのサンプルのリポジトリ: https://github.com/patrickgunnar/galadrielcss-testing-app
Galadriel CSS の詳細: https://galadrielcss-docs.vercel.app/docs
Next.js で構築され、Galadriel CSS でスタイル設定されたアプリをいくつか示します:
Galadriel CSS について学ぶために時間を割いていただきありがとうございます!ご意見やフィードバックをお待ちしております。以下のコメント欄でお気軽に共有してください。
以上がGaladriel CSS と Nenyr を理解する: 宣言的スタイリングの包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
