0
CSS
Architecture jsCafe
2014-03-09
KatsunoriTanaka
with OOCSS,SMACSS,BEM
OUTLINE
1. CSS Architecture
2. CSS Methodology
3. CSS Preprocessor
4. Semantics
5. Summary
1. CSS Architecture
What?
CSS Architecture
“コンピュータ(特にハードウェア)
における基本設計や設計思想などの
基本設計概念を意味する。”
https://ja.wikipedia.org/wiki/コンピュータ・アーキテクチャ
-wikipedia
Why?
CSS Architecture
“CSS is simple... It’s simple to understand.
But CSS is not simple to use or maintain.”
「CSSは単純で理解しやすいが、使ったりメンテ
したりするのはシンプ...
“We have been doing it all wrong....
Our (CSS) best practices are killing us”
「CSSのベストプラクティスによって私達はダメ
にされている。」
http://www....
Three Best Practice
Myths
❖ Don’t add any extra elements
❖ Don’t add classes
❖ Use descendent selectors exclusively
http:/...
“CODE ISTOO FRAGILE.”
http://www.stubbornella.org/content/2009/02/12/css-doesn’t-suck-you’re-just-doing-it-wrong/
-Nicole ...
CSS Architecture
http://philipwalton.com/articles/css-architecture/
The Goals of Good
CSS Architecture
❖ Predictable
❖ Reusable
❖ Maintainable
❖ Scalable
http://philipwalton.com/articles/css...
“CSS isn't just visual design.
Don't throw out programming best practices
just because you're writing CSS.
Concepts like O...
2. CSS Methodology
CSS Methodology
✤ OOCSS
✤ SMACSS
✤ BEM
Object
Oriented
CSS
OOCSS Nicole Sullivan
https://github.com/stubbornella/oocss/wiki
Two Main Principles
✤ Separate Structure and Skin
✤ Separete Container and Content
“abstract the structure of the block from
skin which is being applied.
Class can be extended by adding
additional classes ...
“break the dependency between the
container module and the content objects
it contains.”
「 コンテナーモジュールとその中身であるコン
テンツとの依存関係を...
EXMAPLE
MEDIA OBJECT
テキスト
<div class="media">
<div class="media-img">
<img src="http://lorempixel.com/100/100/" />
</div>
<div class="media-bod...
.media-shadow {
box-shadow: 0 1px 5px rgba(0,0,0,0.75);
}
.media {
overflow: hidden;
_overflow: visible;
zoom: 1;
}
.media...
テキスト
<div class="media ">
<div class="media-img">
<img src="http://lorempixel.com/100/100/" />
</div>
<div class="media-bo...
Sub Class
(descendent)
Sub Class
(descendent)
テキスト
<div class="media media-shadow">
<div class="media-img">
<img src="http...
Three Best Practice
Myths
❖ Don’t add any extra elements
❖ Don’t add classes
❖ Use descendent selectors exclusively
http:/...
❖ Add classes
❖ Don’t use descendent selectors
Two Practices
OOCSS
Scalable &
Modular
Architecture for
CSS
SMACSS
SMACSS Jonathan Snook
http://smacss.com
Three Main Principles
✤ Categorizing CSS Rules
✤ Naming Rules
✤ Minimizing the Depth of Applicability
Five Types of Categories
1. Base
2. Layout
3. Module
4. State
5. Theme
Base Rules
http://yuilibrary.com/yui/docs/cssreset/
http://necolas.github.io/normalize.css/
❖ ベースとなるルールセットを定義。
❖ タイプセレクタを用...
Layout Rules
( Major Components)
❖ ページの主要なレイアウトを司るコンポーネント
❖ コンテナーとして後述するモジュールを含む
❖ クラスセレクタ、IDセレクタで定義
❖ クラスの命名規則は、l- layout...
Module Rules
( Minor Components)
❖ 先述のメジャーコンポーネント内に配置
❖ 個々のモジュールはスタンドアロンなコンポーネント
として存在できるように設計(reusable)
❖ クラスセレクタのみで定義。
❖...
Sub Class
(descendent)
Sub Class
(descendent)
テキスト
<div class="media media-shadow">
<div class="media-img">
<img src="http...
State Rules
❖ Layout, Moduleの両方に適用される
❖ JavaScriptに依存する
❖ addClass, removeClass, toggleClass
❖ クラスセレクタのみで定義。
❖ クラスの命名規則は、i...
State Class
(modifier)
.media {
overflow: hidden;
_overflow: visible;
zoom: 1;
}
.media-img {
float: left;
margin-right: 10...
テキスト
<div class="media media-shadow is-hidden">
<div class="media-img">
<img src="http://lorempixel.com/100/100/" />
</div...
Theme Rules
❖ ページ全体のテーマ変更用のルール
❖ クラスセレクタのみで定義
❖ クラスの命名規則は、theme-
❖ theme-a-background
❖ theme-a-border
❖ theme-b-backgroun...
Minimizing the Depth of Applicability
❖ 適応性の深度を最小限にとどめる
❖ 深度の深い子孫セレクタは使用しない
❖ コンテンツ依存を防止する為
❖ モジュール内では子セレクタにとどめる
❖ 理想は子セレク...
Child
Selector
.media {
overflow: hidden;
_overflow: visible;
zoom: 1;
}
.media-img {
float: left;
margin-right: 10px;
}
....
テキスト
<div class="media skin-shadow is-hidden">
<div class="media-img">
<img src="http://lorempixel.com/100/100/" />
</div>...
Two core goals of SMACSS
1. HTMLとコンテンツのセマンティックな価値を
向上すること(適切な命名規則に基づいたクラス
名によるコンテンツの詳細説明。)
2. 特定のHTML構造への依存を低減すること
http://...
Block
Element
Modifier
BEM
BEM Yandex
http://bem.info/
BEM stands for
✤ Block
✤ Element
✤ Modifier
http://bem.info/method/definitions/
Block
❖ コンテンツから独立した存在
❖ ページやアプリケーションを構成している
「レゴブロック」のような役割
❖ クラスセレクタのみで定義。
❖ SMACSSにおけるModule Class
http://bem.info/method...
Element
❖ ブロックを構成する一部分
❖ エレメントが属するブロックの中でのみ意味
をなす、ブロックに依存した存在
❖ クラスセレクタのみで定義。
❖ サブクラスはアンダースコア二つでつなげる
❖ .block__element
❖ S...
Modifier
❖ Block, Elementの見栄えや振舞いを指定
❖ クラスセレクタのみで定義。
❖ サブクラスはアンダースコア一つでつなげる
❖ .block_modifier
❖ .block__element_modifier
❖ ...
Element
Element
テキスト
<div class="media media_shadow">
<div class="media__img">
<img src="http://lorempixel.com/100/100/" /...
.media {
overflow: hidden;
_overflow: visible;
zoom: 1;
}
.media__img {
float: left;
margin-right: 10px;
}
.media__img > i...
MindBEMDing
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
MindBEMDing
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
❖ BEM命名規則の改良版(by Nicolas Gallagher)
❖...
Element
Element
テキスト
<div class="media media--shadow">
<div class="media__img">
<img src="http://lorempixel.com/100/100/" ...
3. CSS Preprocessor
for OOCSS
CSS Preprocessor
for OOCSS
✤ “&” Combinator (LESS & SASS3.3~)
✤ Placeholder Selector (SASS)
✤ Combine multiples files
テキスト
<a class="btn btn--red" href="#" >爆破</a>
<a class="btn btn--blue" href="#" >やめる</a>
3.3~
// btn component
.btn {
border: 1px solid #000;
padding: 10px 20px;
color: #000;
border-radius: 8px;
&--red {
backgro...
.btn {
border: 1px solid #000;
padding: 10px 20px;
color: #000;
border-radius: 8px;
}
.btn--red {
background-color: red;
}...
Single
Class
OOSCSS
Multiple
Classes
Multiple
Classes
テキスト
<a class="btn btn--red" href="#" >爆破</a>
<a class="btn btn--blue" href="#" >やめる</a>
Single
Classes
Single Class
テキスト
<a class="fire" href="#" >爆破</a>
<a class="stop" href="#" >やめる</a>
%btn {
border: 1px solid #000;
padding: 10px 20px;
color: #000;
border-radius: 8px;
}
%btn--red {
background-color: red;
}...
.fire, .stop {
border: 1px solid #000;
padding: 10px 20px;
color: #000;
border-radius: 8px;
}
.fire {
background-color: re...
Placeholder Selector
✤ Clean markup - single class
✤ Semantic class naming
✤ Avoid using too much @extend
4. Semantics
About HTML semantics and
front-end architecture
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
“ ... not all semantics need to be content-
derived ”
「全てのセマンティクスがコンテンツ由来であ
る必要はない」
http://nicolasgallagher.com/about-html...
“ Content-layer semantics are already
served by HTML elements and other
attributes. ”
「コンテンツレイヤーのセマンティクスは、
HTML要素とその他属性によっ...
“ Class names impart little or no useful
semantic information to machines or
human visitors... ”
「クラス名は、サイト閲覧者やマシーンにとっ
て殆ど...
“The primary purpose of a class name is
to be a hook for CSS and JavaScript. ”
「クラス名の第一の目的は、CSSやJavaScriptの
フックになること。」
htt...
“ Class names should communicate useful
information to developers. ”
http://nicolasgallagher.com/about-html-semantics-fron...
“ A flexible and reusable component is one
which neither relies on existing within a
certain part of the DOM tree, nor requ...
CSS Class
Naming Convention
✤ Semantic ?
✤ presentational / behavioural ?
5. Summary
The Goals of Good
CSS Architecture
❖ Predictable
❖ Reusable
❖ Maintainable
❖ Scalable
http://philipwalton.com/articles/css...
Do you need a CSS Architecture &
Methodology like OOCSS ?
❖ How many developers ?
❖ Reuse ?
❖ Maintainance ?
❖ Scale ?
htt...
Bootstrap
http://getbootstrap.com/
Topcoat
http://topcoat.io/
Thank you
so much jsCafe
2014-03-09
KatsunoriTanaka
ご静聴ありがとうございました
CSS Architecture with OOCSS, SMACSS, BEM
CSS Architecture with OOCSS, SMACSS, BEM
CSS Architecture with OOCSS, SMACSS, BEM
Upcoming SlideShare
Loading in...5
×

CSS Architecture with OOCSS, SMACSS, BEM

8,024

Published on

Slide about Modern CSS Architecture.
with OOCSS, SMACSS, BEM and Preprocessors.

If you want to download PDF but don't want to login SlideShare,
go to Speacker Deck on which is the same downloadable PDF :
https://speakerdeck.com/katsunoritanaka/css-architecture-with-oocss-smacss-bem

Published in: Design
0 Comments
58 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,024
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
108
Comments
0
Likes
58
Embeds 0
No embeds

No notes for slide

Transcript of "CSS Architecture with OOCSS, SMACSS, BEM"

  1. 1. CSS Architecture jsCafe 2014-03-09 KatsunoriTanaka with OOCSS,SMACSS,BEM
  2. 2. OUTLINE 1. CSS Architecture 2. CSS Methodology 3. CSS Preprocessor 4. Semantics 5. Summary
  3. 3. 1. CSS Architecture
  4. 4. What? CSS Architecture
  5. 5. “コンピュータ(特にハードウェア) における基本設計や設計思想などの 基本設計概念を意味する。” https://ja.wikipedia.org/wiki/コンピュータ・アーキテクチャ -wikipedia
  6. 6. Why? CSS Architecture
  7. 7. “CSS is simple... It’s simple to understand. But CSS is not simple to use or maintain.” 「CSSは単純で理解しやすいが、使ったりメンテ したりするのはシンプルではない。」 http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-matters/ -Chris Eppstein
  8. 8. “We have been doing it all wrong.... Our (CSS) best practices are killing us” 「CSSのベストプラクティスによって私達はダメ にされている。」 http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ -Nicole Sullivan
  9. 9. Three Best Practice Myths ❖ Don’t add any extra elements ❖ Don’t add classes ❖ Use descendent selectors exclusively http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
  10. 10. “CODE ISTOO FRAGILE.” http://www.stubbornella.org/content/2009/02/12/css-doesn’t-suck-you’re-just-doing-it-wrong/ -Nicole Sullivan 「コード(注:ここではCSS)もろすぎ」
  11. 11. CSS Architecture http://philipwalton.com/articles/css-architecture/
  12. 12. The Goals of Good CSS Architecture ❖ Predictable ❖ Reusable ❖ Maintainable ❖ Scalable http://philipwalton.com/articles/css-architecture/
  13. 13. “CSS isn't just visual design. Don't throw out programming best practices just because you're writing CSS. Concepts like OOP, DRY, the open/closed principle, separation of concerns, etc. still apply to CSS.” 「オブジェクト志向、DRY、開放/閉鎖原則、関 心の分離などの概念は、CSSにもなお適用され る。」 http://philipwalton.com/articles/css-architecture/
  14. 14. 2. CSS Methodology
  15. 15. CSS Methodology ✤ OOCSS ✤ SMACSS ✤ BEM
  16. 16. Object Oriented CSS
  17. 17. OOCSS Nicole Sullivan https://github.com/stubbornella/oocss/wiki
  18. 18. Two Main Principles ✤ Separate Structure and Skin ✤ Separete Container and Content
  19. 19. “abstract the structure of the block from skin which is being applied. Class can be extended by adding additional classes to the block element.” 「スキンからブロック構造を抽出する。 ブロック要素へ別のクラスを付け加える事で クラスは拡張できる。」 Separate Structure and Skin
  20. 20. “break the dependency between the container module and the content objects it contains.” 「 コンテナーモジュールとその中身であるコン テンツとの依存関係を断ち切る」 Separate Container and Content
  21. 21. EXMAPLE MEDIA OBJECT
  22. 22. テキスト <div class="media"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div>
  23. 23. .media-shadow { box-shadow: 0 1px 5px rgba(0,0,0,0.75); } .media { overflow: hidden; _overflow: visible; zoom: 1; } .media-img { float: left; margin-right: 10px; } .media-img > img { display: block; margin: 10px; } .media-body { overflow: hidden; }
  24. 24. テキスト <div class="media "> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> media-shadow
  25. 25. Sub Class (descendent) Sub Class (descendent) テキスト <div class="media media-shadow"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> Base Class Sub Class (modifier)
  26. 26. Three Best Practice Myths ❖ Don’t add any extra elements ❖ Don’t add classes ❖ Use descendent selectors exclusively http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
  27. 27. ❖ Add classes ❖ Don’t use descendent selectors Two Practices OOCSS
  28. 28. Scalable & Modular Architecture for CSS SMACSS
  29. 29. SMACSS Jonathan Snook http://smacss.com
  30. 30. Three Main Principles ✤ Categorizing CSS Rules ✤ Naming Rules ✤ Minimizing the Depth of Applicability
  31. 31. Five Types of Categories 1. Base 2. Layout 3. Module 4. State 5. Theme
  32. 32. Base Rules http://yuilibrary.com/yui/docs/cssreset/ http://necolas.github.io/normalize.css/ ❖ ベースとなるルールセットを定義。 ❖ タイプセレクタを用いる。 ❖ クラスセレクタ、IDセレクタは用いない。 ❖ CSS Reset ❖ Normalize CSS
  33. 33. Layout Rules ( Major Components) ❖ ページの主要なレイアウトを司るコンポーネント ❖ コンテナーとして後述するモジュールを含む ❖ クラスセレクタ、IDセレクタで定義 ❖ クラスの命名規則は、l- layout- ❖ .l-header ❖ .l-sidebar ❖ .l-content ❖ .l-footer http://smacss.com/book/type-layout
  34. 34. Module Rules ( Minor Components) ❖ 先述のメジャーコンポーネント内に配置 ❖ 個々のモジュールはスタンドアロンなコンポーネント として存在できるように設計(reusable) ❖ クラスセレクタのみで定義。 ❖ サブクラスはハイフンでつなげる(命名規則) ❖ .media ❖ .media-image ❖ .media-image-hoge http://smacss.com/book/type-module
  35. 35. Sub Class (descendent) Sub Class (descendent) テキスト <div class="media media-shadow"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> Module Class Sub Class (modifier)
  36. 36. State Rules ❖ Layout, Moduleの両方に適用される ❖ JavaScriptに依存する ❖ addClass, removeClass, toggleClass ❖ クラスセレクタのみで定義。 ❖ クラスの命名規則は、is- ❖ is-active ❖ is-tab-active ❖ is-hidden ❖ is-media-hidden http://smacss.com/book/type-state
  37. 37. State Class (modifier) .media { overflow: hidden; _overflow: visible; zoom: 1; } .media-img { float: left; margin-right: 10px; } .media-img > img { display: block; margin: 10px; } .media-body { overflow: hidden; } .is-hidden { display: none; }
  38. 38. テキスト <div class="media media-shadow is-hidden"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> State Class (modifier)
  39. 39. Theme Rules ❖ ページ全体のテーマ変更用のルール ❖ クラスセレクタのみで定義 ❖ クラスの命名規則は、theme- ❖ theme-a-background ❖ theme-a-border ❖ theme-b-background ❖ theme-b-border http://smacss.com/book/type-theme
  40. 40. Minimizing the Depth of Applicability ❖ 適応性の深度を最小限にとどめる ❖ 深度の深い子孫セレクタは使用しない ❖ コンテンツ依存を防止する為 ❖ モジュール内では子セレクタにとどめる ❖ 理想は子セレクタの代わりにサブクラスで定義 http://smacss.com/book/applicability
  41. 41. Child Selector .media { overflow: hidden; _overflow: visible; zoom: 1; } .media-img { float: left; margin-right: 10px; } .media-img > img { display: block; margin: 10px; } .media-body { overflow: hidden; } .is-hidden { display: none; }
  42. 42. テキスト <div class="media skin-shadow is-hidden"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> .media-img > img
  43. 43. Two core goals of SMACSS 1. HTMLとコンテンツのセマンティックな価値を 向上すること(適切な命名規則に基づいたクラス 名によるコンテンツの詳細説明。) 2. 特定のHTML構造への依存を低減すること http://smacss.com/book/html5
  44. 44. Block Element Modifier BEM
  45. 45. BEM Yandex http://bem.info/
  46. 46. BEM stands for ✤ Block ✤ Element ✤ Modifier http://bem.info/method/definitions/
  47. 47. Block ❖ コンテンツから独立した存在 ❖ ページやアプリケーションを構成している 「レゴブロック」のような役割 ❖ クラスセレクタのみで定義。 ❖ SMACSSにおけるModule Class http://bem.info/method/definitions/
  48. 48. Element ❖ ブロックを構成する一部分 ❖ エレメントが属するブロックの中でのみ意味 をなす、ブロックに依存した存在 ❖ クラスセレクタのみで定義。 ❖ サブクラスはアンダースコア二つでつなげる ❖ .block__element ❖ SMACSSにおけるSub Class (descendent) http://bem.info/method/definitions/
  49. 49. Modifier ❖ Block, Elementの見栄えや振舞いを指定 ❖ クラスセレクタのみで定義。 ❖ サブクラスはアンダースコア一つでつなげる ❖ .block_modifier ❖ .block__element_modifier ❖ SMACSSにおけるSub Class (Modifier), State Rule http://bem.info/method/definitions/
  50. 50. Element Element テキスト <div class="media media_shadow"> <div class="media__img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media__body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> Block Modifier
  51. 51. .media { overflow: hidden; _overflow: visible; zoom: 1; } .media__img { float: left; margin-right: 10px; } .media__img > img { display: block; margin: 10px; } .media__body { overflow: hidden; } .media_shadow { box-shadow: 0 1px 5px rgba(0,0,0,0.75); }
  52. 52. MindBEMDing http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
  53. 53. MindBEMDing http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ ❖ BEM命名規則の改良版(by Nicolas Gallagher) ❖ ダブルセパレータ ❖ .block__element ❖ .block−−modifier ❖ .block__element−−modifier
  54. 54. Element Element テキスト <div class="media media--shadow"> <div class="media__img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media__body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> Block Modifier
  55. 55. 3. CSS Preprocessor for OOCSS
  56. 56. CSS Preprocessor for OOCSS ✤ “&” Combinator (LESS & SASS3.3~) ✤ Placeholder Selector (SASS) ✤ Combine multiples files
  57. 57. テキスト <a class="btn btn--red" href="#" >爆破</a> <a class="btn btn--blue" href="#" >やめる</a>
  58. 58. 3.3~ // btn component .btn { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; &--red { background-color: red; } &--blue { background-color: blue; } }
  59. 59. .btn { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; } .btn--red { background-color: red; } .btn--blue { background-color: blue; }
  60. 60. Single Class OOSCSS
  61. 61. Multiple Classes Multiple Classes テキスト <a class="btn btn--red" href="#" >爆破</a> <a class="btn btn--blue" href="#" >やめる</a>
  62. 62. Single Classes Single Class テキスト <a class="fire" href="#" >爆破</a> <a class="stop" href="#" >やめる</a>
  63. 63. %btn { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; } %btn--red { background-color: red; } %btn--blue { background-color: blue; } .fire { @extend %btn; @extend %btn--red; } .stop { @extend %btn; @extend %btn--blue; }
  64. 64. .fire, .stop { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; } .fire { background-color: red; } .stop { background-color: blue; }
  65. 65. Placeholder Selector ✤ Clean markup - single class ✤ Semantic class naming ✤ Avoid using too much @extend
  66. 66. 4. Semantics
  67. 67. About HTML semantics and front-end architecture http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
  68. 68. “ ... not all semantics need to be content- derived ” 「全てのセマンティクスがコンテンツ由来であ る必要はない」 http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
  69. 69. “ Content-layer semantics are already served by HTML elements and other attributes. ” 「コンテンツレイヤーのセマンティクスは、 HTML要素とその他属性によって、すでに与え られている」 http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
  70. 70. “ Class names impart little or no useful semantic information to machines or human visitors... ” 「クラス名は、サイト閲覧者やマシーンにとっ て殆ど影響を与えることはなく、有益な情報を もたらすことはない」 http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
  71. 71. “The primary purpose of a class name is to be a hook for CSS and JavaScript. ” 「クラス名の第一の目的は、CSSやJavaScriptの フックになること。」 http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
  72. 72. “ Class names should communicate useful information to developers. ” http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ 「クラス名は開発者へ有益な情報を伝達すべき。」
  73. 73. “ A flexible and reusable component is one which neither relies on existing within a certain part of the DOM tree, nor requires the use of specific element types. ” http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ 「フレキシブルで最利用可能なコンポーネント は、DOMツリーのある部分に依存することも、 特定の要素タイプを使用したりもしない。」
  74. 74. CSS Class Naming Convention ✤ Semantic ? ✤ presentational / behavioural ?
  75. 75. 5. Summary
  76. 76. The Goals of Good CSS Architecture ❖ Predictable ❖ Reusable ❖ Maintainable ❖ Scalable http://philipwalton.com/articles/css-architecture/
  77. 77. Do you need a CSS Architecture & Methodology like OOCSS ? ❖ How many developers ? ❖ Reuse ? ❖ Maintainance ? ❖ Scale ? http://philipwalton.com/articles/css-architecture/
  78. 78. Bootstrap http://getbootstrap.com/
  79. 79. Topcoat http://topcoat.io/
  80. 80. Thank you so much jsCafe 2014-03-09 KatsunoriTanaka ご静聴ありがとうございました
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×