プログラマーの良いウェブ学習共有するためのフロントエンドルート CSS モジュラーアプローチを、この記事では紹介 CSS モジュラーアプローチを、CSS 可能とモジュラーソリューションJS 限り、いくつかの主要なモジュールプログラムの簡単な紹介に続いて、非常に実用的な価値必要性の小さなパートナーは、を参照することができます。
CSS モジュラー可能な解決策とjsのいくつかの主要なモジュールプログラムの簡単な紹介以下同じくらい、。
oocss
分離構造と分離容器とコンテンツの外観：オブジェクトのルールの面は、二つの主な原理です。
用語集
1 、単離された構造と外観：製品を促進するために同時に繰り返しデザインユニットを増加させ、 UIの次のような、この分野での考慮事項のCSS オブジェクトモデルの命名規則とモジュラー使用。
2 、分離容器と内容：使用パターンを参照するには、あなたがこのスタイルをデフォルトのスタイルのままになります適用されない場合はどこでもあなたは、このスタイルを使用することができ、要素の位置に合わせてユニークではありません。
例
| // DOM構造 <DIV CLASS = "toogleシンプル"> <DIV CLASS = "toogle制御オープン"> <DIV CLASS = "toogle-点画">标题</ div> </ div> <DIV CLASS = "toogle-詳細"> </ div> </ div> |
|
|
|
|
| 一意モジュールを識別する//タグ 。トグル{ } //皮膚文体基本構造が同じであれば、あなたは複雑なの二次形式を使用することができます .toggle.simple { } //ネストされたプリプロセッサを書くの多くは、その後、多くの人が書き込みますでしょうネストされた部分をサポートしていると考えている場合の対処、お勧めできません .toogle { .toogle制御{ } .toogle-詳細{ } } 実際に子供が直接書き込むことができたときに我々が一意確認することができれば、これは、クエリの効率が低下することが推奨されていませんので、//実際には、あなたはそれを整理しましょう .toogle {} .toogle制御{} .toogle-詳細{} |
|
smacss
SMAとoocss多くの類似点がありますが、区別するために、多くの場所、スタイルの主な分類があります。すなわち：基本、レイアウト、モジュール、状態、テーマ
財団
任意の位置に適用することができ、私はまた、グローバルスタイルと呼ばれます
レイアウト
主な機能は、異なるレイアウト、レイアウトの再利用率の増加を達成するために使用されています
モジュール
モジュラー設計、再利用可能なユニットは、一般的に結合DOM + CSSに結合されました。
状態
で、モジュールの特定の状態におけるレイアウトまたは特殊性能を記述する DOM構造無傷は、CSSリビジョンの皮膚パターンを介して達成することができる場合。
テーマ
状態よりカスタマイズと比較すると、我々はいくつかの特別なモジュールのため、色など、寸法の範囲、深刻なインタラクションデザイン、パラメトリック設計を含め、テーマを設定します。
ケース
| // DOM構造 <DIV CLASS = "toogle toogle-シンプル"> <DIV CLASS = "toogle制御は、アクティブ"> <DIV CLASS = "toogle-点画">标题</ div> </ div> <DIV CLASS = "toogle-詳細"> </ div> </ div> |
与oocss相比，其实大部分设计思路是一样的，以一个类作为css的作用域（作用域就是两个限制，1 不符合场景时限制禁止使用 2 符合场景时要正确的使用），另外的区别就是针对皮肤和状态的不同书写规则。
bem
bem就是块、元素、修饰符的思维去写样式。它不涉及具体的css结构，只是建议你如何命名css.
案例
| // dom结构 <div class="toogle toogle--simple"> <div class="toogle_control toogle_control--active"> <div class="toogle_tittle">标题</div> </div> <div class="toogle_details "></div> </div> |
解释
1、块级：所属组件的名称
2、元素：元素在组件里的名称
3、修饰符：任何与元素修饰相关的类
这种命名方式的缺点，样式名会很长，但实际上在smacss以及oocss中都会一定程度的使用，命名很语义化，在不清楚模块时，我们可以根据样式名得出对应的结构可能是如何的。
选择合适的方案
无论哪种方案，关键是哪种是最合适团队的，我们目前的方式是：bem和smacss集合的方式。