技術

SMACSSの探索：CSSのスケーラブルでモジュラーなアーキテクチャ

大規模なプロジェクトや開発者のグループで作業していると、コードが乱雑で読みにくく、拡張しにくいことがよくあります。これは特に時間が経過した後に当てはまり、私たちは戻ってそれをもう一度見ます。私たちはそれを書いたときと同じ考え方にあるように努めなければなりません。

Webおよびモバイルアプリケーションの開発

だから多くの人がやったことは彼らが作ったということです CSS CSSが読みやすくなるようにコードのスタイルを設定するのに役立つアーキテクチャ。 SMACSS -つまり、 スケーラブル そして モジュラーアーキテクチャ ために CSS —まさにそれを行うことを目指しています。これは、私が採用したJonathanSnookのCSSアーキテクチャガイドラインの特定のセットです。

現在、SMACSSのアーキテクチャーアプローチは、BootstrapやFoundationなどのCSSフレームワークとは少し異なります。代わりに、テンプレートやガイドのような一連のルールです。それでは、いくつかのCSSデザインパターンを詳しく調べて、それらを使用してコードを改善する方法を見つけましょう。クリーナー、読みやすく、よりモジュール化されています。

すべてのSMACSSプロジェクト構造は、次の5つのカテゴリを使用します。

ベース
レイアウト
モジュール
状態
テーマ

ベース

SMACSSでは、基本スタイルは、ページ上の任意の場所で要素がどのように表示されるかを定義します。これらはデフォルトです。リセットスタイルシートを使用している場合、これにより、内部のハードコードされた基本CSSのデフォルトが異なっていても、結果のスタイルがブラウザ間で同じになります。

基本スタイルでは、ベア要素セレクター、または疑似クラスを持つもののみを含める必要がありますが、クラスまたはIDセレクターは含めないでください。（おそらく、サードパーティのプラグインの要素をスタイリングしていて、その特定の要素のデフォルトのスタイルをオーバーライドする必要がある場合にのみ、クラスまたはIDをその中に配置する正当な理由があるはずです。）

ベースファイルユニットの外観の例を次に示します。

html { margin: 0; font-family: sans-serif; } a { color: #000; } button { color: #ababab; border: 1px solid #f2f2f2; }

したがって、デフォルトのサイズ、マージン、色、境界線、およびWebサイト全体で使用する予定のその他のデフォルト値を含める必要があります。タイポグラフィとフォーム要素は、すべてのページに表示され、同じデザインとテーマの一部であるという感覚と外観を与える統一されたスタイルを持っている必要があります。

SMACSSであるかどうかにかかわらず、!importantの使用を避けることを強くお勧めします。可能な限り、深いネストを使用しないようにしますが、これについてはこの投稿の後半で詳しく説明します。また、CSSのリセットを使用する場合は、ここに含める必要があります。（私はSassを使用することを好むので、Sassをコピーしたり、各ページの要素とは別に参照したりするのではなく、ファイルの先頭に含めるだけです。）

関連： Sassを使ったテーマ：SCSSチュートリアル

レイアウト

レイアウトスタイルは、ページを主要なセクションに分割します。たとえば、ナビゲーションやアコーディオンなどのセクションではなく、実際にはトップレベルの分割です。

SMACSSレイアウトスタイルの例：ヘッダー、サイドバー、コンテンツ/メイン、およびフッター

SMACSSレイアウトスタイルは、ヘッダー、サイドバー、コンテンツ/メイン、フッターなどの主要なセクション用です。

これらのレイアウトには、ボックス、カード、順序なしリスト、ギャラリーなどの複数のCSSモジュールが含まれますが、モジュールについては次のセクションで詳しく説明します。レイアウトに分割できるものを確認するために、Webページの例を考えてみましょう。

SMACSSを使用してヘッダー、メイン、およびフッターのレイアウトスタイルに編成できるWebページの例

ここに、ヘッダー、メイン、およびフッターがあります。これらのレイアウトには、上部のヘッダーにリンクとロゴ、メインにボックスと記事、フッターのリンクと著作権などのモジュールがあります。レイアウトはページ上で繰り返されず、一意であるため、通常はIDセレクターを使用します。

また、レイアウトスタイルのルールの前に文字lを付ける必要がありますモジュールスタイルと区別するため。通常、ここでは、境界線、配置、余白など、レイアウトに固有のものをスタイル設定します。また、ページのその部分の背景は、レイアウト固有ではないように見えても、意味があります。

外観の例を次に示します。

#header { background: #fcfcfc; } #header .l-right { float: right; } #header .l-align-center { text-align: center; }

また、適切なクラスを子に追加したり、テキストを配置したりするだけで要素を簡単に配置するために使用できる配置用のこれらのヘルパーを追加することもできます。

別の例として、.l-marginのようなレイアウトボックスのデフォルトの余白を使用できます。 20pxのマージンがあります。次に、コンテナ、要素、カード、またはボックスのパディングが必要な場所に、l-marginを追加するだけです。それにクラス。しかし、再利用可能なものが必要です。

.l-full-width { width: 100%; }

このように内部的に結合されたものではありません：

.l-width-25 { width: 25px; }

SMACSSの命名規則について少しお話ししたいと思います。 CSSでの名前空間の概念について聞いたことがない場合は、基本的に、別の要素の先頭に名前を追加して、他の要素と区別できるようにします。しかし、なぜこれが必要なのですか？

次の問題が発生したことがあるかどうかはわかりません。あなたはCSSを書いていて、何かにラベルを付けています。好きなスタイルを入れて、クラスを.labelと呼びます。しかし、後で別の要素に到達し、それも.labelにしたいのですが、スタイルを変えます。したがって、2つの異なるものが同じ名前を持っています-名前の競合。

名前空間はこれを解決するのに役立ちます。最終的に、これらは1つのレベルで同じものと呼ばれますが、名前空間が異なり、プレフィックスが異なるため、2つの異なるスタイルを表すことができます。

.box--label { color: blue; } .card--label { color: red; }

モジュール

前に述べたように、SMACSSモジュールはページ上で再利用可能な小さなコードであり、単一のレイアウトの一部です。これらはCSSの一部であり、1つのページに多数あるため、別のフォルダーに保存します。また、プロジェクトが成長するにつれて、フォルダ構造のベストプラクティスを使用して、つまりモジュール/ページごとに分割できます。

SMACSSとSassを使用したファイル/フォルダー階層の例

したがって、前の例では、それ自体がモジュールになる可能性のある記事がありました。ここでCSSをどのように構成する必要がありますか？クラスが必要です.article子要素を持つことができるtitleおよびtext。したがって、同じモジュールに保持できるようにするには、子要素のプレフィックスを付ける必要があります。

.article { background: #f32; } .article--title { font-size: 16px; } .article--text { font-size: 12px; }

モジュールプレフィックスの後に2つのハイフンを使用していることに気付くかもしれません。その理由は、モジュール名に2つの単語、またはbig-articleのような独自のプレフィックスが付いている場合があるためです。子要素がどの部分であるかを示すために、2つのハイフンが必要です。比較big-article-title 〜big-article--titleおよびbig-article--text。

また、特定のモジュールがページの大部分を占める場合は、モジュールをモジュール内にネストできます。

 This is box label  Box list element

ここで、この簡単な例では、boxがわかります。はモジュールであり、listその中の別のモジュールです。だからlist--li listの子ですモジュールであり、boxではありません。ここでの重要な概念の1つは、CSSルールごとに最大2つのセレクターを使用することですが、ほとんどのシナリオでは、プレフィックス付きのセレクターは1つだけです。

このようにして、ルールの重複や、同じ名前の子要素に余分なセレクターを設定することを回避できるため、速度が向上します。ただし、CSSプロジェクトの構造が不十分であることを示す不要な!importantスタイルのルールの使用を回避するのにも役立ちます。

良い（単一のセレクターに注意）：

.red--box { background: #fafcfe; } .red-box--list { color: #000; }

悪い（セレクター内の繰り返しと重複する参照メソッドに注意してください）：

.red .box { background: #fafcfe; } .red .box .list { color: #000; } .box ul { color: #fafafa; }

状態

SMACSSで状態が定義するのは、さまざまな動的な状況でモジュールがどのように見えるかを説明する方法です。したがって、この部分は実際には対話性のためのものです。要素が非表示、展開、または変更されたと見なされる場合は、異なる動作が必要です。たとえば、jQueryアコーディオンは、要素のコンテンツを表示できる場合と表示できない場合を定義するための支援が必要になります。特定の時間に要素のスタイルを定義するのに役立ちます。

状態はレイアウトと同じ要素に適用されるため、前のルールがある場合はそれをオーバーライドするルールを追加します。状態ルールは、一連のルールの最後のルールであるため、優先されます。

レイアウトスタイルと同様に、ここではプレフィックスを使用する傾向があります。これは、私たちがそれらを認識し、それらに優先順位を与えるのに役立ちます。ここではisを使用しますis-hiddenのようにプレフィックスまたはis-selected。

  Contact
 About

.nav--item.is-selected { color: #fff; }

ここで、!important状態はレンダリング時ではなくJavaScriptの変更として使用されることが多いため、使用できます。たとえば、ページの読み込み時に非表示になっている要素があるとします。ボタンをクリックすると、それを表示します。ただし、デフォルトのクラスは次のようになります。

.box .element { display: none; }

したがって、これを追加するだけの場合：

.is-shown { display: block; }

.is-shownを追加しても非表示のままになりますJavaScriptを介して要素へのクラス。これは、最初のルールが2レベルの深さであり、それをオーバーライドするためです。

したがって、代わりに次のように状態クラスを定義できます。

.is-shown { display: block !important; }

これが、ページの初期読み込みにのみ適用されるレイアウト修飾子と状態修飾子を区別する方法です。これは、最小限のセレクターの利点を維持しながら機能します。

テーマ

これは、原色、形状、境界線、影などのルールを含むために使用されるため、最も明白なはずです。ほとんどの場合、これらはWebサイト全体で繰り返される要素です。作成するたびに再定義する必要はありません。代わりに、後でデフォルト要素に追加するだけの一意のクラスを定義します。

.button-large { width: 60px; height: 60px; } Like

これらのSMACSSテーマルールを基本ルールと混同しないでください。基本ルールはデフォルトの外観のみを対象とし、デフォルトのブラウザ設定にリセットするようなものになる傾向がありますが、テーマユニットは最終的な外観を与える一種のスタイリングです。この特定の配色に固有です。

テーマルールは、サイトに複数のスタイルがある場合、または異なる状態で使用されるテーマが2つある場合にも役立ちます。したがって、ページ上の一部のイベント中に簡単に変更または交換できます。テーマ切り替えボタン付き。少なくとも、すべてのテーマスタイルを1つの場所に保持するため、簡単に変更して整理することができます。

CSS編成方法論

このCSSアーキテクチャのアイデアの重要な概念のいくつかを取り上げました。この概念について詳しく知りたい場合は、次のWebサイトにアクセスしてください。 SMACSSの公式サイトそれに深く入ります。

はい、おそらく次のようなより高度な方法論を使用できます OOCSSとBEM 。後者は、ほぼ完全なフロントエンドワークフローとそのテクノロジーをカバーしています。ウェルセレクター一部の人にとってはうまくいくかもしれませんが、長すぎて圧倒され、複雑すぎて使用できない人もいます。簡単に選択してワークフローに組み込むことができる、よりシンプルなものが必要な場合、およびあなたとあなたのチームの基本ルールを定義するものが必要な場合は、SMACSSが最適です。

新しいチームメンバーは、以前の開発者が何をしたかを理解するだけでなく、コーディングスタイルに違いがなく、すぐに作業を開始することも簡単になります。 SMACSSは単なるCSSアーキテクチャであり、缶に書かれていることを実行します。それ以上でもそれ以下でもありません。