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
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. “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. 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/
12. The Goals of Good
CSS Architecture
❖ Predictable
❖ Reusable
❖ Maintainable
❖ Scalable
http://philipwalton.com/articles/css-architecture/
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/
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. “break the dependency between the
container module and the content objects
it contains.”
「 コンテナーモジュールとその中身であるコン
テンツとの依存関係を断ち切る」
Separate Container and Content
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>
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. 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. 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. ❖ Add classes
❖ Don’t use descendent selectors
Two Practices
OOCSS
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)
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)
53. 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
57. 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
70. About HTML semantics and
front-end architecture
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
71. “ ... not all semantics need to be content-
derived ”
「全てのセマンティクスがコンテンツ由来であ
る必要はない」
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
72. “ Content-layer semantics are already
served by HTML elements and other
attributes. ”
「コンテンツレイヤーのセマンティクスは、
HTML要素とその他属性によって、すでに与え
られている」
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
73. “ Class names impart little or no useful
semantic information to machines or
human visitors... ”
「クラス名は、サイト閲覧者やマシーンにとっ
て殆ど影響を与えることはなく、有益な情報を
もたらすことはない」
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
74. “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/
75. “ Class names should communicate useful
information to developers. ”
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
「クラス名は開発者へ有益な情報を伝達すべき。」
76. “ 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ツリーのある部分に依存することも、
特定の要素タイプを使用したりもしない。」
79. The Goals of Good
CSS Architecture
❖ Predictable
❖ Reusable
❖ Maintainable
❖ Scalable
http://philipwalton.com/articles/css-architecture/
80. Do you need a CSS Architecture &
Methodology like OOCSS ?
❖ How many developers ?
❖ Reuse ?
❖ Maintainance ?
❖ Scale ?
http://philipwalton.com/articles/css-architecture/