SMACSS_html/css_WEB-ITnose についての話

SMACSS (Scalable and Modular Architecture for CSS) は「スマックス」と同じように発音されます。フレームワークやライブラリではありません。これは、CSS コードを編成するための単なる方法論 (または、コードを拡張可能にして保守しやすくするための一連の仕様。これにより、チーム開発が容易になります)。人はそれぞれ世界を異なる視点から見ており、その方法論も人によって異なるため、このセットがあなたに適しているとは限りません。

CSS 分類

SMACSS に従って 5 つのカテゴリに分類できます:

1. 基本 - 通常、いくつかのデフォルトのスタイル、reset.css、normalize.css など

   html, body, form { margin: 0;}input[type=text] { border: 1px solid #999;}a { color: #390;}

2. レイアウト -ルールそれページを複数の部分に分割します。レイアウトには 1 つ以上のモジュールを含めることができます。

   .nav {}.footer {}.sidebar {}

3. モジュール - この部分は、ポップアップ ボックスやハンバーガー ボタンなどの再利用可能なモジュール コードです。

   .panel {}.panel-body {}

4. 状態 - 状態は、レイアウトとモジュールを記述するために使用される特別なスタイルです。

   .is-hidden {}

5. テーマ - テーマはさまざまなテーマを定義することです

命名規則

通常、l- 接頭辞はこのクラス名をレイアウトとしてマークするために使用され、is- 接頭辞は状態クラスなどとしてマークされ、モジュール 必要はありません。何でもいいので呼び出してください。

/* Example Module */.example { }/* Callout Module */.callout { }/* Callout Module with State */.callout.is-collapsed { }/* Inline layout */.l-inline { }

属性のグループ化

CSS 属性を変更するとき、多くの場合、ターゲットの属性を肉眼で検索する必要があります。属性が整理されていない場合は、調査にさらに時間を費やす必要があります。 CSS 属性をアルファベット順に配置するプラグインを開発した人がいますが、個人的には、幅と高さを変更する必要がある場合、高さを見つけてから幅を見つける必要があると思います。まだかなり面倒です。通常、このようなパラメータはグループで表示されます。

次の順序で書くことができます:

• Box (表示、浮動小数点、位置、左、上、高さ、幅…)
• ボーダー (ボーダー、ボーダー画像、ボーダー半径…)
• 背景 (背景- color、background-image… )
• Text ( font-family、font-size、text-transform… )
• Other (その他)

セレクターのパフォーマンスの最適化

CSS セレクターは右から左に一致します

body div#content p {  color: #003366; }

ブラウザは p 要素を見つけると、div#content のような親要素があるかどうかを調べます。見つかった場合は、一致するまで検索を続け、レンダリングに追加します。ツリー; if 見つからない場合、一致は失敗し、このスタイルは機能しません。

食事をコントロールし、過食に注意してください: 子孫セレクターは非常に便利ですが、上記の分析から、p 要素が見つからない場合は上向き検索を実行する必要があり、これは明らかに非常にコストがかかることがわかります。

次の 3 つのルールに従うと、健康を維持するのに役立ちます:

• サブクラス セレクターを使用します ('>'、IE6 についてはごめんなさい)
• 共通のタグ セレクターの使用を避ける
• 右端のセレクターにはクラス名を使用します

たとえば、DOM に 12 個の H3 がある場合、.module h3 のようなノードの場合、上向きの探索経路は長くなります。 .module > h3 に変更すると、24 個の要素を検索するだけで済みます。

カラー宣言

十分簡潔であるため、3 桁または 6 桁の 16 進数のカラー値を使用するようにしてください。 rgbとhslは少し長めです。もちろん rgba と hsla は 16 進数にはアルファ値がないので避けられません。

ファイル構成

• すべての基本スタイルを個別のファイルに配置します
• レイアウトはファイルのサイズに応じて、複数のファイルに調整するか、同じファイルに配置します
• 各モジュールには個別のファイルがあります
• サブモジュール プロジェクトのサイズに応じて
• グローバル状態は別のファイルに配置されます
• レイアウト、モジュール状態、メディアクエリは対応するモジュールファイルに配置されます

Sassと組み合わせると、ファイルツリーは次のようになります

+-layout/ | +-grid.scss | +-alternate.scss +-module/ | +-callout.scss | +-bookmarks.scss | +-btn.scss | +-btn-compose.scss +-base.scss +-states.scss

そして main.scss で導入された、

@import "base", "states", "layout/grid", "module/btn", ...

は最終的に main.css ファイルを生成します。 jonathanpath の SASS-SMACSS、github アドレスを参照できます

その他のリソース

CSS プリプロセッサ

• LESS
• Sass

その他の方法論

• OOCSS
• BEM

ドキュメント

フロントエンド スタイル ガイド

その他のリソース

口ひげは光です環境に左右されない論理的なテンプレート言語です。

さらに高度な仕様

壁クラック推奨 Hugo Giraudel’s Sass ガイドライン

イースターエッグ

この記事は SMACSS 電子書籍を購入したので、私の学習メモ + 要点のまとめです。必要に応じて、メール アドレスを残していただければ、電子書籍を共有したり (学習とコミュニケーションのみ)、WeChat QR コードをスキャンして私を友達として追加したりできます。