CSSの書き方を理解する

この記事では見ていくつもりです CSSの作成方法は何ですか, いくつかのよく知られた方法論、そしてそれらが私たちのCSSコードを最適化するのに私たちにとってどのように役立つことができるか。ボールを転がすための最も簡単な質問から始めましょう。方法論とは?

方法論は 方法のシステム. 私たちが望む結果を達成するために物事を行うという事前設定された方法で、体系的に何かをする単純な方法として方法を考えてください。.

より良い結果を得るために, 計画を立てることで方法を改善します, 順序を変更し、ステップを単純化する - うまくいくものは何でも もっと早く そしてもっと 効率的.

CSSメソドロジー

それではCSS方法論について話しましょう。 CSSを書く方法もあります。リセットCSSを最初に書くもの、レイアウトスタイルを最後に置くもの、要素のスタイルを設定するための2〜3クラスで始まるもの、またはCSSコードをすべて単一ファイル.

私たちの好ましい方法は、時間の経過とともに私たち自身で確立されているか、他の人によって影響されているか、あるいは私たちの職場で必要とされているか、または上記のすべてのためです。しかし時間が経つにつれて、CSSのベテランは定式化しました CSSを書くための方法論 それはもっと 柔軟、定義済み、再利用可能、わかりやすい そして 扱いやすい.

これらの定式化された方法論を見ていきます。

OOCSS（オブジェクト指向CSS）
BEM（ブロック、要素、修飾子）
ACSS（アトミックCSS）
SMACSS（CSS用のスケーラブルでモジュラーなアーキテクチャー）

注意以下の概念は、これらの方法論と同じ名前と概念を持つ可能性のあるフレームワーク、ライブラリ、またはツールと混同しないでください。この記事はCSSを書くための方法論についてだけです.

1. OOCSS

2008年にNicole Sullivanによって開発された、OOCSS（オブジェクト指向CSS）の重要な概念にはCSSが含まれます。物識別、構造スタイルと視覚スタイルの分離、およびロケーションベースのスタイルの回避.

OOCSSでは、Nicoleが私たちが提案している最初のステップは、 CSSでオブジェクトを識別する.

“基本的に、CSSの「オブジェクト」は繰り返しの視覚的パターンであり、HTML、CSS、そしておそらくJavaScriptの独立した断片に抽象化することができます。そのオブジェクトはサイト全体で再利用できます。 - Nicole Sullivan、Github（OOCSS）“

たとえば、このサイトからこの構造を取ります。これは繰り返しのビジュアルパターンで、独自の独立したHTMLやCSSを持っているものです。

ここには2種類のオブジェクトがあります。タイトルのより大きなプレビューです。 プレビュー後のプライマリ タイトルを付けたサイドバー プレビュー後二次.

必要がある 別々の構造と肌 （つまり、オブジェクトの外観を作成するスタイル） 2つのタイプのオブジェクトは構造が異なります。1つは似ているように見えても大きなボックスに入っています。左側にイメージ、右側にタイトルがあります。.

両方のオブジェクトの画像にクラスを付けましょう プレビュー後の画像 画像を左側に配置するコードを追加します。これにより、CSSのオブジェクト内のどこに画像を配置するかというコードを繰り返す必要がなくなります。他に似たものがあれば再利用 プレビュー後の画像 彼らのために.

皮の分離はまたのようなより簡単な様式のためにすることができる 国境や背景. 同じ青い枠線を持つオブジェクトが複数ある場合, 青い枠線用に別のクラスを作成する そしてそれをオブジェクトに追加すると 青い枠線をコーディングする必要がある回数を減らします CSSで.

ニコールはまた提案する ではない 場所に基づいてスタイルを追加する, たとえば、特定のdiv内のすべてのリンクを強調表示するのではなく、それらのリンクに 蛍光ペンクラス 適切なCSSスタイルで。このようにして、ページの他の部分でリンクを強調表示する必要があるときに、蛍光ペンクラスを再利用できます。.

OOCSSの長所：再利用可能な視覚的スタイリングコード、柔軟な場所コード、深いネストされたセレクタの削減.

短所 OOCSSの：かなりの量の繰り返しビジュアルパターンがなければ、構造体とビジュアルスタイルコードを分離することは不必要に思える.

2. BEM

2009年にYandexで開発者によって開発された、BEM（ブロック、要素、修飾子）のための重要な概念は、識別することを含みます ブロック, 素子＆ 修飾語 そしてそれに応じてそれらに名前を付ける.

A “ブロック” 本質的にはと同じです “物”（前の例から） “素子” ブロックの構成要素（上記の画像、タイトル、プレビューテキスト）を参照します。 プレビューポスト- オブジェクト）。 A “修飾語” ブロックや要素の状態が変化したときに使用できます。たとえば、アクティブクラスをメニュー項目に追加してそれを強調表示する場合、アクティブクラスが修飾子として機能します。.

コンポーネントを特定したら、それに応じて名前を付けます。例えば：

メニューブロックはクラスを持ちます メニュー
そのアイテムはクラスを持ちます メニュー項目 （ブロックと要素は二重下線で区切られます）
メニューの無効状態の修飾子はクラスを持つことができます menu_disabled （単一の下線で区切られた修飾子）
メニュー項目の無効状態の修飾子は menu__item_disabled.

修飾語句については、 key_value 命名フォーマット。例えば、時代遅れの記事にリンクしているメニュー項目を区別するために、それらにクラスを与えることができます。 menu__item_status_obsolete, 保留中の文書を指すメニュー項目のスタイルを設定する場合、クラス名は次のようになります。 menu__item_status_pending.

命名はあなたのために働くものに変更することができます。アイデアはできるようにすることです クラス名から識別、ブロック、要素および修飾子. BEMサイトにリストされている命名システムのいくつかをチェックしてください.

BEMのサイトにもリストがあります ブロック、要素、修飾子の分離をどのようにCSSファイルシステムに取り込むことができるか. ブロックのような “ボタン” そして “入力” それらのブロックに関連付けられているファイル（.css、.js）からなる独自のフォルダーを持つことができます。これにより、それらのブロックを他のプロジェクトにインポートするときの作業が簡単になります。.

BEMの長所：使いやすいクラス名とディープCSSセレクターの削減.

BEMの短所：名前を見栄え良くするために、BEMでは要素から要素へのブロックを浅くすることをお勧めします.

ACSS

最初の終わり近くにどこかで、Yahooによって有名にされた 21の十年^セント世紀の間、ACSSの重要な概念は、最も原子レベルのスタイルのためのクラス、すなわちプロパティと値のペアを作成し、必要に応じてそれらをHTMLで使用することから成り立っています。.

ACSS（Atomic CSS）が最初に開発された時期を判断するのは困難です。というのは、この概念がしばらくの間使用されてきたからです。開発者は次のようなクラスを使用しています。 .clearfix overflow：hidden 長い間。 ACSSのアイデアは ほとんどすべての再利用可能なコンテンツに関連しないプロパティ値ペアのためのクラスを持っています 私たちのサイトで必要になるでしょう、そして必要に応じてそれらのクラスをHTML要素に追加するために.

以下はACSSに基づくクラスの例とそれらがHTMLでどのように使われているかです。.

 .mr-8 margin-right：8px; .fl-r float：right;

ご覧のとおり、このメソッドを使用するとクラス数が多くなり、HTMLはこれらすべてのクラスによって混雑します。この方法は100％有効ではありませんが、必要に応じて使用することができます。 Yahooは結局これを使っている.

ACSSの長所：HTMLを離れることなくHTMLをスタイリングする.

ACSSの短所：あまりにもきちんとしていないので、あなたはそれを嫌うかもしれません.

4. SMACSS

2011年にJonathan Snookによって開発されましたSMACSS（CSSのためのスケーラブルでモジュラーアーキテクチャ）はスタイルルールの5つの異なるタイプを識別することによって働きます。これらに基づいてクラス名とファイリングシステムが作成されます。.

“SMACSSは、設計プロセスを検証する方法であり、それらの厳格なフレームワークを柔軟な思考プロセスに合わせる方法です。 - ジョナサンスヌーク”

SMACSSは5種類のスタイルルールを特定します。 ベース、レイアウト、モジュール、状態, そして テーマ.

基本スタイルは、次のような基本的なHTMLタグを対象としたデフォルトスタイルです。
, .
レイアウトスタイルは、ヘッダー、フッター、サイドメニューが表示される場所をコーディングするなど、ページのレイアウトを定義するために使用されるスタイルです。.
モジュールスタイルは、ギャラリーやスライドショーのようなモジュールに固有のものです.
状態スタイルは、非表示または無効などの変更可能な状態を持つ要素を強調表示するためのものです。.
テーマはページの視覚的なスキームを変更するために使用されます.

さまざまなスタイル規則は、クラス名の接頭辞を使用して識別できます。たとえば、l-header（レイアウト用）またはt-header（テーマ用）です。これらの異なる種類のルールを別々のファイルやフォルダに配置して整理することもできます。.

SMACSSの長所：より整理されたコード.

SMACSSの短所：なし私は考えることができる.

あなたがSMACSSについて読むことができる無料のオンライン本があります、またはあなたはそれをもっと研究するためにその電子ブック版を買うことができます.

結論

上記のCSS方法論はあなたにシステムを与えるでしょう CSSコードを管理し最適化する. ニーズに合わせて、OOCSS-SMACSS、OOCSS-BEM、BEM-SAMCSSのように組み合わせることができます。.

次のようなCSS方法論を実行するための自動化システムが必要な場合は、フレームワークとライブラリもあります。

OOCSSフレームワーク
BEMツール
有機CSSフレームワーク（原子概念に従う）.