🚏 💅🏿 🏅 OrnaJSライブラリを使用する 👩🏿‍🔧 👨🏼‍💼 😺

OrnaJSは、JSまたはCSSコードを直接記述せずにHTML要素を動的にスタイリングするための無料のJavaScriptライブラリです。通常のCSSライブラリのように、HTML要素にクラスを追加することにより、スタイル設定が実行されます。 CSSライブラリとは異なり、Ornaはその中に以前に登録されたクラスの数によって制限されませんが、パーサーとして機能し、クラスを動的に処理し、スタイルを設定します。 OrnaJSのスタイリングは、アトミックCSS原則に基づいています。これは、要素の外観がパーツ（原子）で作成され、単一のクラスでは作成されないことを意味します。 Ornは、HTMLのスタイル属性と比較できますが、継承、略語、およびイベントがあります。 Ornaという名前はOrnament（装飾）の略です。出版後の最初の2か月で、Ornaは非標準のページスタイル付け方法を提供していますが、2000人以上の開発者がそれをダウンロードできました。これは動的なスタイル付けの人気の高まりを示しています。

OrnaJSとアトミックCSS

アトミックCSSは、「1つのクラス= 1つのプロパティ」の原則に従うCSSコード記述方法論です。 Atomic CSS方法論を使用してスタイルを記述する場合、開発者は、ほとんどの場合1つのプロパティとその値のみを保持するユニバーサルクラスを作成します。 CSSとCSSプリプロセッサ、Less、Sassを使用する際の再現性、冗長性、混乱を取り除くように設計されています。 CSSはスタイルを作成するための基盤であり、アドオンを追加したり、特定の開発者向けの便利なアーキテクチャを開発したりできるため、完全な形式のプロパティがあり、厳密なアーキテクチャはありません。アトミックCSSアーキテクチャは、Yahoo、OrnaOrg、およびすべての愛好家のチームによって開発されています。

OrnaJSプロジェクトは2015年に開始され、当初はAtomic CSSアーキテクチャの便利な実装のためのツールとして開発されましたが、その後、改革の対象となり、現在Atomic CSSおよびReact CSSの一部のルールに準拠しています。

React CSS-Atomic CSS方法論とは異なり、Reactive CSSは、要素を処理するプロセスで作成される動的なスタイルで動作します。 React CSSは、SPAの作成に広く使用されている方法論であり、マークアップ要素は動的に作成され、最初はまだ作成されていません。 Ornaチームは、Atomic CSSの完全な実装用に別のライブラリを作成しました。これは、動的作成であるOrna4Nodeではなく、すでにアトミックスタイルの説明を前提としています。 Orna4Nodeは、CSSファイルを作成せず、JavaScriptメソッドを使用してDOMツリーに直接アクセスするOrnaJSとは異なり、要素で指定されたクラスに基づいてCSSファイルを自動的に生成します。 Orna4Nodeのパフォーマンスは、YahooのAtomizer！に似ています。

OrnaJSとjQuery

OrnaJSはjQueryライブラリと連携して動作し、そこからメインのセレクターと要素による選択を行います。 OrnaはjQueryの最初のバージョンで動作し、2番目と3番目のバージョンでは開発者が選択します。

bgc_red_div：even-クラスは、すべての偶数の子div要素の背景色を赤に設定します。

bgc_red_div：奇数 -クラスは、すべての奇数の子div要素の背景色を赤に設定します。

bgc_red_div：first-クラスは背景色を最初の子div要素に設定します。

bgc_red_div：last-クラスは背景色を最後の子div要素に設定します。

bgc_red_option：selected-クラスは、選択されたすべてのオプションの子の背景色を赤に設定します。

bgc_red_input [type = text] -クラスは、テキストタイプのすべての子入力要素の背景色を赤に設定します。

bgc_red_＃menu-クラスはidメニューを持つ子の背景色を赤に設定します。

bgc_red_.menu-クラスは、メニュークラスを持つすべての子の背景色を赤に設定します。

主な目的

OrnaJSパーサーライブラリの主な目的は、マークアップ要素のスタイル設定時の作業を簡素化することです。 Ornaは、スタイルの再現性、過度の冗長性、およびCSSコードの構造化作業の主なものを取り除くのに役立ちます。 OrnaはAtomic CSS方法論の基本的なアイデアを採用しているため、作業するときはすべてアトミックです。つまり、スタイルはパーティクルによって組み立てられ、すべてのスタイルは精巧なリファクタリングを必要とせずに独立してきれいに適合します。また、Ornaを使用すると、jQueryまたはネイティブJavaScriptを使用して要素をスタイルする必要がなくなります。Ornaでは、ウォーターフォールhtml-> ornajs-> jquery-> native javascriptの原理で動作する抽象化レベルのため、はるかに簡単です。。

使用する

Ornaは、旅行者の完全な様式化や基本的なフレームスタイルへの追加として使用できます。多くのダイナミクスと条件が存在するWeb開発の現在の傾向では、開発者は、静的なHTMLおよびCSSマークアップから、ユーザーがインターフェイスと対話するプロセスでの動的な作成にますます移行しています。 OrnaJSは、react.js、riot.js、handlebars.js、angular.js、bootstrapのコンテキストで使用できます。

ライブラリ接続：

<head> <script src="jquery.js"></script> <script src="orna.js"></script> </head>

OrnaJSのクラス構造

property_value

color_red

property_value_event

color_red_click

property_value_childtagname

color_red_div

property_value_event_childtagname

color_red_click_div

property_value_childtagname_event

color_red_div_click

様式化

 <div class="bgc_black c_yellow h_100px br_20px shadow_0_0_20px_0_red">Hello! I'm decorated by OrnaJS...</div>

 <div class="bgc_black_a c_yellow_a h_30px_a br_20px_a">Hello! My (a)link decorated by OrnaJS... <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </div>

ドムツリー

DOMツリーを動的に変更する必要がありますか？

1.すべての新しい要素は、Ornaを再起動せずに、子の親要素を介して指定されたスタイルに自動的に従います。

例：

 <div class = "text-decoration_none_a border_none_button"> <a>link</a> <button>Click</button> </div>

2. OrnaJSクラスがすでに登録されている新しい要素が追加された場合、これらのクラスを割り当てるには、OrnaJSを再起動します。

これを行うには、createatom（）関数を実行します。引数がない場合、関数は古い要素をバイパスして、すべての新しい要素を定型化し、引数には特定の新しい要素を指定します。

OrnaJSは、コンピューター上のフォントをシステムフォントでプラグインするか、CSSに直接読み込まれます。OrnaJSはスペースをクラスの終わりとして認識するため、名前にスペースはありません。 ArialとTimes New Romanの2つのフォントは、簡単にアクセスできるように1つの単語（arial、times）で接続されていますが、一般的にはクラスを記述する必要があります。

 <span class="ff_Verdana">Text</span> <span class="font-family_Verdana">Text</span>

デモ

codepen.io/DimaPopov/pen/dXyZQR

codepen.io/DimaPopov/pen/JKEaby

fiddle.jshell.net/dimapopov/hokLfqqo

www.youtube.com/watch?v=k4mkK_3YUk8

参照資料

ornaorg.github.io

ornaorg.github.io/AtomicCSS.html

www.npmjs.com/package/ornajs

github.com/OrnaOrg

github.com/OrnaOrg/OrnaJS

OrnaJSライブラリを使用する