Cell は、Sass を使用して UI コンポーネントのスタイリングを支援するために私が開発したライブラリです。 この記事では、（Sass に慣れている人なら）なじみのあるいくつかの概念について簡単に紹介します。
Cell Atom は単一の CSS プロパティで、渡されたコンテキストに基づいて要素に適用される 2 つの異なる値を出力するものです。 この場合、コンテキストは、特定の修飾子/擬似状態の存在、または要素/いくつかの親要素がホバーされているかどうかなどのことを意味します。 これは、何らかのイベントや相互作用に基づいてプロパティをトグルする場合に便利です。
例として、display プロパティを使用して要素を非表示/表示する場合があります。 display プロパティの値が none であるか block であるかは、問題のコンテキストまたは条件によって決まります。 Sass では、これは次のようになります：
… これは、要素が active クラスを持つ場合に表示します。 もし、特定の親が active クラスを持つ場合にその要素を表示したい場合は、次のようになります：
CSS-in-JS APIを使ってこの例を表現すると、次のようになるでしょう。
…here we can see how the JavaScript example we just define one display property, with the value being dynamic.The API in the JavaScript example. この値は、context オブジェクトが変更されるたびに再評価され、それに応じて要素が再描画されます。
Sass の例では、CSS のカスケード式の性質 (と動的性質の欠如) を考慮して、複数の display 属性をカスケード方式で定義し、あとは特異性の戦いに決定させます。 Sass には関数があるので、CSS-in-JS の動作を模倣するカスタムの context 関数を作成してこれを回避しようと考えることもできます。 Sass はクライアントに送信される前に context('.someParent.active', block, none) を一度だけ評価し、したがって単一の CSS ルールしか作成できませんが、JavaScript は context.someParent.active ? 'block' : 'none' をその場で評価できます。
私たちができる最善の方法は、関心のあるプロパティごとに個別の混合物を持つことです。 この Mixin は、Cell Atom として知られています。 Cell と display Atom を使用する場合、上記の例は
に縮小できます。 これで、裏を返せば、好きなだけ多くのCSSプロパティを好きなだけ多くのルールで出力することができるようになったのです。 上記のコードは、
のための構文解析となります。実際に、すべての Cell Atom のインスタンスは、上記と同様の方法でアンダーザフードで表されます (Atom に渡されたコンテキストは、context Mixin に転送されます)。
この概念は、特定のコンテキストが単一の CSS プロパティを修正するよう要求する場合に便利で、hide/show の例は私が思いつく中で最もよく使われるケースでした。 もし、渡されたコンテキスト/条件に基づいて複数の CSS プロパティを要素に適用する必要がある場合は、context Mixin.
もちろん、すべてのプロパティに対して個別の Mixin を持つことは過剰だと思うかもしれませんし、CSS プロパティの数が約 800 あることを考えるとそのとおりでしょう。 しかし、ほとんどの CSS プロパティはこの方法で使用すべきではありません。レイアウトや機能に影響を与えるプロパティのみです (その場合でも、単一のプロパティが hide/show などの単一の動作を制御する場合のみです)。 そのため、Cell には現在、display、position、visibility プロパティの Atom が付属しています。
Cell Molecules
A Cell 分子は基本的に通常の Sass Mixin で、特定の結果を出すために与えられたコンテキスト/条件に基づいて、1 つまたは複数の CSS ルールを出力します。 目標は、繰り返されるパターンを構成可能な Mixin に抽象化し、Sass コードベースの明快さと保守性を向上させることです。 Cell Atoms とは異なり、Cell Molecule を使用する (呼び出す) 際には CSS プロパティや値は渡されません。
これは Bourbon Sass ライブラリと原理的には非常に似ています (Cell Molecule がコンテキスト入力を取り、複数のコンテキスト駆動型ルールを出力するという違いです)。 前の hide/show の例では、これを Cell 分子に抽象化して次のように使用できます:
… 基本的には Cell に対して「渡された条件が満たされない限りこの要素を非表示にして、その場合は表示する」と指示します。 必要な機能（つまり、noneやblockの値を適用する）は、仮想的なshow Mixinによってアンダーザフッドで処理されるでしょう。 上記は、
…（原理的には）以前の vanilla Sass の例と同等になります：
ある CSS セットをセル分子として認定するハードセットの方法は実際ありません。
Cell Molecule は単なる哲学/概念です。 現在、Cell 分子ライブラリやその他のものはありません。
Conclusion
アトムと分子の役割は異なりますが、両方の最終目的はスタイルをより構成可能に維持することです。 Cell を使用し、コードベース内のアトムとモレキュールを識別する (または、新しいプロジェクトや機能を作成する場合は予測する) ことで、コードベースがより簡潔で意味深いものになり、間違いなく順序なく適用されるさまざまな CSS プロパティを排除できるようになります。
この記事のさまざまな例を並べて見てみると、これらのコンセプトの背後にある動機をよりよく理解できます (これらの例はすべて同じことを達成していることを覚えておいてください)。