自分の書いたCSSと戦うためのまとめ（OOCSS)

なんでCSSすぐ死んでしまうん from Hayato Mizuno

www.slideshare.net
あわわ・・・確かに・・・何ですぐ死んでしまうん・・・

今自分が半年くらい前に書いたCSS（死にそう）と格闘しているんだけど、どういう方針で直すのか、
そもそもどういう方針で書いていくのが正しいのかわからなくなったので調べてみた。

現状分析

現状のCSS・・・

bootstrapの上に重ねがけしている（bootstrapの指定方法にぶつける書き方が多い）

その一方で独自クラスみたいなものが存在する（ルール特になし、辛い）

入れ子のクラスが存在する

　こういうの、入れ子と言っていいのかわかないけどこういうの

.class1 .class2 {
 color:red;
}

限定的なクラスが多くて使いまわせない

その上クラス名から内容を推察しづらい

どうしたいか

使いまわせるようにしたい

クラスの重ね順だけ意識すればいいようにしたい（優先度が異なる書き方をできるだけしない）

内容が推察できるクラス名に統一したい

恥ずかしいけど逆に言うと何も考えずにとにかく動け！でCSSを書いていました。
一番苦しんでるのは結局それを直す自分なのでここで綺麗にしておきたい！

まず使っているBootstrapはどんな設計なのか？

Bootstrap は OOCSS という設計に基いているらしい。
getbootstrap.com

OOCSSとは

app.codegrid.net
とてもわかりやすいです、ありがとうございます。
引用しつつ要点だけまとめると・・

要点

・OOCSSとは、Object Oriented CSSの略。（「Object Oriented」は、「オブジェクト指向」）
・Nicole Sullivanという人が提唱。
・一つ一つのパーツをCSSオブジェクトと呼ぶ。（オブジェクトはレゴのパーツようなもの）
・CSSオブジェクトを組み合わせてページを作成する。
・構造とスキンを分離する

CSSオブジェクト

以下は自分が理解するための具体的な例
（といいつつ上記サイトの写経改変です。）
こういうサイトを作る。
f:id:flypia:20170220002527j:plain
青文字のような構成にするとき各h2のcssを考えると

#main h2 {
  ・・・
}
#main .contact .header h2 {
 ・・・
}
#sidebar h2 {
 ・・・
}

この書き方めっちゃしてるんですけどOOCSS的にはダメなのです。
記事で既に書かれているところと重複するけれど、なぜダメなのかというと
・文脈に合わせて書いているので、文脈自体が変化した場合ccsが死ぬ
・文脈がわかっていないとなんのこっちゃ
・#mainの中に別のスタイルを当てたいh2が出現した場合、cssを上書きすることになる（無駄）
・上書きできないこともある（詳細度の問題）
こういう書き方を選択する場合って、#mainの中に同じスタイルを当てたいh2が複数ある場合が多いと思う。上の問題を解消しようとすると結局コピペが多くなってまた無駄ということなんですよね。。

レゴのように考える

じゃあどうするかという問題ですが、Nicole Sullivanは「Webページを、レゴの集まりで考えよ」と言います。
ページを構成するパーツを、レゴのパーツのように分け、それをページにどんどん積んでいくと考えなさい。Webページは、レゴの集まりなのです。そして、ひとつひとつのパーツは、そのパーツで完結するようにCSSを書きなさい。そうすれば、さきほど例に挙げたような破綻は起こりません、とOOCSSは言うのです。
知っておきたいHTMLテンプレート設計法 - OOCSSの基本 | CodeGrid

レゴやったことない！！
f:id:flypia:20170220010744j:plain
一つ一つのパーツに対して命名するらしい。
このパーツを組み合わせてページを作る。
のは、わかるんだけど、パーツの切り分けが正直一番悩むところなんだよなと思うんです。
パーツについてはデザインありきなのかなとも思うので、そういう意味だとデザイナーさんと話してみてもいいのかもしれない。

ストラクチャ（構造）とスキン

構造とスキンを分離する、ということ。
ここからいつも拝見してるTAMさんのブログを参照します。
www.tam-tam.co.jp
理解のため写経改変。
【陥りやすい問題】
・インラインのようなcss

.mr-10 {
  margin-right:10;
}

これは見たことある。別のやつ作る時に外部の方にお願いした時についてきたのがこれだった。10px単位とかでクラス化してあった。（初めて人が作ったCSSを見たのも思えばそれだった）それを改変したんだけど全然使いませんでした。
・セマンティックな例
セマンティック
セマンティックWebとは｜Semantic Web − 意味 / 定義： IT用語辞典

.subTtl01  {
 width: 100px;
 margin: 0 auto;
 padding: 5px;
 font-size: 14px;
 color: #cc0000; 
}

.subTtl02 {
 width: 100px;
 margin: 0 auto;
 padding: 5px;
 font-size: 14px;
 color: #ffffff; 
}

どっちかというとこういう感じのcssを書いてきた気がします。
では子孫セレクタを使わずに「構造とスキン」を分離する書き方をするとこいつはどうなるのか？

.ttlArea  {
 width: 100px;
 margin: 0 auto;
 padding: 5px;
}

.txt14 {
 font-size: 14px;
}

.subTtl01  {
 color: #cc0000; 
}

.subTtl02  {
 color: #ffffff; 
}

これなら色違いとかのタイトルが増えてもうまくいきそう。
bootstrapの.btnとかまさにそういう感じですね。

思ったより長くなったので続きはまた今度

空飛ぶピアニスト

備忘録