CSS設計（１）

HTML/CSS

1. CSS（Cascading Style Sheets）とは

.selector { property: value } とか書くやつですね。

Cascadeは「連なった滝」という意味です。

簡単に言うと、先に宣言されたものが後から宣言されたものによって上書きされる、と言う感じです。ちなみに、詳細度が高いほどルールが優先されて適用され、詳細度が変わらないときは後に宣言されたルールが適用されます。

2. 詳細度序列（高い順）

（１）!important（切り札的存在）

  • 極力使わない様にする

（２）インラインスタイル（HTMLに直書きするやつ）

  • HTMLの特性上あまりいい手段ではない

（３）IDセレクタ（IDは各1回しか使えない）

  • #main { color: red; } とか

（４）クラスセレクタ（何回でも使える）

  • .title { color: blue; } とか

（５）要素セレクタ（その要素に効くやつ）

  • h1 { font-size: 20px; } とか

（６）ユニバーサルセレクタ（全要素に効くやつ）

  • * { margin: 0; } とか 

3. CSS設計

CSSは後先考えなくても書けてしまうので比較的扱いやすいですが、「グローバルスコープ」なので、あらぬところに影響が及ぶ可能性があります。

また、後先を考えないと、ある程度の規模の開発においてはCSSが破綻する可能性があります。

 

f:id:sufurin:20180415232727p:plain

そのため、保守・拡張・再利用などを考慮したCSSを書くことが求められます。

今回はCSS設計の基本である、OOCSSについて紹介します。 

4. OOCSS（Object Oriented CSS）

オブジェクト指向の概念を取り入れたCSS設計手法です。

主に2つの原則があります。

（１）Separate structure and skin（構造と見た目の分離）

（２）Separate container and content（コンテナーとコンテンツの分離）

これらを一つずつ見ていきましょう

 

4.1　Separate structure and skin（構造と見た目の分離）

・・・構造のCSSと見た目のCSSは分離させようとする考え方です。

例を紹介していきます。

<div class="button">Good!!</div> 
.button{
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 2px solid #00f;
    border-radius: 10px;
    background-color: #acf;
    text-align: center; 
}

f:id:sufurin:20180415220737p:plain

 

とまあ、ありがちなボタンですが、せっかくなので色違いで3つ作ってみましょう。

<div class="button-good">Good!!</div> 
<div class="button-normal">Normal!!</div> 
<div class="button-bad">Bad!!</div> 
.button-good{
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 2px solid #00f;
    border-radius: 10px;
    background-color: #acf;
    text-align: center;
} 

.button-normal{
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 2px solid #0f0;
    border-radius: 10px;
    background-color: #afc;
    text-align: center; 
}
 
.button-bad{ 
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 2px solid #f00;
    border-radius: 10px;
    background-color: #fca;
    text-align: center; 
}

f:id:sufurin:20180415220737p:plain

f:id:sufurin:20180415221226p:plain

f:id:sufurin:20180415221236p:plain

 

うーCSS長いですね…ほぼコピペしてるし……

というわけで、構造のCSSと見た目のCSSを分離させましょう。 

<div class="button button-good">Good!!</div> 
<div class="button button-normal">Normal!!</div> 
<div class="button button-bad">Bad!!</div> 
.button{
     width: 100px;
     height: 30px;
     line-height: 30px;
     border-radius: 10px;
     text-align: center; 
} 

.button-good{ 
     border: 2px solid #00f;
     background-color: #acf; 
} 

.button-normal{
     border: 2px solid #0f0;
     background-color: #afc; 
} 

.button-bad{ 
     border: 2px solid #f00;
     background-color: #fca; 
}

f:id:sufurin:20180415220737p:plain

f:id:sufurin:20180415221226p:plain

f:id:sufurin:20180415221236p:plain

 

構造のCSS（structure）と、見た目のCSS（skin） を分離しました。こうすることで、CSSの行数がいい感じに削減できました。

なお、保守面でもメリットがあります。例えば、ボタンの中の文字の大きさを大きくしたいとします。分離したCSSを用いれば……

<div class="button button-good">Good!!</div> 
<div class="button button-normal">Normal!!</div> 
<div class="button button-bad">Bad!!</div> 
.button{
     width: 100px;
     height: 30px;
     line-height: 30px;
     border-radius: 10px;
     text-align: center;
     font-size: 30px; 
} 

.button-good{ 
     border: 2px solid #00f;
     background-color: #acf; 
} 

.button-normal{
     border: 2px solid #0f0;
     background-color: #afc; 
} 

.button-bad{ 
     border: 2px solid #f00;
     background-color: #fca; 
}

f:id:sufurin:20180415222320p:plain

f:id:sufurin:20180415222329p:plain

f:id:sufurin:20180415222339p:plain

 

CSSを1行追加するだけでできましたね！

分離していなければ3行追加する必要があります。つまり、2行分の楽ができました。（2行だけ、と思うかもしれませんが、これが10行20行とかになってくると分離の重要性が分かるかと思います。）

 

4.2　Separate container and content（コンテナーとコンテンツの分離）

・・・HTML（の要素）に依存したCSSは書かない、という考え方です。

例を紹介していきます。

<h2 class="title">私のブログ</h2>  
h2.title{
     width: 300px;
     padding: 10px;
     border: 2px solid #03f;
     border-radius: 10px;
     font-size: 50px;
     color: #03f;
     text-align: center; 
}

f:id:sufurin:20180415223219p:plain

 

まあ、ありがちなブログタイトルですね。（デザインに関しては置いておきましょう。）

CSS1行目、"h2.title"は、すべての class="title" である<h2>要素に対しCSSを指定する、という意味です。<h2>要素のclass="title"の場所、と言う感じでHTML（の要素）に依存しています。

さて、タイトル？？ え、<h1>要素じゃね？？ ということになったため、HTMLを修正してみます。

<h1 class="title">私のブログ</h1>  
h2.title{
     width: 300px;
     padding: 10px;
     border: 2px solid #03f;
     border-radius: 10px;
     font-size: 50px;
     color: #03f;
     text-align: center; 
}

f:id:sufurin:20180415225855p:plain

 

当然といえば当然ですがスタイルが適用されません。なので、CSSも修正します。

<h1 class="title">私のブログ</h1>  
h1.title{
     width: 300px;
     padding: 10px;
     border: 2px solid #03f;
     border-radius: 10px;
     font-size: 50px;
     color: #03f;
     text-align: center; 
}

f:id:sufurin:20180415223219p:plain

 

つまり、HTML（の要素）に依存したCSSを書くと、HTMLを変えたときにCSSも変えなくてはならない、というなんとも面倒な感じになってしまうのです。

というわけで、初めから次のようなCSSを書いておくべきです。

<h2 class="title">私のブログ</h2>  
.title{
     width: 300px;
     padding: 10px;
     border: 2px solid #03f;
     border-radius: 10px;
     font-size: 50px;
     color: #03f;
     text-align: center; 
}

f:id:sufurin:20180415223219p:plain

 

こうしておけば、HTMLを<h1>要素に変えたとしてもスタイルは適用されることになります。

 

4.3　結局OOCSSとは？

（１）Separate structure and skin（構造と見た目の分離）

  • 構造のCSSと見た目のCSSは分離
  • CSSの行数がいい感じに削減され、CSSの追加も楽というメリット

（２）Separate container and content（コンテナーとコンテンツの分離）

  • HTML（の要素）に依存したCSSは書かない
  • HTMLを変えたとしてもCSSは変えなくてよいというメリット

 

OOCSSは元Yahoo!のデベロッパーが考案した手法で、複数のクラスを組み合わせる「マルチクラス」CSSです。

Twitter等でもこの手法が使われており、そんなわけで、 Twitter社が開発したCSSフレームワーク「Bootstrap」もこの手法を見ることができます。 

5.　OOCSSを参考にした独自ルール

というわけで、ここまでを踏まえ、OOCSSを参考に簡単な独自ルールを考えてみました。

 

（１）構造のCSSと見た目のCSSを分離させる。

（２）CSSのスタイルは極力要素名をつけない。

（３）再利用を意識したCSSを書くようにする。

　　　とかですかね・・・

 

  

次回はBEM（MindBEMding）の紹介をしていきます。たぶん。