まず、CSSの方法は何ですか

CSS methodologies、として理解することができるデザインパターン、それも理解することができるCSS仕様以下に示すように、市場での使用：

図出典：https://2019.stateofcss.com/technologies/

あなたは、CSSの方法論の開発と理解に注意を払うように日々の時間を費やすことはできませんが、あなたはあなたの経験を構築するとして、あなたは自分自身のためにと思うかもしれない、あるいは他の人のコードを読み取るために、オンラインの成熟したフレームワークを参照してください、もっとありますまたは少ないが、いくつかのCSS方法論に明るいスポットが含まれています。そして、いくつかの主流のCSS方法論は、次のことを紹介し、それはあなたが非常に良い要約、および櫛を行うことができます。

第二に、一般的なCSSの方法論

1、OOCSS

面向对象的 CSS（オブジェクト指向CSS、略してOOCSS）によってニコール・サリバンは、ヤフーで彼女の仕事に基づいている、2008年に提案しました。

（1）規則

1、クラスIDを使用していません

スタイルを設定するためのクラスを直接使用するので、書き込みセマンティクスを高めるだけでなく、HTMLのCSSへの依存を軽減することができないだけ。

2、構造及びスタイルの分離

初期のHTMLとCSSは、分離構造とスタイルが、パターンの2種類の同じ内部CSSを達成するが：

構造パターン（例えば、長さ、幅、距離）
スキンスタイル（色など、シェーディング）

？だから、OOCSS離れてこれらの2つのスタイルをお勧めします。

例えば、赤/緑/白、と定義することができる3つのボタンが存在します。

class="btn btn-default"

class="btn btn-green"

class="btn btn-red"

あなたが本当に紫色のボタンで番号をお持ちの場合は、紫色のボタンの別のクラスを作成することができます。これは、大幅にCSSコードの量を減らすことができます。

図3に示すように、分離容器および内容物

コンテンツは、スコアを残して、再利用のため、特定のコンテナに限定すべきではありません。

# 错误写法
.header .action {
}
.header .action .login {
}
.header .action .register {
}

# 正确写法
.header{
}
.action{
}
.login {
}
.register {
}

それは同じ名前によってトリガ紛争のスタイルを減らすことができるので、継承セレクタが有用である（多くの場合、人々の共同開発で発生します）。しかし、我々は過剰に使用すべきではありません。

（2）長所と短所

利点：

再利用可能なモジュール式、
コードの重複を減らします
拡張性、保守性、可読性を向上させます

短所：

ネストされたセレクタの深さを減らすことが、しかし、はるかクラス
コードは、このようないくつかの小さなプロジェクトとして視覚パターンの繰り返しの多くではない場合、アプリケーションが実用的ではないかもしれないOOCSS

（3）実施例

ブートストラップはOOCSSを使用しています。

例えば：

HTML

    <div class='header'>
        <ul class='menu'> 
            <li class='menu-item active'>1</li>
            <li class='menu-item'>2</li>
            <li class='menu-item'>3</li>
        </ul>
        <div class="action">
            <button class="btn btn-login">login</button>
            <button class="btn btn-register">register</button>
        </div>
    </div>

CSS：

.header {
}
.menu {
}
.menu-item {
}
.item.active {
}
.action {
}
.btn {
}
.btn-login {
}
.btn-register{
}

2、および

BEM - ブロック要素Modfier（ブロック要素エディタ）。2009年生まれ。

（1）コンテンツ

BEMは3で構成されています。

Block - ブロック、ヘッダ等
Element - そのようなブロックのメニュー項目としてサブ要素、
Modfier - そのような.current、.activeなどの状態、

（2）規則

1、命名規則

-下線を引いた：としてのみハイフン、ブロックの符号語または子要素の複数の接続を指します。
__ 二重下線：サブブロック及びブロック接続要素のため。
-- ダブル下線：ブロックまたはブロックの子要素の条件を記述するために使用されます。

仕様（例えばテンセントなど）いくつかの企業では、二重下線（下線付きのシングルある_代わりに）。

例えば：.block-name__element--modifier

デモ - HTML：

    <div class='header'>
        <ul class='header__menu'> 
            <li class='header__menu-item--active'>1</li>
            <li class='header__menu-item'>2</li>
            <li class='header__menu-item'>3</li>
        </ul>
        <div class="header__action">
            <button class="header__btn--login">login</button>
            <button class="header__btn--register">register</button>
        </div>
    </div>

デモ - レス：

.header {
    &__menu {}
    &__menu-item {}
    &__action {}
    &__btn {  
        &--login {}
        &--register {}
    }    
}

2、ネストを避けます

BEMアップのみ3 B + E + M.

だから、避けてください.block__el1__el2代わりに、直接書式を.block_el2。

ここでのブロックは、希望の名前空間のを。

（3）長所と短所

利点：

読みやすい、明確な階層
レベル選択の範囲を頼ることなく、クロスコンタミネーションスタイルの組み立てを避けるために、制約を定義しました。

短所：

見苦しい長い名前付き、不便な書き込み（書き込みが少ない/ SASSによって簡素化することができます）
小さなコンポーネントに、BEMフォーマットは無味に見えるかもしれません。しかし、公共、グローバルモジュールのスタイル定義のために、BEMの形式を使用することをお勧めします。（具体的には、共通する構成要素は解放します）

その他：

BEM名は、クラスのクラス名を長くするが、gzipの後に、帯域幅のオーバーヘッドが無視できる圧縮します。

BEMは、も、最も簡単なLiは.menu項目書き込まれる必要があり、タグセレクタを使用することを許可されていません。

（4）実習

空腹は何の枠組みelementUIは BEMの一種である、またはあなたがすることもでき、研究サイトcompany.yandex.ru/。

3、SMACSS

SMACSS（スケーラブル＆モジュラーアーキテクチャCSS、すなわちCSSの拡張性とモジュラー型アーキテクチャ）。ジョナサン・スヌークは、彼はヤフーで働いていた時に、YahooメールにCSSを書く2011で行われました。

（1）規則

1、の分類CSS規則（CSS分類規則）

CSSは、5つの異なるカテゴリーに分割されます。

Base 基本仕様

このようなCSSのリセットやCSSノーマライズなど。
Layout レイアウト仕様

たとえば、左と右の列、グリッドシステム。
Module モジュール

このような製品のリスト、ナビゲーションバーなど。再利用可能。
State 国家の規範

例えば、選択されました。
Theme スタイル指定

図2に示すように、命名規則（命名）

クラス名を追加します前缀：

ベース接頭辞は必要ありません。しかし、いないクラスラベルとID。
l- レイアウトは、接頭辞として使用されます。l-inline
m-モジュールは次のように使用されるm-callout接頭辞：。しかし、それは接頭辞することはできません。
is- 国家の接頭辞として使用されます。is-collapsed
通常、テーマの前に存在していたクラス名を持つ新しいtheme.css、。あなたは別のクラス名を使用する場合は、利用可能theme-プレフィックス。

例：

<div class="l-box m-profile m-profile--is-pro-user">
  <img class="m-avatar m-profile__image" />
  <p class="m-profile__bio">...</p>
</div>

（2）実施例

在线 demo：https://codepen.io/savemuse/pen/gWVpvd

4、アトミックCSS

Atomic CSS文字通りの意味から理解できるようYahooはまた、提案されています原子 CSS。

（1）実施例

<div className="P(10px) M(20%) Pos(f) Start(50%) Bgc(#fff)" />

特殊工具アトミックCSSを持って、HTMLは上記のクラス名は、通常のCSSに解決するのに役立ちます。（少し）

（2）長所と短所

利点：CSSスタイルの最小の構成要素は、再利用性を最大化します。

短所：これは単に、インラインスタイル、我々はそれを表現するために、クラス名を使用するだけの方法を書いています。

（3）まとめ

このアプローチは本当に基です。私は同意しません。

第三に、要約

積極的な原子力にもかかわらず、I / BEM / SMACSSはOOCSSの残りのための次の推奨事項があります。

彼らは思ったの相補だけでなく、競合を使用する実際の開発にトレードオフがあることができ、
彼らは、することができるCSSプリプロセッサと組み合わせ、効率をよくするため（例えば、より少ない/ SASSとして）
上記の利点は、その比較の概要一緒に導入され、彼らは、コアの問題が解決されることがわかった：モジュラーを

モジュラーを達成するためにCSSの方法論を使用します

まず、CSSの方法は何ですか

第二に、一般的なCSSの方法論

1、OOCSS

（1）規則

（2）長所と短所

（3）実施例

2、および

（1）コンテンツ

（2）規則

（3）長所と短所

（4）実習

3、SMACSS

（1）規則

（2）実施例

4、アトミックCSS

（1）実施例

（2）長所と短所

（3）まとめ

第三に、要約

おすすめ