Object-Oriented CSS從 OOCSS, SMACSS, BEM 到 AMCSS

Benson Lu

Benson LuFront-End Engineer

Wantrepreneur

– http://cssguidelin.es/ Harry Roberts

CSS is not a pretty language. While it is simple to learn and get started with, it soon

becomes problematic at any reasonable scale.

http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/

<div class=”widget”> Featured Items</div>

#sidebar

.widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px;}

COMMON MISTAKES

http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/

<div class=”widget”> Featured Items</div>

<div id=”sidebar”> <div class=”widget”> Featured Items </div></div>

#sidebar

.widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px;}

COMMON MISTAKES

COMMON MISTAKES

http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/

#sidebar

.widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px;}

#sidebar .widget { width: 200px;}

<div class=”widget”> Featured Items</div>

<div id=”sidebar”> <div class=”widget”> Featured Items </div></div>

COMMON MISTAKES

http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/

<div class=”widget”> Featured Items</div>

<div id=”sidebar”> <div class=”widget”> Featured Items </div></div>

.widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px;}

#sidebar .widget { width: 200px;}

home

COMMON MISTAKES

http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/

<div class=”widget”> Featured Items</div>

<div id=”sidebar”> <div class=”widget”> Featured Items </div></div>

.widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px;}

#sidebar .widget { width: 200px;}

body.homepage .widget { backgorund: white;}

home

COMMON MISTAKES

• Not Reusable 不能重複使⽤用

• Not Scalable 不能擴充

COMMON MISTAKES

• Not Reusable 不能重複使⽤用

• Not Scalable 不能擴充

• Redesign?

COMMON MISTAKES

#main-nav ul li ul li div .widget {}

#content atticle h1:first-child {}

#sidebar > div > h3 + p {}

• Overly Complicated Selectors

COMMON MISTAKES

• Overly Complicated Selectors

• Overly Generic Class Names

• Making a Rule Do Too Much

CSS Architecture

- http://philipwalton.com/articles/css-architecture/

CSS isn’t just visual design.

OOP, Modular, DRY, open/closed principle etc. still apply to CSS

蛤，可是物件導向我不會

- 世間情 三⽴立台灣台

Good CSS Architecture

• 預測 - Predictable

• 複⽤用 - Reusable

• 維護 - Maintainable

• 延展 - Scalable

http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/

CSS Methodology

CSS Methodology

• OOCSS

• SMACSS

• BEM

• AMCSS

http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/

OBJECT Oriented CSS

- Nicole Sullivan 2009

Principles

• Separate Structure and Skin

• Separate Container and Content

Principles

• Separate Structure and Skin

https://dribbble.com/shots/989864-Flat-Roman-Typeface-Ui by Cosmic Capitanu

Media Object

Media Object

Media ObjectBase Class Sub Class

(modifier) Descendent Content

Descendent Content

Principles

• Separate Container and Content

• break the dependency between the container module and the content objects it contains.

Some Guidelines for OOCSS

• Avoid the descendent selector (i.e. don’t use .sidebar h3)

• Avoid IDs as styling hooks

• Avoid attaching classes to elements in your stylesheet (i.e. don’t do div.header or h1.title)

• Except in some rare cases, avoid using !important

SCALABLE MODULAR ARCHITECTURE CSS

- Jonathan Snook

PRinciples

• Categorizing CSS Rules

• 將 CSS 結構分類

• Naming Rules

• 命名規則

• Minimizing the Depth of Applicability

• 減少 CSS 與 HTML 的相依程度

Five Types of Categories

• Base

• Layout

• Module

• State

• Theme

BASE

• applied to

• element

• descendent selector

• child selector

• pseudo-classes

• should be no !important

• CSS Resets

LAYOUT

LAYOUT

LAYOUT

<style> #header {…} .l-main {…} .l-secondary {…} .l-featured {…} .l-featured > li {…}</style>

<div id=”header”></div><div class=”l-main”></div><div class=”l-secondary”></div><div class=”l-featured”></div>

MODULE

• Modules 存在於 Layout components 下.

• Modules 也可存在於 Modules 下.

• 每個 Module 應該被設計成獨⽴立存在的

• 避免使⽤用 IDs 還有 element 當作 selector

MODULE

STATE

• 可以作⽤用於 Layout 和 Module 上

• 表⽰示狀態的變化

• 使⽤用 .is-* 開頭的 class 來定義

BLOCK ELEMENT MODULE

- Yandex http://bem.info

BLOCK

• 在⾴頁⾯面上獨⽴立存在, i.e. 可以在⾴頁⾯面之中任意更動位置

• 是 Web Application 的 “building block”

• 可重複使⽤用

• Block 可以是 簡單⽽而單⼀一的 或是含有其他的 blocks

BLOCK

BLOCK

BLOCK

ELEMENT

• An internal part of BLOCK

• 只能存在於 BLOCK 內，沒有獨⽴立出來的意義

• BLOCK 不⼀一定要包含 ELEMENT(S)

ELEMENT

• 在 BLOCK 名稱後加上兩個底線 __ 作為 prefix

MODIFIER

• 定義 BLOCK 或 ELEMENT 的狀態或屬性

• 多組 MODIFIERS 可以共同作⽤用於⼀一個 BLOCK/ELEMENT 上

MODIFIER

• 在 MODIFIER 之前加上兩個 —(dash) 當作 prefix

- MindBEMding- http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

QUICK SUMMARY

• .block {…}

• .block--modifier {…}

• .block__element {…}

• .block__element—modifier {…}

BUT SERIOUSLY?

—__-_—_— - _— ___—__

ATTRIBUTE METHOD CSS

Glen Maddern, 2014 http://glenmaddern.com/articles/introducing-am-css

Why CLASSES?

• 3.2.5.7 The class attribute

• https://html.spec.whatwg.org/multipage/dom.html#classes

• The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

• There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

Why CLASSES?• Therefore,

• BEM

• .primary-nav__sub-nav—current

• Utilities

• .u-textTruncate

• left

• clearfix

• Javascript hook

• .js-whatevs

GLOBAL NAMESPACE

~=Attribute is within

Space Separated List<div class='a b c'>

.a { ... }

.b { ... }

.c { ... }

[class~='a'] { ... }

[class~='b'] { ... }

[class~='c'] { ... }

<div class=‘row’> <div class=‘column-12’>Full</div></div><div class=‘row’> <div class=‘column-4’>Thirds</div> <div class=‘column-4’>Thirds</div> <div class=‘column-4’>Thirds</div></div>

.row { /* max-width, clearfixes */ }

.column-1 { /* 1/12th width, floated */ }

.column-2 { /* 1/6th width, floated */ }

.column-3 { /* 1/4th width, floated */ }

.column-4 { /* 1/3th width, floated */ }

.column-5 { /* 5/12th width, floated */ }/* etc */.column-12 { /* 100% width, floated */ }

Normally we do

<div am-row> <div am-column=‘12’>Full</div></div><div am-row> <div am-column=‘4’>Thirds</div> <div am-column=‘4’>Thirds</div> <div am-column=‘4’>Thirds</div></div>

[am-row] { /* max-width, clearfixes */ }[am-column~=“1”] { /* 1/12th width, floated */ }[am-column~=“2”] { /* 1/6th width, floated */ }[am-column~=“3”] { /* 1/4th width, floated */ }[am-column~=“4”] { /* 1/3th width, floated */ }[am-column~=“5”] { /* 5/12th width, floated */ }[am-column~=“12”] { /* 100% width, floated */ }

AMCSS

<div am-row> <div am-column>Full</div></div><div am-row> <div am-column=‘1/3’>Thirds</div> <div am-column=‘1/3’>Thirds</div> <div am-column=‘1/3’>Thirds</div></div>

[am-row] { /* max-width, clearfixes */ }[am-column] { /* 100% width, floated */ }[am-column~=“1/12”] { /* 1/12th width, floated */ }[am-column~=“1/6”] { /* 1/6th width, floated */ }[am-column~=“1/4”] { /* 1/4th width, floated */ }[am-column~=“1/3”] { /* 1/3th width, floated */ }[am-column~=“5/12”] { /* 5/12th width, floated */ }

AMCSS

Styling both attributes and values• attribute 可以⽽而且應該要被 styled

• 屬性的 Value 可以改變與繼承 Base styles(也就是 attribute)

• namespace 的概念

Zero-class approach

• attribute 可以⽽而且應該要被 styled

• 屬性的 Value 可以改變與繼承 Base styles(也就是 attribute)

• namespace 的概念

zero-class approach to BEM modifiers

header > nav [am-Button] { /* contextual overrides */ }

Good CSS Architecture

• 預測 - Predictable

• 複⽤用 - Reusable

• 維護 - Maintainable

• 延展 - Scalable

http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/

Thank you! Benson

llwbenson@gmail.com