SlideShare a Scribd company logo

如何逐步提升CSS的可利用性、模組化

1 of 74
Download to read offline
如何逐步提升CSS的可利用性、模組化
講者:廖洧杰
高雄前端社群#1
社群創立緣起
在高雄
沒有管道交流..Orz
1. 各瀏覽器 CSS BUG
2. 元素排版對齊
3. know how (Z-index、menu)
4. 標準網頁排版流程
5. 支援的第三方程式
6. 提升排版效率、模組化
7. 與工程師合作的細節
8. 數百項族繁不及備載..
過了五年後..
還是沒有!

Recommended

現代化網頁基礎排版技術
現代化網頁基礎排版技術現代化網頁基礎排版技術
現代化網頁基礎排版技術洧杰 廖
 
Vertical rhythm
Vertical rhythmVertical rhythm
Vertical rhythm洧杰 廖
 
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例Kuro Hsu
 
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop洧杰 廖
 
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop洧杰 廖
 
自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!洧杰 廖
 
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享wantingj
 
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013Adam Wang
 

More Related Content

What's hot

SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS Zhu Qi
 
網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架Vincent Chi
 
網頁開發工具 20140630
網頁開發工具 20140630網頁開發工具 20140630
網頁開發工具 20140630Yeh Yung-Hsin
 
2011新版首页总结 技术篇
2011新版首页总结 技术篇2011新版首页总结 技术篇
2011新版首页总结 技术篇传贵 谢
 
Style基础优化之独角兽篇
Style基础优化之独角兽篇Style基础优化之独角兽篇
Style基础优化之独角兽篇fangdeng
 
教網部落格模版設計
教網部落格模版設計教網部落格模版設計
教網部落格模版設計rainlan
 
Introduction to CSS Framwork
Introduction to CSS FramworkIntroduction to CSS Framwork
Introduction to CSS FramworkTechParty@UIC
 
老成的Sass&Compass
老成的Sass&Compass老成的Sass&Compass
老成的Sass&Compass智遠 成
 
從CSS到SASS的開發旅程
從CSS到SASS的開發旅程從CSS到SASS的開發旅程
從CSS到SASS的開發旅程Anna Su
 
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日twMVC
 
Flexbox版面配置
Flexbox版面配置Flexbox版面配置
Flexbox版面配置景智 張
 
史前的Ssjs——从js的asp到node js
史前的Ssjs——从js的asp到node js史前的Ssjs——从js的asp到node js
史前的Ssjs——从js的asp到node jsFrank Cheung
 
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)百範 陳
 
支付宝CSS构架
支付宝CSS构架支付宝CSS构架
支付宝CSS构架Sofish Lin
 
Asp.net on windows azure cloud service (updated)
Asp.net on windows azure cloud service (updated)Asp.net on windows azure cloud service (updated)
Asp.net on windows azure cloud service (updated)Jeff Chu
 
Alice库构建
Alice库构建Alice库构建
Alice库构建Sofish Lin
 

What's hot (20)

SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS
 
網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架
 
SASS入門實作
SASS入門實作SASS入門實作
SASS入門實作
 
網頁開發工具 20140630
網頁開發工具 20140630網頁開發工具 20140630
網頁開發工具 20140630
 
2011新版首页总结 技术篇
2011新版首页总结 技术篇2011新版首页总结 技术篇
2011新版首页总结 技术篇
 
Semantic ui教學
Semantic ui教學Semantic ui教學
Semantic ui教學
 
Style基础优化之独角兽篇
Style基础优化之独角兽篇Style基础优化之独角兽篇
Style基础优化之独角兽篇
 
教網部落格模版設計
教網部落格模版設計教網部落格模版設計
教網部落格模版設計
 
Introduction to CSS Framwork
Introduction to CSS FramworkIntroduction to CSS Framwork
Introduction to CSS Framwork
 
老成的Sass&Compass
老成的Sass&Compass老成的Sass&Compass
老成的Sass&Compass
 
從CSS到SASS的開發旅程
從CSS到SASS的開發旅程從CSS到SASS的開發旅程
從CSS到SASS的開發旅程
 
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
 
Flexbox版面配置
Flexbox版面配置Flexbox版面配置
Flexbox版面配置
 
史前的Ssjs——从js的asp到node js
史前的Ssjs——从js的asp到node js史前的Ssjs——从js的asp到node js
史前的Ssjs——从js的asp到node js
 
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
 
支付宝CSS构架
支付宝CSS构架支付宝CSS构架
支付宝CSS构架
 
Asp.net on windows azure cloud service (updated)
Asp.net on windows azure cloud service (updated)Asp.net on windows azure cloud service (updated)
Asp.net on windows azure cloud service (updated)
 
Alice库构建
Alice库构建Alice库构建
Alice库构建
 
響應式網頁教學
響應式網頁教學響應式網頁教學
響應式網頁教學
 
CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法
 

Viewers also liked

一拳前端考題
一拳前端考題一拳前端考題
一拳前端考題洧杰 廖
 
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程洧杰 廖
 
Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃洧杰 廖
 
前端開發流程分享
前端開發流程分享前端開發流程分享
前端開發流程分享洧杰 廖
 
那些年,我們曾經做過的wireframe、mockup、prototype
那些年,我們曾經做過的wireframe、mockup、prototype那些年,我們曾經做過的wireframe、mockup、prototype
那些年,我們曾經做過的wireframe、mockup、prototype洧杰 廖
 
CP 值很高的 Gulp
CP 值很高的 GulpCP 值很高的 Gulp
CP 值很高的 GulpYvonne Yu
 
HTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 appHTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 appBen Lue
 
Apache cordova 開發環境建置
Apache cordova 開發環境建置Apache cordova 開發環境建置
Apache cordova 開發環境建置My own sweet home!
 
Show Me The Page - 介紹 Critical rendering path
Show Me The Page - 介紹 Critical rendering pathShow Me The Page - 介紹 Critical rendering path
Show Me The Page - 介紹 Critical rendering pathYvonne Yu
 
透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)Justin Wu
 
React基礎教學
React基礎教學React基礎教學
React基礎教學昇倫 蔡
 
Sass-Front-End Developers Taiwan Party - 5
Sass-Front-End Developers Taiwan Party - 5Sass-Front-End Developers Taiwan Party - 5
Sass-Front-End Developers Taiwan Party - 5洧杰 廖
 
Android gradle 从入门到gg 0
Android gradle 从入门到gg 0Android gradle 从入门到gg 0
Android gradle 从入门到gg 0Jun Liu
 
IBM云咨询服务介绍 温海峰
IBM云咨询服务介绍   温海峰IBM云咨询服务介绍   温海峰
IBM云咨询服务介绍 温海峰Hardway Hou
 
Patterns of Expertise in Cloud 云计算中的专家模式 QCon 2014 北京
Patterns of Expertise in Cloud 云计算中的专家模式 QCon 2014 北京Patterns of Expertise in Cloud 云计算中的专家模式 QCon 2014 北京
Patterns of Expertise in Cloud 云计算中的专家模式 QCon 2014 北京Li Yi
 
VR and AR: 2016, 2020, and 2025
VR and AR: 2016, 2020, and 2025VR and AR: 2016, 2020, and 2025
VR and AR: 2016, 2020, and 2025Jesse Schell
 
AR擴增實境簡介與案例分享
AR擴增實境簡介與案例分享AR擴增實境簡介與案例分享
AR擴增實境簡介與案例分享Ellis Wu
 
Git 實務圖解
Git 實務圖解Git 實務圖解
Git 實務圖解Pokai Chang
 

Viewers also liked (20)

一拳前端考題
一拳前端考題一拳前端考題
一拳前端考題
 
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
 
Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃
 
前端開發流程分享
前端開發流程分享前端開發流程分享
前端開發流程分享
 
那些年,我們曾經做過的wireframe、mockup、prototype
那些年,我們曾經做過的wireframe、mockup、prototype那些年,我們曾經做過的wireframe、mockup、prototype
那些年,我們曾經做過的wireframe、mockup、prototype
 
CP 值很高的 Gulp
CP 值很高的 GulpCP 值很高的 Gulp
CP 值很高的 Gulp
 
HTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 appHTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 app
 
Apache cordova 開發環境建置
Apache cordova 開發環境建置Apache cordova 開發環境建置
Apache cordova 開發環境建置
 
Show Me The Page - 介紹 Critical rendering path
Show Me The Page - 介紹 Critical rendering pathShow Me The Page - 介紹 Critical rendering path
Show Me The Page - 介紹 Critical rendering path
 
透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)
 
React基礎教學
React基礎教學React基礎教學
React基礎教學
 
Sass-Front-End Developers Taiwan Party - 5
Sass-Front-End Developers Taiwan Party - 5Sass-Front-End Developers Taiwan Party - 5
Sass-Front-End Developers Taiwan Party - 5
 
Android gradle 从入门到gg 0
Android gradle 从入门到gg 0Android gradle 从入门到gg 0
Android gradle 从入门到gg 0
 
IBM云咨询服务介绍 温海峰
IBM云咨询服务介绍   温海峰IBM云咨询服务介绍   温海峰
IBM云咨询服务介绍 温海峰
 
Patterns of Expertise in Cloud 云计算中的专家模式 QCon 2014 北京
Patterns of Expertise in Cloud 云计算中的专家模式 QCon 2014 北京Patterns of Expertise in Cloud 云计算中的专家模式 QCon 2014 北京
Patterns of Expertise in Cloud 云计算中的专家模式 QCon 2014 北京
 
Vuejs testing
Vuejs testingVuejs testing
Vuejs testing
 
Git由超淺入超深
Git由超淺入超深Git由超淺入超深
Git由超淺入超深
 
VR and AR: 2016, 2020, and 2025
VR and AR: 2016, 2020, and 2025VR and AR: 2016, 2020, and 2025
VR and AR: 2016, 2020, and 2025
 
AR擴增實境簡介與案例分享
AR擴增實境簡介與案例分享AR擴增實境簡介與案例分享
AR擴增實境簡介與案例分享
 
Git 實務圖解
Git 實務圖解Git 實務圖解
Git 實務圖解
 

Similar to 如何逐步提升CSS的可利用性、模組化

淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题 Lumend
 
Mobile web開發架構與入門
Mobile web開發架構與入門Mobile web開發架構與入門
Mobile web開發架構與入門Chi-wen Sun
 
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)Adam Wang
 
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3taobao.com
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪小 米猪
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较Adam Lu
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 
Css schema by_sofish
Css schema by_sofishCss schema by_sofish
Css schema by_sofishWebrebuild
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型裕波 周
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsChieh Lin
 
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
2013 05 同業分享會 米蘭數位 奶綠茶 createJS2013 05 同業分享會 米蘭數位 奶綠茶 createJS
2013 05 同業分享會 米蘭數位 奶綠茶 createJS綠茶 奶
 
ExtJs & Lk web template5e6 (1hr)
ExtJs & Lk web template5e6 (1hr)ExtJs & Lk web template5e6 (1hr)
ExtJs & Lk web template5e6 (1hr)慧鴻 陳
 
Csdn Java电子杂志第1期
Csdn Java电子杂志第1期Csdn Java电子杂志第1期
Csdn Java电子杂志第1期yiditushe
 
Java Web框架汇总
Java Web框架汇总Java Web框架汇总
Java Web框架汇总yiditushe
 
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔Chih-cheng Wang
 
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹Ying-Chun Cheng
 
淘宝网前端应用与发展
淘宝网前端应用与发展淘宝网前端应用与发展
淘宝网前端应用与发展taobao.com
 
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServBen Lue
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Jollen Chen
 
css框架研究
css框架研究css框架研究
css框架研究chandleryu
 

Similar to 如何逐步提升CSS的可利用性、模組化 (20)

淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题
 
Mobile web開發架構與入門
Mobile web開發架構與入門Mobile web開發架構與入門
Mobile web開發架構與入門
 
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
 
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
Css schema by_sofish
Css schema by_sofishCss schema by_sofish
Css schema by_sofish
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
 
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
2013 05 同業分享會 米蘭數位 奶綠茶 createJS2013 05 同業分享會 米蘭數位 奶綠茶 createJS
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
 
ExtJs & Lk web template5e6 (1hr)
ExtJs & Lk web template5e6 (1hr)ExtJs & Lk web template5e6 (1hr)
ExtJs & Lk web template5e6 (1hr)
 
Csdn Java电子杂志第1期
Csdn Java电子杂志第1期Csdn Java电子杂志第1期
Csdn Java电子杂志第1期
 
Java Web框架汇总
Java Web框架汇总Java Web框架汇总
Java Web框架汇总
 
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
 
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
 
淘宝网前端应用与发展
淘宝网前端应用与发展淘宝网前端应用与发展
淘宝网前端应用与发展
 
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServ
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
 
css框架研究
css框架研究css框架研究
css框架研究
 

如何逐步提升CSS的可利用性、模組化