そもそも、CSS設計思想とはなんぞ？
CSS設計思想って？
CSSの設計手法とは、CSSのコードの管理方法のことで、様々な手法があります。
そして、思想とはその手法がどのような意図で作られているのか、その考えかたです。
それは会社やチームによって、違っており、作成するアプリやプロジェクト、メンバーによってさまざまです。
CSSって、結構自由が高いため、修正の種類が多く、何が効率的なのか悩んだり、もう少しうまくルールを設けてほしいとかありますよね。
それを解決してくれるのがCSS設計手法なんです。
＜まとめ＞
・メンテナンスがしやすくなる
・整理されたコードを掛ける
・可読性があがるため複数人でやる安い
主要なCSS設計手法（思想）
・OOCSS
・BEM
・SMACSS
・FLOCSS
OOCSS
明確にルールを決めて、CSSコードを作成するCSS設計。
twitterやGitHubなどで採用されており、Bootstrapがこの思想を元に設計されているらしい。
<ルール>
１．構造と見た目を分離させて考える
２．コンテナとコンポーネントを分離させて考える
１.構造と見た目を分離させてみる
構造（レイアウト）とは。width, height, border, padding, margin等形作るモノ。
見た目（スキン）color, border-color , background-color等見た目のスタイルを装飾するものです。
構造と見た目を分離する事で、同じ形だけど違う色のボタンなど再利用しやすくなる。
2.コンテナとコンポーネント（コンテンツ）を分離させる
コンテナとコンテンツとは箱と中身です。
コンテナにはコンテナのCSSを、コンテンツにはコンテンツのCSSを別々に定義する。
これにより、HTMLの構造に依存せず、構造に変化があってもCSSの修正が不要。一度使用したコンポーネントを別の箇所で使用したときにスタイルが変わらないようにすることができる。
(コード例）１.構造と見た目を分した場合。
[HTML]
<div class="label back-yellow">
YELLOW
</div>
<div class="label back-pink">
PINK
</div>
<div class="label back-skyblue">
SKYBLUE
</div>
[CSS]
.label {
display: inline-block;
padding: 5px 20px;
}
.back-yellow {
background-color: yellow;
}
.back-pink {
background-color: pink;
}
.back-skyblue {
background-color: skyblue;
}
「構造」：.label
「見た目」:.back-yellow, .back-pink等
(コード例）2.コンテナとコンテンツを分離する場合。
<div class="sample test1">
サンプル
<div/>
<div class="sample">
<div class="test1">
【子要素】サンプル
</div>
</div>
<div class="sample test2">
【OOCSS】サンプル
<div/>
[CSS]
.sample {
color: red;
}
.sample .test1 {
font-size: 2rem;
font-weight: 700;
}
.test2 {
font-size: 2rem;
font-weight: 700;
}
BEM
Block Element Modifierの頭文字を取った設計思想で、独特な命名規則。
シンプルさに欠けて、見た目は複雑ですが、1つのクラス名でその要素でわかる。
- 要素を３つに分ける
・Block 大枠、塊
・Element Blockの中の要素
・Modifier Modifier（修飾の内容
３つに分ける
- 命名の仕方
class名では以上の３つの要素を次のように命名する
class="block__element–-modifier"
（例）
<h1>BEM(Block__Element--Modifier)</h1>
<div class="test">
<button class="test__button">テスト</button>
<button class="test__button_red"テスト赤色</button>
<button class="test__button">テスト</button>
</div>
mainの大枠（Block)の中に要素、borderedの要素(Element)がwideに修飾(modifier)だと・・・
<div class="main">
<div class="main__panel--bordered--wide">
以上の命名規則のルールは、以下のURLをご参考に！
SMACSS
「Scalable and Modular Architecture for CSS」の頭文字を取った言葉。
OOCSSのマルチクラスの長所とBEMのクラス名ごとの性質のわかりやすさを複合したもの。
クラスごとに1つの性質しか持たないので、クラスの役割がわかりやすい。
要素を５つに分ける
.Base
.Layout
.Module
.State
.Theme
Base（ベース）
スタイルを指定するものを指す
(例）
body, a , input
Layout(レイアウト）
ページを構成する大枠のものを定義。
(例）
ヘッダー、フッター、サイドバー
Module(モジュール）
ページを構成する再利用可能パーツごとのスタイルを指定。
接頭辞はつけない。
State（ステート）
javascript で状態によって見た目が変化する場合のスタイルを指定。
接頭辞：.is-error .is-active など
Theme(テーマ）
レイアウトやモジュールの全体で統一されるべきスタイルのことをテーマと呼ぶ。
接頭辞：.thema-
（例）
<h1>SMACSS(Scalable and Modular Architecture for CSS)</h1>
<div class="l-container">
<ul class="menu">
<li class="menu-item is-large">link</li>
<li class="menu-item is-active">active</li>
</ul>
</div>
SMACSSの詳しい例を見たい方は以下のサイトを参考に！
FLOCSS
（公式サイト：https://github.com/hiloki/flocss）
CSSをFoundation、Layout、Objectの3つの階層に分類して、Objectについてはさらに3つの階層に分けて、わかりやすくかつ整備性の高いコードを書くことできます。
＜FLOCSSの構造規則＞
役割毎にファイルを制作すると・・・
scss
├──style.scss
├── foundation
│ ├── _base.scss
│ ├── _system.scss
│ └── _reset.scss
├── layout
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ └── _sidebar.scss
└── object
├── component
│ ├── _button.scss
│ ├── _grid.scss
│ ├── _media.scss
│ └── _title.scss
├── project
│ ├── _articles.scss
│ ├── _contact.scss
│ ├── _comments.scss
│ ├── _gallery.scss
│ ├── _gnavi.scss
│ ├── _hamburger.scss
│ ├── _profile.scss
│ └── _section.scss
└── utility
├── _align.scss
├── _clearfix.scss
├── _margin.scss
└── _typography.scss
＜各層の仕組み・役割＞
・Foundation
サイト全体の背景やフォントなどのデフォルトのスタイルを管理。
・Layout
ヘッダーやフッター、レイアウト、ナビゲーションバー等、各ページで共通するコンテナを管理。
箱を用意するイメージ
中身のデザインはProject で定義
・Object
全体を通して再利用可能なモジュールを管理。
さらに、3つに
┗Component（接頭辞-c)
最も小さなモジュール
┗Project（接頭辞-p）
いくつかのComponentと、他の要素によって構成され鵜大きな単位のプロジェクト等を管理。
Componentのプロジェクトのかたまり、
┗Utility
余白や非表示の設定など、ComponentとProjectのモディファイア（パターン）で解決することができないスタイル、また、調整のための便利クラスなどを管理。
FLOCSSはめちゃめちゃ運用が楽になりそうですね！！
今回は、４つの手法をご紹介いたしました。
今度また、各手法を詳しく記事にしたいと思います！
ご愛読ありがとうございました。
何か気づきや質問があれば、コメントお願いします。
新しい情報を取得するたび、更新していきます。
良ければ、LGTM、ストックよろしくお願いいたします！