SlideShare a Scribd company logo
今必要なCSSアーキテクチャ	
株式会社オープンストリーム	
木村茉由	
1	
photo:	
  h(p://www.flickr.com/photos/22439010@N04/7864852790
アジェンダ	
•  自己紹介	
•  なぜ今CSSアーキテクチャなのか	
•  OOCSSの紹介	
•  SMACSSの紹介	
•  OOCSS、SMACSSへの素朴な疑問	
•  まとめ	
2
自己紹介	
はじめましての方が多いかと思いますので…。	
3
自己紹介	
•  株式会社オープンストリーム所属	
•  フロントエンドアーキテクト	
•  好きなものはJavaScriptとおうどんです	
•  最近翻訳にハマってます(InfoQ)	
•  主催者側の人間なのに、一番勉強会のテー
マからズレててすみません…。	
•  Twitter:@kimura_m_29 	
4
なぜ今CSSアーキテクチャなのか	
そんな大げさな…と思われた方へ	
5
6	
CSSにアーキテクチャとかあるの?
7	
CSSなんてコピペでどうにかなるよね
8	
…
9	
本当にそれで大丈夫?
なぜ今CSSアーキテクチャなのか	
→そもそも、CSSはカオスになりやすい	
10
なぜ今CSSアーキテクチャなのか	
1.  すべての定義がグローバル	
→影響範囲が甚大	
※<style>タグのscoped属性	
親要素およびその子孫要素に対してのみ、スタイルを適
用する	
2.  HTMLの構造に依存しがち=壊れやすい	
#main	
  .news	
  .topics	
  ul	
  li	
  ul	
  li	
  {	
  
	
  	
  	
  	
  color:	
  black;	
  	
  
	
  	
  	
  	
  font-­‐size:	
  0.8em;	
  
}	
  
11	
HTMLの構造が変わったら	
  
適用されなくなる><	
Firefox 21.0〜のみ対応
なぜ今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
なぜ今CSSアーキテクチャなのか	
そんなCSSですが…。	
•  リッチUIな大規模Webアプリケーション	
•  モバイル向けのHTML/CSS/JavaScript	
– モバイル向けサイト、アプリ(PhoneGap等)	
	
→CSSの運用・保守性、パフォーマンス大事!	
(モバイルの場合、よりシビア)	
	
13	
CSSのファイルサイズ
をなるべく小さく!
14	
でも、どうすれば良いのか…!	
photo:	
  h(p://www.flickr.com/photos/59489479@N08/9269503551
OOCSSの紹介	
  
オーオーシーエスエスと読みます	
15
OOCSSの紹介	
•  2009年にNicole Sullivanが提唱したCSSの設計
方法	
–  Object Oriented CSS	
•  目的	
より良いCSSを書くことで以下を実現する	
1.  再利用しやすく	
2.  拡張しやすく	
3.  メンテナンスしやすく	
4.  ファイルサイズ小さく	
5.  パフォーマンス向上 etc...	
16	
“WE	
  WANT	
  A	
  LOT!”	
  
by	
  Nicole	
  Sullivan	
  
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
OOCSSの2つの原則	
1.  Separate Structure and Skin	
(構造と見た目の分離)	
	
コンポーネントに対するスタイルの種類ごとに、別々の
セレクタにスタイルを定義する	
1.  レイアウトを定義するスタイル	
1.  ポジション、サイズ等	
2.  見た目を定義するスタイル	
1.  ボーダーやフォントカラー等	
1.  バリエーションが増えやすい	
18
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	
  
レイアウト	
見た目	
パターンが増えたら…?
OOCSSの2つの原則	
2.  Separate Container and Content	
(コンテナとコンテンツの分離)	
	
ページを構成する主要なコンテナと、その子要素で
あるコンテンツとの間に依存関係を持たせない	
20
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	
  
適用したい要素が
増えたら…?	
マルチクラスパターン
OOCSSのその他のプラクティス	
•  Avoid singletons(IDセレクタの利用を避ける)	
	
	
– id属性値は同一ページ内でユニークでなくてはな
らないため、再利用できない	
– セレクタの優先順位が高いため、もしもの時のス
タイル上書きは『!important』を使うしかない	
22	
#widget	
  {	
  …	
  }	
  
#footer	
  a	
  {	
  …	
  }	
  
SMACSSの紹介	
  
スマックスと読みます	
23
SMACSSの紹介	
•  2012年にWebデザイナーのJonathan	
  Snook
が提唱したCSSの設計方法	
– Scalable	
  and	
  Modular	
  Architecture	
  for	
  CSS	
  
– Ebook(日本語版)	
  
•  OOCSSの流れをくんでいる	
  
24
SMACSSの5つのカテゴリ	
SMACSSでは、CSSのスタイル定義を下記のカテゴリに分
類して行うことを推奨している	
  
	
  
1.  ベース	
  
2.  レイアウト	
  
3.  モジュール	
  
4.  状態(ステート)	
  
5.  テーマ	
  
	
  
それぞれを別ファイルに分けて管理する	
  
→スタイル定義の複雑さをなくす	
	
25
1. ベース	
26
1. ベース	
•  その名の通り、ベースとなるスタイルを定義	
  
•  基本的に要素セレクタを用い、クラスやIDセ
レクタは使わない	
  
•  ブラウザのデフォルトスタイルをクリアするリ
セットCSSはここで定義する	
27	
html,	
  body	
  {	
  
	
  	
  	
  	
  margin:	
  0;	
  
	
  	
  	
  	
  padding:	
  0;	
  
}	
  
a:hover	
  {	
  
	
  	
  	
  	
  color:	
  #039;	
  
}	
  
2. レイアウト	
28
2. レイアウト	
•  主要なコンポーネント(ページヘッダやサイド
メニュー、メイン記事等)のスタイルを定義	
  
•  伝統的にIDセレクタが使われることが多い	
  
•  主要コンポーネント間で共通化できるスタイ
ルはクラスセレクタを用いる	
  
29	
#header,	
  #ar?cle,	
  #footer	
  {	
  
	
  	
  	
  	
  width:	
  960px;	
  
	
  	
  	
  	
  margin:	
  auto;	
  
}	
  
3. モジュール	
30
3. モジュール	
•  主要なコンポーネントに含まれる、小さなコ
ンポーネント(入力フォームやモーダル等)
のスタイルを定義	
  
•  モジュールはそれ単体でスタイルが独立し
ていて、配置場所が変わってもスタイルが崩
れないようにする	
  
•  クラスセレクタを使用する(再利用が前提)	
  
31	
.module	
  >	
  h2	
  {	
  
	
  	
  	
  	
  padding:	
  5px;	
  
}	
  
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	
  
4. 状態(ステート)	
33
4. 状態(ステート)	
•  活性・非活性、表示・非表示、成功・失敗など
の状態をあらわすスタイルを定義	
  
	
  
•  主にJavaScriptのコードから主要コンポーネン
トやモジュールに付与する	
  
34	
.is-­‐ac?ve	
  {	
  
	
  	
  	
  font-­‐weight:	
  bold	
  !important;	
  
}	
  
$(‘.tab’).on(‘click’,	
  func?on	
  ()	
  {	
  
	
  	
  	
  	
  //	
  クリックされたタブに活性化スタイルを付与	
  
	
  	
  	
  	
  $(this).addClass(‘is-­‐ac?ve’);	
  
});	
  
※他のタブの活性化スタイル除
去は割愛	
既存スタイルを上書きすることが多い
ので、『!important』解禁!	
  
(※ご利用は計画的に)
5. テーマ	
35
5. テーマ	
•  テーマ切り替え用のスタイルを定義	
  
•  あまり活躍する場面はないかも…。	
  
36	
/*	
  theme-­‐purple.cssで定義	
  */	
  
.theme-­‐border	
  {	
  
	
  	
  	
  	
  border-­‐color:	
  purple;	
  
}	
  
OOCSS、SMACSSへの素朴な疑問	
私はこういうところに引っかかりました	
37
class属性値の数が多くなりそう><	
•  はい、多くなります!	
  
– HTMLをシンプルに保つ=CSSが頑張る	
  
•  CSSの頑張りは、HTMLの構造への依存を高めてしまう	
  
•  HTMLの構造変更に影響を受けやすくなる	
  
38	
<div	
  id=“snsArea”>	
  
	
  	
  	
  	
  <bufon>	
  
	
  	
  	
  	
  	
  	
  	
  	
  Twiferでつぶやく	
  
	
  	
  	
  	
  </bufon>	
  
</div>	
  
HTML	
  
<div	
  id=“snsArea”>	
  
	
  	
  	
  	
  <bufon	
  class=“btn	
  btn-­‐sns”>	
  
	
  	
  	
  	
  	
  	
  	
  	
  Twiferでつぶやく	
  
	
  	
  	
  	
  </bufon>	
  
</div>	
  
HTML	
  
classが全然セマンティックじゃない気が…?	
•  はい、その通りです!	
  
– そもそも、セマンティックである必要があるのか	
  
•  たしかに、HTML5の仕様に書いてあるけど…。	
  
–  CSSの運用・保守性を犠牲にしてまで、守るべきものかどうか	
  
•  Microformats(class属性)→Microdata(独自属性)	
39	
<bufon	
  class=“twiferBufon”>	
  
	
  	
  	
  	
  Twiferでつぶやく	
  
</bufon>	
  
HTML	
  
<bufon	
  class=“btn	
  btn-­‐sns”>	
  
	
  	
  	
  	
  Twiferでつぶやく	
  
</bufon>	
  
HTML	
  
DOM操作のパフォーマンス向上を考えると、
やっぱりid属性使いたいよ…!	
•  はい、仰るとおりです!	
  
– id属性はJavaScriptが参照するものとして使う	
  
– JavaScript用のid、classはプリフィックスに「js-­‐」を
付ける	
  
•  用途が明確になる	
  
•  HTMLから未使用のclass属性値を消しやすくなるかも	
  
40	
<bufon	
  class=“btn	
  btn-­‐sns”	
  id=“js-­‐twiferBufon”	
  >	
  
	
  	
  	
  	
  Twiferでつぶやく	
  
</bufon>	
  
HTML	
  
まとめ	
  
長々お付き合いありがとうございました!	
41
まとめ	
•  やっぱり、銀の弾丸はありません><	
  
– 引き出しを多く持っておき、状況に応じて適用す
るというアプローチになる	
  
– バランス感覚も重要	
  
•  CSSもコードレビューが必要ですね…。	
  
– CSSLintの採用も良さそう	
  
•  OOCSSのNicole Sullivanが関わっています	
  
•  今【だけじゃなく、むしろ未来にとって】必要な
CSSアーキテクチャ	
42
ご清聴ありがとうございました!	
43

More Related Content

What's hot

ドメイン駆動設計という設計スタイル
ドメイン駆動設計という設計スタイルドメイン駆動設計という設計スタイル
ドメイン駆動設計という設計スタイル
増田 亨
 
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったことPHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
 
Linux女子部 systemd徹底入門
Linux女子部 systemd徹底入門Linux女子部 systemd徹底入門
Linux女子部 systemd徹底入門
Etsuji Nakai
 
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~Yoshitaka Kawashima
 
CloudFront経由でのCORS利用
CloudFront経由でのCORS利用CloudFront経由でのCORS利用
CloudFront経由でのCORS利用
Yuta Imai
 
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
 
DevOps with Database on AWS
DevOps with Database on AWSDevOps with Database on AWS
DevOps with Database on AWS
Amazon Web Services Japan
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
 
MySQL 5.7とレプリケーションにおける改良
MySQL 5.7とレプリケーションにおける改良MySQL 5.7とレプリケーションにおける改良
MySQL 5.7とレプリケーションにおける改良
Shinya Sugiyama
 
AWSからのメール送信
AWSからのメール送信AWSからのメール送信
AWSからのメール送信
Amazon Web Services Japan
 
とある診断員とSQLインジェクション
とある診断員とSQLインジェクションとある診断員とSQLインジェクション
とある診断員とSQLインジェクション
zaki4649
 
コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」
Masahito Zembutsu
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
 
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とはがんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
 
AWS Black Belt Online Seminar 2016 Amazon VPC
AWS Black Belt Online Seminar 2016 Amazon VPCAWS Black Belt Online Seminar 2016 Amazon VPC
AWS Black Belt Online Seminar 2016 Amazon VPC
Amazon Web Services Japan
 
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くかDDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
Koichiro Matsuoka
 
オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門
増田 亨
 
Dockerイメージ管理の内部構造
Dockerイメージ管理の内部構造Dockerイメージ管理の内部構造
Dockerイメージ管理の内部構造
Etsuji Nakai
 
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティHTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
Naoki Matsuda
 
今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門
Masahito Zembutsu
 

What's hot (20)

ドメイン駆動設計という設計スタイル
ドメイン駆動設計という設計スタイルドメイン駆動設計という設計スタイル
ドメイン駆動設計という設計スタイル
 
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったことPHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
 
Linux女子部 systemd徹底入門
Linux女子部 systemd徹底入門Linux女子部 systemd徹底入門
Linux女子部 systemd徹底入門
 
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
【17-E-4】 未来はどこにいても誰にでも平等にある。 未来を創るのは自分自身だ。 ~SIerの中で生きるということ~
 
CloudFront経由でのCORS利用
CloudFront経由でのCORS利用CloudFront経由でのCORS利用
CloudFront経由でのCORS利用
 
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
 
DevOps with Database on AWS
DevOps with Database on AWSDevOps with Database on AWS
DevOps with Database on AWS
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
 
MySQL 5.7とレプリケーションにおける改良
MySQL 5.7とレプリケーションにおける改良MySQL 5.7とレプリケーションにおける改良
MySQL 5.7とレプリケーションにおける改良
 
AWSからのメール送信
AWSからのメール送信AWSからのメール送信
AWSからのメール送信
 
とある診断員とSQLインジェクション
とある診断員とSQLインジェクションとある診断員とSQLインジェクション
とある診断員とSQLインジェクション
 
コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
 
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とはがんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
 
AWS Black Belt Online Seminar 2016 Amazon VPC
AWS Black Belt Online Seminar 2016 Amazon VPCAWS Black Belt Online Seminar 2016 Amazon VPC
AWS Black Belt Online Seminar 2016 Amazon VPC
 
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くかDDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
 
オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門
 
Dockerイメージ管理の内部構造
Dockerイメージ管理の内部構造Dockerイメージ管理の内部構造
Dockerイメージ管理の内部構造
 
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティHTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
 
今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門
 

Viewers also liked

Thinking about CSS Architecture
Thinking about CSS ArchitectureThinking about CSS Architecture
Thinking about CSS Architecture
拓樹 谷
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
 
HTML5, きちんと。
HTML5, きちんと。HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
 

Viewers also liked (6)

Thinking about CSS Architecture
Thinking about CSS ArchitectureThinking about CSS Architecture
Thinking about CSS Architecture
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
 
HTML5, きちんと。
HTML5, きちんと。HTML5, きちんと。
HTML5, きちんと。
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
 

Similar to 今必要なCSSアーキテクチャ

「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
 
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
Sosuke Kimura
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSTakeharu Igari
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
 
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
 まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。 まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Hiroshi Urabe
 
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
 
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSSUAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
知己 久保
 
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
Hideki Akiba
 
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
Kenji Shirane
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Atushi Sugiyama
 
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座Shinichi Nishikawa
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
 
MODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開しますMODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開します
Kei Mikage
 
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
 
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しようHTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
shigetoshi komatsu
 
今更ながらCSS3を試してみた
今更ながらCSS3を試してみた今更ながらCSS3を試してみた
今更ながらCSS3を試してみた
Takao Sumitomo
 
20141206 handson
20141206 handson20141206 handson
20141206 handson
Six Apart
 
Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話
Yosuke Doke
 

Similar to 今必要なCSSアーキテクチャ (20)

「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
 
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
 まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。 まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
 
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
 
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSSUAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
 
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
 
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
 
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
 
MODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開しますMODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開します
 
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
 
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しようHTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
 
今更ながらCSS3を試してみた
今更ながらCSS3を試してみた今更ながらCSS3を試してみた
今更ながらCSS3を試してみた
 
20141206 handson
20141206 handson20141206 handson
20141206 handson
 
Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話
 

今必要なCSSアーキテクチャ