Mais conteúdo relacionado
Semelhante a 今必要なCSSアーキテクチャ (20)
今必要なCSSアーキテクチャ
- 12. なぜ今CSSアーキテクチャなのか
3. スタイル定義の表現が自由すぎる
1. 用途不明のスタイル定義がある
2. セレクタがえらく長い
4. スタイルの優先度の決定方法
1. セレクタの優先度を上げる
1. 詳細にする→HTMLの構造への依存度UP!
2. 最後の切り札『!important』
.blue
{
color:
blue;
}
.main,
.menu
ul
li,
.comments,
.infos,
.sidebar
.component
.?tle
{
…
}
12
どこにも使ってないもの
が混ざっていたり…。
※CSSの優先度について↓
!important だらけの CSS に
お別れを | WWW WATCH
- 17. 17
“Components are like legos”
Object Oriented CSS
http://www.slideshare.net/stubbornella/object-oriented-css
photo:
h(p://www.flickr.com/photos/48763139@N00/2432400623
- 18. OOCSSの2つの原則
1. Separate Structure and Skin
(構造と見た目の分離)
コンポーネントに対するスタイルの種類ごとに、別々の
セレクタにスタイルを定義する
1. レイアウトを定義するスタイル
1. ポジション、サイズ等
2. 見た目を定義するスタイル
1. ボーダーやフォントカラー等
1. バリエーションが増えやすい
18
- 19. OOCSSの2つの原則:具体例1
19
.widget-‐basic
{
width:
15em;
height:
15em;
background-‐color:
white;
color:
black;
}
.widget-‐primary
{
width:
15em;
height:
15em;
background-‐color:
blue;
color:
white;
}
CSS
.widget
{
width:
15em;
height:
15em;
}
.basic
{
background-‐color:
white;
color:
black;
}
.primary
{
background-‐color:
blue;
color:
white;
}
CSS
<div
class=“widget-‐basic”></div>
<div
class=“widget-‐primary”></div>
HTML
<div
class=“widget
basic”></div>
<div
class=“widget
primary”></div>
HTML
レイアウト
見た目
パターンが増えたら…?
- 21. OOCSSの2つの原則:具体例2
21
.menu
{
(共通スタイル)
}
.sub-‐menu
{
(拡張スタイル)
}
CSS
.main
ul,
.sub
ul
{
(共通スタイル)
}
.sub
ul
{
(拡張スタイル)
}
CSS
<div
class=“main”>
<ul>...</ul>
</div>
<div
class=“sub”>
<ul>...</ul>
</div>
HTML
<div
class=“main”>
<ul
class=“menu”>...</ul>
</div>
<div
class=“sub”>
<ul
class=“menu
sub-‐menu”>
...
</ul>
</div>
HTML
適用したい要素が
増えたら…?
マルチクラスパターン
- 27. 1. ベース
• その名の通り、ベースとなるスタイルを定義
• 基本的に要素セレクタを用い、クラスやIDセ
レクタは使わない
• ブラウザのデフォルトスタイルをクリアするリ
セットCSSはここで定義する
27
html,
body
{
margin:
0;
padding:
0;
}
a:hover
{
color:
#039;
}
- 32. 3. モジュールカテゴリのプラクティス
• 要素セレクタを避ける
32
/*
フォルダーモジュール
*/
.fld
li
{
padding-‐le_:
20px;
background:
url(folder.png);
}
CSS
<div
class=“fld”>
<ul>
<li>Aフォルダ</li>
<li>bbb.txt</li>
←
NEW!
</ul>
</div>
HTML
<div
class=“fld”>
<ul>
<li
class=“fld-‐name”>Aフォルダ</li>
<li
class=“fld-‐item”>bbb.txt</li>
</ul>
</div>
HTML
ファイル名の横にも
フォルダアイコンが…!
/*
フォルダーモジュール
*/
.fld-‐name
{
background:
url(folder.png);
}
CSS
- 34. 4. 状態(ステート)
• 活性・非活性、表示・非表示、成功・失敗など
の状態をあらわすスタイルを定義
• 主にJavaScriptのコードから主要コンポーネン
トやモジュールに付与する
34
.is-‐ac?ve
{
font-‐weight:
bold
!important;
}
$(‘.tab’).on(‘click’,
func?on
()
{
//
クリックされたタブに活性化スタイルを付与
$(this).addClass(‘is-‐ac?ve’);
});
※他のタブの活性化スタイル除
去は割愛
既存スタイルを上書きすることが多い
ので、『!important』解禁!
(※ご利用は計画的に)