Html5勉強会スライド

HTML5勉強会名古屋 #03
13年4月20日土曜日

自己紹介
加藤悠
twitter @katsew
facebook ykatsew
株式会社ddid
インフォメーションアーキテクト
やぁ(́・ω・｀)

今日のおはなし
CSSの設計について

CSS書くのは簡単
とりあえず書く…でも……あっ……
わりと

すぐ壊れる…

みんなが不幸になる前に…

ちゃんと設計する!

意識すべき3つのポイント
CSSを書く前に

カテゴリ化

名付け
ジロウゴロウロクロウ

詳細度

Base
Layout

Base
Layout
Module

Base
Layout
Module
State

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
abbr[title] {
    border-bottom: 1px dotted;
}
svg:not(:root) {
    overflow: hidden;
}
Base - デフォルトのスタイル
normalize.css
http://necolas.github.io/normalize.css/
基本はタグセレクタ。必要な場合に属性セレクタや擬似クラスセレクタを利用する。

#header, #article, #footer {
    width: 960px;
    margin: 1em 0;
}
#sidebar {
    margin: 10px;
}
.l-switched #sidebar{
float: left;
}
.l-switched #article{
float: right;
}
Layout - 大枠部分のスタイル
ページをセクションに分けるためのスタイルをあてる。
<div class=”container l-switched”>
<article id=”article”>
<h2>
<span>...</span>
</h2>
</article>
<aside id=”sidebar”>
<figure>
<img alt=”banner” src=”...”>
<figcaption>...</figcaption>
</figure>
</aside>
</div>

.module h2 {
margin: 10px 0 0 0;
}
.module li{
display: inline-block;
/* IE7 hack */
*display: inline;
*zoom: 1;
}
Module - パーツ別に分けるスタイル
使い回しできるように、クラスを主に使ってパーツ別に分けるためのスタイル
<div class=”module”>
<h2>...</h2>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

.is-hidden {
visibility: hidden!important;
}
.is-active{
background: gray;
border-bottom: 1px solid gray;
}
State - 状態を表すスタイル
要素の状態( active, hidden ...etc. )を表すためのスタイル
<ul class=”nav”>
<li>...</li>
<li class=”is-active”>
...
</li>
<li>...</li>
</ul>

名付け

• レイアウト変更するclassにはlayout-などの接頭辞をつける
(ex. [ layout-ﬁxed ], [ layout-inline ]など
• 状態をもつclassにはis-などの接頭辞をつける
(ex. [ is-active ], [ is-hidden ]など
• モジュール名はmodule-をつける必要ない(ほとんどがモジュ
ールになるから)
• サブクラス化する必要がある物は-(ハイフン)つなぎで名づけ
(ex. [ .example ]のサブクラスには[ .example-ﬁxed ]とする

• なるべくclass単体でつかう( .heading, .leadText )
• 要素とclass, idを一緒に使わない( div#header）
• 子孫セレクタをなるべく使わない(代わりに子セレクタを…)

.module li{ ... }

グレネード型

.module h2 {
margin: 10px 0 0 0;
}
.module li {
/* IE7 hack */
*display: inline;
*zoom: 1;
}
<h2>...</h2>
<ul>
<li>...</li>
<li>...</li>
<li>
<ul>
<li>...</li>
<li>...</li>
<ul>
</li>
</ul>
</div>

.module h2 {
margin: 10px 0 0 0;
}
.module li{
/* IE7 hack */
*display: inline;
*zoom: 1;
}
<h2>...</h2>
<ul>
<li>...</li>
<li>...</li>
<li>
<ul>
<li>...</li>
<li>...</li>
<ul>
</li>
</ul>
</div>
適応されちゃう!

スナイパー型

.module > li{ ... }
スナイパースタイル

.module > li{ ... }
スナイパースタイル
ネストは浅く！

事例紹介
http://jonathanpath.com/sass+smacss/

「分ける」ことは「わかる」こと。

ありがとうございました。

参考・素材
OOCSS
http://oocss.org/
SMACSS
http://smacss.com/
SASS-SMACSS
http://jonathanpath.com/sass+smacss/
foter
http://foter.com/
normalize.css
http://necolas.github.io/normalize.css/
BEM Methodology
http://bem.info/method/deﬁnitions/
mustache - Logic-less template
http://mustache.github.io/#demo

Html5勉強会スライド

More Related Content

Similar to Html5勉強会スライド

Html5勉強会スライド