SlideShare a Scribd company logo
漫談 CSS 架構⽅方法
- 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu @ F2E.tw Party 8th
2014/05/26
Kuro Hsu
前端⼯工程師
業餘暴⺠民
– Chris Eppstein
“CSS is simple..., It’s simple to understand.
But CSS is not simple to use or maintain.”
http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-matters/
!
.font-­‐18{	
  
	
  	
  font-­‐size:	
  18px;	
  
}	
  
!
!
.red-­‐text{	
  
	
  	
  color:	
  red;	
  
}	
  
<div	
  class="font-­‐18	
  red-­‐text">這是個錯誤訊息。</div>


<div	
  class="font-­‐18	
  red-­‐text	
  box">	
  
	
   這是個錯誤訊息。	
  
</div>

!
.font-­‐18{	
  
	
  	
  font-­‐size:	
  18px;	
  
}	
  
!
@media	
  only	
  screen	
  and	
  (max-­‐width:	
  320px){	
  
!
}


	
  .red-­‐text{	
  
	
  	
  	
  color:	
  orange;	
  
	
  }

!
.font-­‐18{	
  
	
  	
  font-­‐size:	
  18px;	
  
}	
  
!
@media	
  only	
  screen	
  and	
  (max-­‐width:	
  320px){	
  
	
  	
  .font-­‐18{	
  
	
  	
  	
  	
  font-­‐size:	
  14px;	
  
	
  	
  }	
  	
  
}


	
  .red-­‐text{	
  
	
  	
  	
  color:	
  orange;	
  
	
  }

!
.font-­‐18{	
  
	
  	
  font-­‐size:	
  18px;	
  
}	
  
!
@media	
  only	
  screen	
  and	
  (max-­‐width:	
  320px){	
  
	
  	
  .font-­‐18{	
  
	
  	
  	
  	
  font-­‐size:	
  14px;	
  
	
  	
  }	
  	
  
}
#news	
  h2{	
  
	
  	
  border-­‐bottom:	
  1px	
  solid	
  #000;	
  
	
  	
  padding:	
  1em;	
  
	
  	
  font-­‐size:	
  18px;	
  
	
  	
  font-­‐weight:	
  700;	
  
}
#news	
  h2{	
  
	
  	
  border-­‐bottom:	
  1px	
  solid	
  #000;	
  
	
  	
  padding:	
  1em;	
  
	
  	
  font-­‐size:	
  18px;	
  
	
  	
  font-­‐weight:	
  700;	
  
}
#faq	
  .title{	
  
	
  	
  border-­‐bottom:	
  1px	
  solid	
  #000;	
  
	
  	
  padding:	
  1em;	
  
	
  	
  font-­‐size:	
  18px;	
  
	
  	
  font-­‐weight:	
  700;	
  
}
#news	
  h2{	
  
	
  	
  border-­‐bottom:	
  1px	
  solid	
  #000;	
  
	
  	
  padding:	
  1em;	
  
	
  	
  font-­‐size:	
  18px;	
  
	
  	
  font-­‐weight:	
  700;	
  
}
#faq	
  .title{	
  
	
  	
  border-­‐bottom:	
  1px	
  solid	
  #000;	
  
	
  	
  padding:	
  1em;	
  
	
  	
  font-­‐size:	
  18px;	
  
	
  	
  font-­‐weight:	
  700;	
  
}
#service	
  .feature	
  .title{	
  
	
  	
  border-­‐bottom:	
  1px	
  solid	
  #000;	
  
	
  	
  padding:	
  0.5em;	
  
	
  	
  font-­‐size:	
  16px;	
  
}
.column_2	
  #inbox	
  .list	
  {	
  ...	
  }	
  
.column_3	
  #inbox	
  .list	
  {	
  ...	
  }	
  
.column_3	
  #inbox	
  .list	
  .name	
  {	
  ...	
  }	
  
.column_3	
  #inbox	
  .list	
  .name	
  p	
  {	
  ...	
  }	
  
.column_3	
  #inbox	
  .list	
  .name.reply	
  {	
  ...	
  }	
  
.column_3	
  #inbox	
  .list	
  .name.reply	
  a	
  {	
  ...	
  }	
  
!
#top	
  .column_3	
  #inbox	
  .list.left	
  {	
  ...	
  }
!important
http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-matters/
糟了,是世界奇觀
Ctrl + a
!
del
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
– Nicole Sullivan
“We have been doing it all wrong…, 

Our (CSS) best practices are killing us! ”
http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
– hlb
“Code for system, Not for pages.”
https://speakerdeck.com/hlb/maintainable-css-with-sass-and-compass
良好的 CSS 架構
• 預測 - Predictable
• 複⽤用 - Reusable
• 維護 - Maintainable
• 延展 - Scalable
http://philipwalton.com/articles/css-architecture/
模組化	 
MODULAR CSS
Object
Oriented
CSS
OOCSS
OOCSS
Nicole Sullivan
http://www.slideshare.net/stubbornella/object-oriented-css
兩大原則
• Separate Structure and Skin
·•結構與外觀分離	 
• Separate Container and Content
·•容器與內容分離
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Media object
<div	
  class="media">	
  
	
  	
  <div	
  class="media-­‐img">	
  
	
  	
  	
  	
  <img	
  src="http://placehold.it/80x80"	
  alt="">	
  
	
  	
  </div>	
  
	
  	
  <div	
  class="media-­‐body">	
  
	
  	
  	
  	
  <p>...</p>	
  
	
  	
  </div>	
  
</div>
<div	
  class="media	
  media-­‐shadow">	
  
	
  	
  <div	
  class="media-­‐img">	
  
	
  	
  	
  	
  <img	
  src="http://placehold.it/80x80"	
  alt="">	
  
	
  	
  </div>	
  
	
  	
  <div	
  class="media-­‐body">	
  
	
  	
  	
  	
  <p>...</p>	
  
	
  	
  </div>	
  
</div>
<div	
  class="media	
  media-­‐no-­‐border”>	
  
	
  	
  <div	
  class="media-­‐img">	
  
	
  	
  	
  	
  <img	
  src="http://placehold.it/80x80"	
  alt="">	
  
	
  	
  </div>	
  
	
  	
  <div	
  class="media-­‐body">	
  
	
  	
  	
  	
  <p>...</p>	
  
	
  	
  </div>	
  
</div>
Scalable &
Modular
Architecture for
CSS
SMACSS
SMACSS
Jonathan Snook
http://smacss.com/
SMACSS
• Categorization
·•將結構分類	 
• Naming rules
·•命名規則	 
• Decoupling CSS from HTML
·•CSS	 與	 HTML	 分離
SMACSS Categories
• Base
• Layout
• Module
• State
• Theme
SMACSS - Base
• CSS Reset
• CSS Normalize
• There should be no need to use 

!important in a Base style.
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
SMACSS - Layout
https://speakerdeck.com/snookca/your
SMACSS - Layout
https://speakerdeck.com/snookca/your
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
SMACSS - Module
https://speakerdeck.com/snookca/your
SMACSS - Module
http://smacss.com/book/type-module
• ⾴頁⾯面上可單獨存在並且可重複使⽤用的元件
• 定義 Module 時應避免使⽤用 id 或標記名稱
做選擇器
• ⼦子模組以原模組名稱加 dash (-) 作為名稱

如: .mod-­‐header , .mod-­‐body
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
SMACSS - State
SMACSS - State
http://smacss.com/book/type-module
• 與 Layout, Module 搭配
• 表⽰示 Layout 或 Module 的狀態變化
• 由 class 定義
• 命名規則是 .is-* 開頭
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
<div	
  class="media	
  is-­‐box-­‐shadow”>	
  
	
  	
  <div	
  class="media-­‐img">	
  
	
  	
  	
  	
  <img	
  src="http://placehold.it/80x80"	
  alt="">	
  
	
  	
  </div>	
  
	
  	
  <div	
  class="media-­‐body">	
  
	
  	
  	
  	
  <p>...</p>	
  
	
  	
  </div>	
  
</div>
module class state
sub module
sub module
SMACSS - Theme
• 定義網站主視覺。
• 類似 Layout,但影響的是網站整體視覺
的變化。
• class 名稱通常以 .theme-* 做開頭
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
• Use class over ID.
• Use child selector. ( .menu > li > a )
• Apply a class when the HTML won’t
be predictable.
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
DECOUPLING CSS FROM HTML
CSS 與 HTML 分離
<div	
  class="media">	
  
	
  	
  	
  <img	
  src="http://placehold.it/80x80"	
  alt="">	
  
	
  	
  	
  <div>...</div>	
  
</div>	
  
!
<div	
  class="media">	
  
	
  	
  	
  <img	
  src="http://placehold.it/80x80"	
  alt="">	
  
	
  	
  	
  <p>...</p>	
  
</div>
!
.media	
  p,	
  .media	
  div,	
  .media	
  ……	
  {	
  ...	
  }	
  
!
!
.media	
  p,	
  .media	
  div,	
  .media	
  ul	
  {	
  ...	
  }	
  
!
.media-­‐body	
  {	
  ...	
  }	
  
<div	
  class="media	
  is-­‐box-­‐shadow”>	
  
	
  	
  <div	
  class="media-­‐img">	
  
	
  	
  	
  	
  <img	
  src="http://placehold.it/80x80"	
  alt="">	
  
	
  	
  </div>	
  
	
  	
  <div	
  class="media-­‐body">	
  
	
  	
  	
  	
  <p>...</p>	
  
	
  	
  </div>	
  
</div>
module class state
sub module
sub module
Block
Element
Modifier
BEM
http://bem.info/
BEM - Block
• 在⾴頁⾯面上獨⽴立存在並可重複使⽤用的元件
• 如同 SMACSS 的 Module, Layout
• 每個 Block 都是獨⽴立存在的
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
BEM - CSS 命名原則 (Block)
.button	
  
.text-­‐field	
  
.heading	
  
.menu
.b-­‐button	
  
.b-­‐text-­‐field	
  
.b-­‐heading	
  
.b-­‐menu
( prefix ⾮非必要)
BEM - Element
• 為 Block 的⼀一部份 (⼦子組件)
• 無法獨⽴立於 Block 之外
• 有些 Block 可能沒有 Element
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
BEM - CSS 命名原則 (Element)
.button__icon	
  
.text-­‐field__label	
  
.heading__title	
  
.menu__item
以 Block 名稱加上兩個底線 _ _ 作為 prefix
BEM - Modifier
• ⽤用來定義 Block 或 Element 

的狀態或屬性
• 類似 SMACSS 的 State
• 同⼀一個 Block 或 Element 可以允許多組
modifier 同時存在
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
BEM - CSS 命名原則 (Modifier)
.button_active	
  
.text-­‐field_editable	
  
.heading_align_top	
  
.menu__item_promo
以 Block 或 Element名稱加上⼀一個底線 _作為 prefix
<div	
  class="media	
  media_shadow">	
  
	
  	
  <div	
  class="media__img">	
  
	
  	
  	
  	
  <img	
  src="http://placehold.it/80x80"	
  alt="">	
  
	
  	
  </div>	
  
	
  	
  <div	
  class="media__body">	
  
	
  	
  	
  	
  <p>...</p>	
  
	
  	
  </div>	
  
</div>
Block Modifier
Element
Element
MindBEMding
• 改良版 BEM,由 Nicolas Gallagher 提出
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
.block	
  {	
  ...	
  }	
  
.block-­‐-­‐modifier	
  {	
  ...	
  }	
  
.block__element	
  	
  {	
  ...	
  }	
  
.block__element-­‐-­‐modifier	
  {	
  ...	
  }
良好的 CSS 架構
• 預測 - Predictable
• 複⽤用 - Reusable
• 維護 - Maintainable
• 延展 - Scalable
http://philipwalton.com/articles/css-architecture/
取其精華,去其糟粕
THANKS
Kuro Hsu
kurotanshi [at] gmail.com
http://kuro.tw
http://facebook.com/kurotanshi

More Related Content

What's hot

Lab#13 responsive web
Lab#13 responsive webLab#13 responsive web
Lab#13 responsive web
Yaowaluck Promdee
 
DataStax: A deep look at the CQL WHERE clause
DataStax: A deep look at the CQL WHERE clauseDataStax: A deep look at the CQL WHERE clause
DataStax: A deep look at the CQL WHERE clause
DataStax Academy
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
Good/Bad Web Design
Good/Bad Web DesignGood/Bad Web Design
Good/Bad Web Design
Yaowaluck Promdee
 
금융산업의 빅데이터 활용 및 이슈
금융산업의 빅데이터 활용 및 이슈금융산업의 빅데이터 활용 및 이슈
금융산업의 빅데이터 활용 및 이슈
메가트렌드랩 megatrendlab
 
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
Kentaro Yoshida
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
Ron Reiter
 
如何運用Bootstrap 切版?
如何運用Bootstrap 切版?如何運用Bootstrap 切版?
如何運用Bootstrap 切版?
shiang huang
 
Chapter 15: Floating and Positioning
Chapter 15: Floating and Positioning Chapter 15: Floating and Positioning
Chapter 15: Floating and Positioning
Steve Guinan
 
Intro to Jinja2 Templates - San Francisco Flask Meetup
Intro to Jinja2 Templates - San Francisco Flask MeetupIntro to Jinja2 Templates - San Francisco Flask Meetup
Intro to Jinja2 Templates - San Francisco Flask Meetup
Alan Hamlett
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
Jeanie Arnoco
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
Mind IT Systems
 
いまさら聞けないパスワードの取り扱い方
いまさら聞けないパスワードの取り扱い方いまさら聞けないパスワードの取り扱い方
いまさら聞けないパスワードの取り扱い方
Hiroshi Tokumaru
 
CQL - Cassandra commands Notes
CQL - Cassandra commands NotesCQL - Cassandra commands Notes
CQL - Cassandra commands Notes
Sunil Kumar Gunasekaran
 
AWS Black Belt Techシリーズ Amazon CloudFront
AWS Black Belt Techシリーズ Amazon CloudFrontAWS Black Belt Techシリーズ Amazon CloudFront
AWS Black Belt Techシリーズ Amazon CloudFront
Amazon Web Services Japan
 
Vectors are the new JSON in PostgreSQL
Vectors are the new JSON in PostgreSQLVectors are the new JSON in PostgreSQL
Vectors are the new JSON in PostgreSQL
Jonathan Katz
 
Amazon DynamoDB(初心者向け 超速マスター編)JAWSUG大阪
Amazon DynamoDB(初心者向け 超速マスター編)JAWSUG大阪Amazon DynamoDB(初心者向け 超速マスター編)JAWSUG大阪
Amazon DynamoDB(初心者向け 超速マスター編)JAWSUG大阪
崇之 清水
 
文字コードに起因する脆弱性とその対策(増補版)
文字コードに起因する脆弱性とその対策(増補版)文字コードに起因する脆弱性とその対策(増補版)
文字コードに起因する脆弱性とその対策(増補版)
Hiroshi Tokumaru
 
Css ppt
Css pptCss ppt
Css ppt
Nidhi mishra
 

What's hot (20)

Lab#13 responsive web
Lab#13 responsive webLab#13 responsive web
Lab#13 responsive web
 
DataStax: A deep look at the CQL WHERE clause
DataStax: A deep look at the CQL WHERE clauseDataStax: A deep look at the CQL WHERE clause
DataStax: A deep look at the CQL WHERE clause
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Good/Bad Web Design
Good/Bad Web DesignGood/Bad Web Design
Good/Bad Web Design
 
금융산업의 빅데이터 활용 및 이슈
금융산업의 빅데이터 활용 및 이슈금융산업의 빅데이터 활용 및 이슈
금융산업의 빅데이터 활용 및 이슈
 
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
如何運用Bootstrap 切版?
如何運用Bootstrap 切版?如何運用Bootstrap 切版?
如何運用Bootstrap 切版?
 
Chapter 15: Floating and Positioning
Chapter 15: Floating and Positioning Chapter 15: Floating and Positioning
Chapter 15: Floating and Positioning
 
Intro to Jinja2 Templates - San Francisco Flask Meetup
Intro to Jinja2 Templates - San Francisco Flask MeetupIntro to Jinja2 Templates - San Francisco Flask Meetup
Intro to Jinja2 Templates - San Francisco Flask Meetup
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
 
いまさら聞けないパスワードの取り扱い方
いまさら聞けないパスワードの取り扱い方いまさら聞けないパスワードの取り扱い方
いまさら聞けないパスワードの取り扱い方
 
CQL - Cassandra commands Notes
CQL - Cassandra commands NotesCQL - Cassandra commands Notes
CQL - Cassandra commands Notes
 
AWS Black Belt Techシリーズ Amazon CloudFront
AWS Black Belt Techシリーズ Amazon CloudFrontAWS Black Belt Techシリーズ Amazon CloudFront
AWS Black Belt Techシリーズ Amazon CloudFront
 
Vectors are the new JSON in PostgreSQL
Vectors are the new JSON in PostgreSQLVectors are the new JSON in PostgreSQL
Vectors are the new JSON in PostgreSQL
 
Amazon DynamoDB(初心者向け 超速マスター編)JAWSUG大阪
Amazon DynamoDB(初心者向け 超速マスター編)JAWSUG大阪Amazon DynamoDB(初心者向け 超速マスター編)JAWSUG大阪
Amazon DynamoDB(初心者向け 超速マスター編)JAWSUG大阪
 
文字コードに起因する脆弱性とその対策(増補版)
文字コードに起因する脆弱性とその対策(増補版)文字コードに起因する脆弱性とその対策(増補版)
文字コードに起因する脆弱性とその対策(増補版)
 
Css ppt
Css pptCss ppt
Css ppt
 

Similar to 漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例

Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
 
高效率的、可维护的Css
高效率的、可维护的Css高效率的、可维护的Css
高效率的、可维护的Css
simaopig
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
 
CSS 培训
CSS 培训CSS 培训
CSS 培训
S S
 
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Du Yamin
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
 
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
鍾誠 陳鍾誠
 
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練32016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
Duran Hsieh
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
 
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Design
jay li
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
jay li
 
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
 
Dive into Responsive Web Design
Dive into Responsive Web DesignDive into Responsive Web Design
Dive into Responsive Web Design
cncuckoo
 
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门
Xiujun Ma
 
fis
fisfis

Similar to 漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例 (20)

Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
 
高效率的、可维护的Css
高效率的、可维护的Css高效率的、可维护的Css
高效率的、可维护的Css
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
 
CSS 培训
CSS 培训CSS 培训
CSS 培训
 
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
 
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練32016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editor
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Design
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
 
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
 
Dive into Responsive Web Design
Dive into Responsive Web DesignDive into Responsive Web Design
Dive into Responsive Web Design
 
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServ
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门
 
CSS 菜鳥救星
CSS 菜鳥救星CSS 菜鳥救星
CSS 菜鳥救星
 
fis
fisfis
fis
 

Recently uploaded

【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識
【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識
【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識
Yen-lung Tsai
 
【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集
【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集
【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集
Yen-lung Tsai
 
【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API
【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API
【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API
Yen-lung Tsai
 
DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位
DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位
DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位
Edward Kuo
 
下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<
下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<
下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<
arrogancepchzxp
 
【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習
【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習
【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習
Yen-lung Tsai
 

Recently uploaded (6)

【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識
【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識
【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識
 
【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集
【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集
【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集
 
【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API
【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API
【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API
 
DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位
DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位
DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位
 
下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<
下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<
下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<
 
【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習
【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習
【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習
 

漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例