CSSアーキテクチャについて学ぶ：Atomic CSS -SitePoint

次の抜粋は、ティファニー・ブラウンによって書かれた本「CSSマスター」からのものです。この本は世界中の主要な書店で入手できます。また、ここで電子書籍バージョンを購入することもできます。

BEMが業界の最愛の人である場合、Atomic CSSはその反抗的なトレンドセッターです。 YahooのThierry Koblentzは、クラス名のコンパクトなライブラリを使用する2013年の記事に挑戦しているCSSベストプラクティスに挑戦し、Atomic CSSを指名し、説明しました。これらのクラス名は通常省略されており、影響が影響を受けていません。アトミックCSSシステムでは、クラス名が何をするかを知ることができます。クラス名の間に関係はありません。

例を示して説明しましょう。以下は、従来のCSSアーキテクチャと呼ぶことができる一連のルールです。これらのルールセットは、アプリケーションのコンテンツを説明するクラス名を使用します。グローバルメッセージボックス、および成功、警告、エラーメッセージボックスのスタイル：

<code>.msg {
  background-color: #a6d5fa;
  border: 2px solid #2196f3;
  border-radius: 10px;
  font-family: sans-serif;
  padding: 10px;
}
.msg-success {
  background-color: #aedbaf;
  border: 2px solid #4caf50;
}
.msg-warning {
  background-color: #ffe8a5;
  border-color:  #ffc107;
}
.msg-error {
  background-color: #faaaa4;
  border-color: #f44336;
}</code>

「オフィスのCSSヒーローになる：CSSアーキテクチャのヒント」をご覧になり、構造化された保守性のスケーラブルなCSSを構築することを学びましょう！このコースを表示このコースを表示してエラーメッセージボックスを作成するには、msgとmsg-errorの両方のクラス名を要素のクラス属性に追加する必要があります。

それを原子システムと比較しましょう。各宣言は独自のクラスになります：

<code><p class="msg msg-error">发生错误。</p></code>

CSSコードの量は大幅に増加しています。次に、エラーメッセージコンポーネントを再作成しましょう。アトミックCSSを使用すると、タグは次のようになります

<code>.bg-a {
  background-color: #a6d5fa;
}
.bg-b {
  background-color: #aedbaf;
}
.bg-c {
  background-color: #ffe8a5;
}
.bg-d {
  background-color: #faaaa4;
}
.bc-a{
  border-color: #2196f3;
}
.bc-b {
  border-color: #4caf50;
}
.bc-c {
  border-color:  #ffc107;
}
.bc-d {
  border-color:  #f44336;
}
.br-1x {
  border-radius: 10px;
}
.bw-2x {
  border-width: 2px;
}
.bss {
  border-style: solid;
}
.sans {
  font-style: sans-serif;
}
.p-1x {
  padding: 10px;
}</code>

マークも長くなっています。しかし、警告メッセージコンポーネントを作成するとどうなりますか？

<code><p class="bw-2x bss p-1x sans br-1x bg-d bc-d">发生错误。</p></code>

2つのクラス名が変更されました。BG-DとBC-DはBG-CとBC-Cに置き換えられます。 5つのルールセットを再利用しました。それでは、ボタンを作成しましょう：

<code><p class="bw-2x bss p-1x sans br-1x bg-c bc-c">警告：该商品价格已更改。</p></code>

見て！ここでは、4つのルールセットを再利用し、スタイルシートにさらにルールを追加することを避けました。強力なアトミックCSSアーキテクチャでは、新しいHTMLコンポーネント（ポストサイドバーなど）を追加するには、CSSを追加する必要はありません（実際には、追加が必要になる場合があります）。 Atomic CSSは、CSSでユーティリティクラスを使用することに少し似ていますが、極端に進みます。具体的には、それ：

<code><button type="button" class="p-1x sans bg-a br-1x">保存</button></code>

各コンポーネントのルールセットを作成する代わりに、非常に微細に再利用可能なスタイルを作成することにより、CSSを簡潔に保ちます

低い特定のセレクターシステムを使用して、特定の競合を大幅に削減する

初期ルールセットが定義されると、HTMLコンポーネントを迅速に開発できます
• しかし、原子CSSには論争がないわけではありません。
原子CSSに対する

議論

原子CSSは、CSSの作成について学んだほとんどすべてのことに反しています。貼り付けスタイルの属性と同じくらい悪い感じがします。実際、これは原子CSSアプローチに対する主要な批判の1つです。コンテンツとパフォーマンスの境界線を曖昧にします。要素を左に浮かんで10ピクセルのマージンを追加する場合、要素を左に浮かせたくないときはどうすればよいですか？

もちろん、1つの答えは、FLクラスを要素から削除することです。しかし、今ではHTMLを変更しています。 CSSを使用する全体の理由は、タグがパフォーマンスの影響を受けないことであり、その逆も同様です。 （StyleSheetから.fl {float：left;}ルールを削除することでこの問題を解決することもできますが、クラス名FLのすべての要素に影響します）。それでも、HTMLの更新は、よりクリーンなCSSに支払うためのわずかな価格かもしれません。

Kobleentzの元の記事では、.M-10（マージン：10px）や.p-10（パディング：10px）などのクラス名を使用しました。この命名条約の問題は明らかなはずです。 5ピクセルまたは20ピクセルのマージンに変更すると、CSSとHTMLを更新する必要があります。そうしないと、クラス名がその効果を正確に説明しないようにする可能性があります。
P-1Xなどのクラス名（このセクションに示すように）を使用すると、この問題を解決できます。クラス名の1倍の部分は、ピクセルの定義された数ではなく、比率を表します。基本塗りつぶしが5ピクセル（つまり.p-1x {padding：5px;}）の場合、.p-2xは10ピクセルの塗りつぶしを設定します。はい、これはクラス名が何をするのか完全には説明していませんが、HTMLを更新せずにCSSを変更したり、誤解を招くクラス名を作成したりすることもできます。
原子CSSスキーマは、タグのコンテンツ

を記述するクラス名を使用することを妨げません。まだコードに.button-closeまたは.accordion-triggerを追加できます。このクラス名は、JavaScriptおよびDOM操作により適しています。 bemおよび原子CSS

BEMは、CSSとHTMLモジュールを並行して構築する多数の開発者がいる場合に最適に機能します。大規模なチームによって作成されたバグやバグを防ぐのに役立ちます。命名規則が説明的で予測可能であるため、それはよく拡大します。 BEMは、大規模なチームにとっては

ではありません。 Atomic CSSは、一連のCSSルールの開発を担当し、より大きなチームが完全なHTMLコンポーネントを構築する小さなチームまたはエンジニアがいる場合、より適切に動作します。 Atomic CSSを使用すると、開発者は、スタイルガイドまたはCSSソースコードを見るだけで、特定のモジュールで必要なクラス名のセットを決定できます。

アトミックCSS

に関する

FAQ

原子CSSと従来のCSSの主な違いは何ですか？

機能的CSSとしても知られる

原子CSSは、スタイルをアトミックまたは不可分なフラグメントに分割する方法です。各クラスは1つのことだけを行います。これは、マージンを設定したり、フォントの色を変更したりするのと同じくらい簡単です。一方、従来のCSSは通常、特定の要素の特定のクラスを作成することを伴い、スタイルシートの膨満感や特定の競合につながる可能性があります。アトミックCSSは再利用性を向上させ、よりクリーンで維持しやすいコードを生成できます。

原子CSSはパフォーマンスをどのように改善しますか？

原子CSSは、スタイルシートのサイズを縮小することでパフォーマンスを大幅に改善できます。各クラスは1つしかないので、CSSの重複は少なくなります。これにより、ファイルサイズが小さくなる可能性があります。これは、ユーザーの読み込み時間が速くなることを意味します。

原子CSSは大規模なプロジェクトに適していますか？

はい、原子CSSは大規模なプロジェクトにとって特に有益です。これにより、一貫性と再利用性が向上し、コードベースの維持が容易になります。ただし、考え方の変更が必要であり、すべてのチームまたはプロジェクトに適していない場合があります。

原子CSSの一般的な批判は何ですか？

一部の批評家は、各要素に複数のクラスを持つことができるため、原子CSSがHTMLを長く読みにくいことにつながる可能性があると考えています。スタイル情報はマークアップと混合されるため、他の人は懸念の分離を破ることを心配しています。しかし、Atomic CSSの支持者は、これらの懸念は、よりクリーン、維持が容易なクリーナーの利点によって相殺されると考えています。

プロジェクトでアトミックCSSを始めるにはどうすればよいですか？

ACSS、タキオン、追い風CSSなどの原子CSSを始めるのに役立つライブラリがいくつかあります。また、スタイルをアトミックで再利用可能なクラスに分割することにより、アトミックCSSの原理を独自のスタイルシートに組み込むこともできます。

原子CSSは、SASS以下のような前処理装置で使用できますか？

はい、原子CSSは、SASS以下のようなCSS前処理装置で使用できます。ただし、原子CSSは特定のツールやフレームワークではなく方法であることを覚えておくことが重要です。それは、あなたがそれを書くために使用するツールではなく、あなたがあなたのCSSを構築し整理する方法についてです。

Atomic CSSはBootstrapのようなCSSフレームワークと互換性がありますか？

はい、Atomic CSSはBootstrapなどのCSSフレームワークで使用できます。ただし、原子CSSの主な利点の1つは、再利用性とシンプルさを改善することにより、大きな肥大化したフレームワークの必要性を減らすことです。

アトミックCSSは応答性のある設計をどのように処理しますか？

Atomic CSSは、特定の画面サイズにクラスを使用することにより、レスポンシブデザインを処理できます。たとえば、大きな画面にマージンを設定するクラスと、小さな画面に異なるマージンを設定する別のクラスがある場合があります。

Atomic CSSは、ReactやVueなどのJavaScriptフレームワークで使用できますか？

はい、Atomic CSSは、ReactやVueなどのJavaScriptフレームワークで使用できます。実際、一部の開発者は、両方ともコンポーネントベースのアーキテクチャを提唱するため、原子CSSがこれらのフレームワークをよく補完していることを発見しています。

原子CSSの詳細を学ぶためのリソースは何ですか？

原子CSSについて詳しく知るために利用できるリソースがたくさんあります。推奨されるリソースには、ACSS Webサイト、CSS-Tricks、および中型およびその他のコーディングブログに関するさまざまな記事やチュートリアルが含まれます。

以上がCSSアーキテクチャについて学ぶ：Atomic CSS -SitePointの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。