第10回勉強会 CSS設計について

第10回勉強会
CSS設計について
Muraki Takuma

本資料について
CSS設計についてまとめた資料です。
本資料の構成は以下の通りです。
- はじめに
- CSS設計準備
・ブラウザに対する理解
・ normalize.css / reset CSS
・新しいリセット用CSSのご紹介
- 私的CSS設計におけるベストプラクティス
- コンパイル言語について

はじめに
CSS（設計）について

はじめに
CSS（設計）について
↓
非常に難しい
奥が深い
壊れやすい
答えが無い
単純⇔管理しにくい

はじめに
壊れないCSSを書くというのは不可能

はじめに
壊れないCSSを書くというのは不可能
↓
“壊れない完璧な設計を求めるのではな
く、壊れたときに勇気を持って修復で
きる設計を” — 斉藤祐也

はじめに
少しでもメンテナンス性の高い
CSS設計を目指していきましょう。

CSS設計準備
・ディレクトリ構成
・リセット
・モジュール（再利用）
・ユニークパーツ

CSS設計準備
ブラウザに対する理解

CSS設計準備
各ブラウザが持つデフォルトスタイルシート
ブラウザには、デフォルトスタイルシートというのがあり、
ブラウザによってあらかじめスタイルシートが定義されてい
ます。

CSS設計準備
Webサイトを制作する上で、このデフォルトスタイルシー
トが障害になることがあります。

CSS設計準備
normalize.css / reset CSS
デフォルトスタイルシートをリセット
どのブラウザでも同様の見え方になるように、
ブラウザが持つデフォルトスタイルシートをリセットさせる
方法
※ あくまで一つの方法であり、必ずやらないといけないも
のではありません。

CSS設計準備
normalize.css（ニコラス・ギャラガー氏 @necolas ）
・ブラウザのスタイルを消去するよりむしろ有用なデフォルトのスタイルを保存します。
・あらゆるHTMLエレメントのスタイルを正常化(Normalize)します。
・バグとブラウザごとの一貫性のなさを修正します。
・巧妙な改良でユーザビリティを改善します。
・コード内のコメントと詳細なドキュメントで詳しく解説がついています。
参考
http://coliss.com/articles/build-websites/operation/css/about-normalize-css.html

CSS設計準備
normalize.css

CSS設計準備
reset CSS
・ブラウザのスタイルをすべてフラットな状態にします。
※ reset.cssというライブラリーは存在しません。
代表的なreset CSS
・ Eric Meyer's Reset CSS
・ HTML5 Doctor Reset Stylesheet
・ Universal Selector Reset
・ Yahoo YUI3 Reset CSS etc..

CSS設計準備
reset CSS (Yahoo! (YUI 3) Reset CSSの場合)

CSS設計準備
それぞれメリットやデメリットがあるので、
必要に応じて設計しやすいものを利用すると良いかと思います。
私はnormalize.cssを使いつつ必要に応じてresetさせていく派です。
▼参考
HTML初心者が知っておくべきリセットCSS と3つのポイント
http://blog.3streamer.net/html-css-beginner/reset-css-1/
デフォルトスタイルシートから考える、リセットCSSの留意点
http://kojika17.com/2012/09/reset-css-from-default-style-sheet.html
リセットCSSとノーマライズCSSについて
http://rakuten-tips.com/htmlcss/normarilzecss/#

CSS設計準備
新しいリセット用CSSのご紹介
sanitize.css
sanitize.cssはHTMLのあらゆる要素を各ブラウザでの差異をなくし、整合性をもたせてレンダリ
ングさせるスタイルシートで、ライセンスはCC 0で利用できます。
有用なデフォルトはそのまま
多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。
スタイルの正常化
さまざまな種類のエレメントのスタイルを正常化します。
バグの修正
ブラウザごとの異なるスタイルやバグを修正します。
ユーザビリティの改善
ほんのわずかな改良でユーザビリティを改善します。
最近の実装スタイルへの対応
ボックスモデルやborder-widthなど、最近の実装方法にあったスタイルに直します。

CSS設計準備
sanitize.css

CSS設計準備
sanitize.css
対応ブラウザ
・Chrome 39-40+
・Firefox 34-35+
・Safari 7-8+
・Internet Explorer 10-11+
・iOS 7-8+
・Android 4.3-4.4+
・Windows Phone 8.1+
参考
reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最
近の実装スタイルを考慮したスタイルシート -sanitize.css
http://coliss.com/articles/build-websites/operation/css/about-sanitize-css.html

私的CSS設計におけるベストプラクティス
予備知識
CSS優先順位
Id > class > 要素 > *
とりあえず11個用意しました。
CSSプロセッサを使用するとまた違う素敵なアプローチができますが、
使ってない想定です。

1. idやclass名は簡潔でわかりやすい名前を
つけ、第3者が見たときにわかりやすいもの
をつける。
良い例悪い例

2. すべてのインデントは統一する。
（半角2つ、タブ、インデント無しなど）
良い例悪い例

3. 省略できるものは省略し、CSSの高速化を
はかる。
良い例悪い例

4. 要素に対するスタイルを固定させない。
※ 汎用性がなくなります。
良い例悪い例

5. 場合によっては複数のclassを利用し、無
駄な記述を減らす。
良い例悪い例

6. ネストし過ぎない、また要素までの距離が
定まっていれば、要素を飛ばして指定する。
※ ul li a と指定するより ul aと指定したほうが処理が早くなります。
良い例悪い例

7. マジックナンバーを控える。
※ 13pxはどこから来たのか把握するのに時間がかかる。
良い例悪い例

8. コメントルールを設ける。
良い例悪い例

9.カラーコード/小数点前の0 ⇒ 省略する
スタイルの終わりの；⇒ 省略しない
※ カラーコードは省略できるものに限る
良い例悪い例

10. !importantを基本的に使用しない。
※ 使わないといけない場合は設計を疑って、それでもダメなら使用。
良い例悪い例

11. @importを使用しない。
※ すべて一つで管理するのが理想ですが、分ける場合はhtml側から読み込ませる。
良い例（理想は1つ）悪い例

まだまだ、テクニックや考え方などは色々あります
が今回はここまでにします。
常に「（自分を含む）第三者が見る」という意識で
CSS設計をするとよいかもしれません。

コンパイル言語について
制作現場では、Sass、LessなどのCSSメタ言語（CSSプリ
プロセッサ）を使用してのCSS設計が主流になっておりま
すが
まずはしっかりとCSSの書き方や特質を理解するように努
めましょう。
ある程度理解が深まってきたところで、導入を検討してみ
ましょう（需要があれば、こちらの勉強会も開きます！）

ご清聴ありがとうございました。
ご意見/ご質問承ります。
http://wines.github.io/
（イラスト：爆裂!イラッとギャグスタンプ）

第10回勉強会 CSS設計について

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (11)

Similar a 第10回勉強会 CSS設計について

Similar a 第10回勉強会 CSS設計について (20)

第10回勉強会 CSS設計について