SMACSS (Scalable and Modular Architecture for CSS) は「スマックス」と同じように発音されます。フレームワークやライブラリではありません。これは、CSS コードを編成するための単なる方法論 (または、コードを拡張可能にして保守しやすくするための一連の仕様。これにより、チーム開発が容易になります)。人はそれぞれ世界を異なる視点から見ており、その方法論も人によって異なるため、このセットがあなたに適しているとは限りません。
SMACSS に従って 5 つのカテゴリに分類できます:
基本 - 通常、いくつかのデフォルトのスタイル、reset.css、normalize.css など
html, body, form { margin: 0;}input[type=text] { border: 1px solid #999;}a { color: #390;}
レイアウト -ルールそれページを複数の部分に分割します。レイアウトには 1 つ以上のモジュールを含めることができます。
.nav {}.footer {}.sidebar {}
モジュール - この部分は、ポップアップ ボックスやハンバーガー ボタンなどの再利用可能なモジュール コードです。
.panel {}.panel-body {}
状態 - 状態は、レイアウトとモジュールを記述するために使用される特別なスタイルです。
.is-hidden {}
テーマ - テーマはさまざまなテーマを定義することです
通常、l- 接頭辞はこのクラス名をレイアウトとしてマークするために使用され、is- 接頭辞は状態クラスなどとしてマークされ、モジュール 必要はありません。何でもいいので呼び出してください。
/* Example Module */.example { }/* Callout Module */.callout { }/* Callout Module with State */.callout.is-collapsed { }/* Inline layout */.l-inline { }
CSS 属性を変更するとき、多くの場合、ターゲットの属性を肉眼で検索する必要があります。属性が整理されていない場合は、調査にさらに時間を費やす必要があります。 CSS 属性をアルファベット順に配置するプラグインを開発した人がいますが、個人的には、幅と高さを変更する必要がある場合、高さを見つけてから幅を見つける必要があると思います。まだかなり面倒です。通常、このようなパラメータはグループで表示されます。
次の順序で書くことができます:
CSS セレクターは右から左に一致します
body div#content p { color: #003366; }
ブラウザは p 要素を見つけると、div#content のような親要素があるかどうかを調べます。見つかった場合は、一致するまで検索を続け、レンダリングに追加します。ツリー; if 見つからない場合、一致は失敗し、このスタイルは機能しません。
食事をコントロールし、過食に注意してください: 子孫セレクターは非常に便利ですが、上記の分析から、p 要素が見つからない場合は上向き検索を実行する必要があり、これは明らかに非常にコストがかかることがわかります。
次の 3 つのルールに従うと、健康を維持するのに役立ちます:
たとえば、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 アドレスを参照できます