Submit Search
Upload
モダンなCSS設計パターンを考える
•
89 likes
•
16,018 views
拓樹 谷
Follow
HTML5 Conference 2013 "モダンなCSS設計パターンを考える" の一部を改変したQCon Tokyo 2014 版スライドです。
Read less
Read more
Design
Report
Share
Report
Share
1 of 120
Download now
Download to read offline
Recommended
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
Beyond CSS Architecture
Beyond CSS Architecture
拓樹 谷
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
拓樹 谷
Try Web Components
Try Web Components
拓樹 谷
Slow kinda sucks
Slow kinda sucks
Tim Wright
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
Todd Zaki Warfel
Rapid Prototyping
Rapid Prototyping
Even Wu
Recommended
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
Beyond CSS Architecture
Beyond CSS Architecture
拓樹 谷
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
拓樹 谷
Try Web Components
Try Web Components
拓樹 谷
Slow kinda sucks
Slow kinda sucks
Tim Wright
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
Todd Zaki Warfel
Rapid Prototyping
Rapid Prototyping
Even Wu
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Todd Zaki Warfel
Html5 ux london
Html5 ux london
Todd Zaki Warfel
Html5 intro
Html5 intro
Wilfred Nas
Html5 & CSS overview
Html5 & CSS overview
Ivan Frantar
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
UXPA International
Você precisa aprender Web
Você precisa aprender Web
Jean Carlo Emer
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
Estelle Weyl
Xlrays online web tutorials
Xlrays online web tutorials
Yogesh Gupta
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
Myles Braithwaite
Html22
Html22
passkalilo
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
HTML5 & CSS3 Flag
HTML5 & CSS3 Flag
Christopher Schmitt
Slicing the web
Slicing the web
Mohamad Hemmat
Real World Web Standards
Real World Web Standards
gleddy
Guia de-estudio-2
Guia de-estudio-2
59vallebenito
Critical Rendering Path
Critical Rendering Path
BarbaraFellner1
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Esteve Castells
CSS framework By Palash
CSS framework By Palash
PalashBajpai
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
Erin M. Kidwell
Akka-chan's Survival Guide for the Streaming World
Akka-chan's Survival Guide for the Streaming World
Konrad Malawski
7 key recipes for data engineering
7 key recipes for data engineering
univalence
More Related Content
What's hot
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Todd Zaki Warfel
Html5 ux london
Html5 ux london
Todd Zaki Warfel
Html5 intro
Html5 intro
Wilfred Nas
Html5 & CSS overview
Html5 & CSS overview
Ivan Frantar
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
UXPA International
Você precisa aprender Web
Você precisa aprender Web
Jean Carlo Emer
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
Estelle Weyl
Xlrays online web tutorials
Xlrays online web tutorials
Yogesh Gupta
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
Myles Braithwaite
Html22
Html22
passkalilo
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
HTML5 & CSS3 Flag
HTML5 & CSS3 Flag
Christopher Schmitt
Slicing the web
Slicing the web
Mohamad Hemmat
Real World Web Standards
Real World Web Standards
gleddy
Guia de-estudio-2
Guia de-estudio-2
59vallebenito
Critical Rendering Path
Critical Rendering Path
BarbaraFellner1
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Esteve Castells
CSS framework By Palash
CSS framework By Palash
PalashBajpai
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
Erin M. Kidwell
What's hot
(20)
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Html5 ux london
Html5 ux london
Html5 intro
Html5 intro
Html5 & CSS overview
Html5 & CSS overview
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Você precisa aprender Web
Você precisa aprender Web
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
Xlrays online web tutorials
Xlrays online web tutorials
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
Html22
Html22
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
HTML5 & CSS3 Flag
HTML5 & CSS3 Flag
Slicing the web
Slicing the web
Real World Web Standards
Real World Web Standards
Guia de-estudio-2
Guia de-estudio-2
Critical Rendering Path
Critical Rendering Path
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
CSS framework By Palash
CSS framework By Palash
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
Viewers also liked
Akka-chan's Survival Guide for the Streaming World
Akka-chan's Survival Guide for the Streaming World
Konrad Malawski
7 key recipes for data engineering
7 key recipes for data engineering
univalence
Preparing for distributed system failures using akka #ScalaMatsuri
Preparing for distributed system failures using akka #ScalaMatsuri
TIS Inc.
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
schoowebcampus
WebデザイナーのためのGit勉強会 ~準備編~
WebデザイナーのためのGit勉強会 ~準備編~
Satoshi Ebisawa
ゆるふわCSS3
ゆるふわCSS3
Mitsuru Ogawa
WebデザイナーによるWebデザイナーのためのマーケティング入門
WebデザイナーによるWebデザイナーのためのマーケティング入門
Miho Ishida
エコなWebデザイナーになろう
エコなWebデザイナーになろう
Yasuhisa Hasegawa
軽量マークアップ言語で気楽にマークアップ
軽量マークアップ言語で気楽にマークアップ
Tomohiko Himura
WEBデザイナー3年目を終えて
WEBデザイナー3年目を終えて
fujita_ryo
CSS設計のお勉強
CSS設計のお勉強
MarlboroLand
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
Satoshi Kikuchi
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
Masaya Ando
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル
Tomoyuki Arasuna
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
Viewers also liked
(20)
Akka-chan's Survival Guide for the Streaming World
Akka-chan's Survival Guide for the Streaming World
7 key recipes for data engineering
7 key recipes for data engineering
Preparing for distributed system failures using akka #ScalaMatsuri
Preparing for distributed system failures using akka #ScalaMatsuri
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WebデザイナーのためのGit勉強会 ~準備編~
WebデザイナーのためのGit勉強会 ~準備編~
ゆるふわCSS3
ゆるふわCSS3
WebデザイナーによるWebデザイナーのためのマーケティング入門
WebデザイナーによるWebデザイナーのためのマーケティング入門
エコなWebデザイナーになろう
エコなWebデザイナーになろう
軽量マークアップ言語で気楽にマークアップ
軽量マークアップ言語で気楽にマークアップ
WEBデザイナー3年目を終えて
WEBデザイナー3年目を終えて
CSS設計のお勉強
CSS設計のお勉強
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
CSS の歩き方
CSS の歩き方
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Similar to モダンなCSS設計パターンを考える
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Mario Heiderich
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
Erin M. Kidwell
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
raghavanp4
css.ppt
css.ppt
DakshPratapSingh1
css.ppt
css.ppt
Sana903754
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
TsungWei Hu
I pv6+at+caribbean+sector
I pv6+at+caribbean+sector
max Firmin
Introduction to web components
Introduction to web components
Marc Bächinger
IT1150CapstoneProjectFall2016TedCarr
IT1150CapstoneProjectFall2016TedCarr
Ted Carr
When dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniques
Wim Godden
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
偉格 高
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
MeetMagentoNY2014
Advanced CSS Troubleshooting
Advanced CSS Troubleshooting
Denise Jacobs
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Jenn Lukas
HTML CSS Best Practices
HTML CSS Best Practices
hoctudau
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
Denise Jacobs
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
Israel Blancas
关于 Html5 那点事
关于 Html5 那点事
Sofish Lin
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
Renato Iwashima
Class15
Class15
Jiyeon Lee
Similar to モダンなCSS設計パターンを考える
(20)
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
css.ppt
css.ppt
css.ppt
css.ppt
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
I pv6+at+caribbean+sector
I pv6+at+caribbean+sector
Introduction to web components
Introduction to web components
IT1150CapstoneProjectFall2016TedCarr
IT1150CapstoneProjectFall2016TedCarr
When dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniques
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
Advanced CSS Troubleshooting
Advanced CSS Troubleshooting
Making Links Magical Again with CSS
Making Links Magical Again with CSS
HTML CSS Best Practices
HTML CSS Best Practices
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
关于 Html5 那点事
关于 Html5 那点事
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
Class15
Class15
More from 拓樹 谷
CSS設計の理想と現実
CSS設計の理想と現実
拓樹 谷
Why Sass?
Why Sass?
拓樹 谷
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
CSS Components
CSS Components
拓樹 谷
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
拓樹 谷
High Performance Webdesign
High Performance Webdesign
拓樹 谷
Thinking about CSS Architecture
Thinking about CSS Architecture
拓樹 谷
More from 拓樹 谷
(7)
CSS設計の理想と現実
CSS設計の理想と現実
Why Sass?
Why Sass?
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
CSS Components
CSS Components
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
High Performance Webdesign
High Performance Webdesign
Thinking about CSS Architecture
Thinking about CSS Architecture
Recently uploaded
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
Rndexperts
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
yuu sss
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
yuj
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
WilliamVickery6
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
208367051
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
z xss
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
neelspinoy
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
Anastasiya Kudinova
Call Girls Meghani Nagar 7397865700 Independent Call Girls
Call Girls Meghani Nagar 7397865700 Independent Call Girls
ssuser7cb4ff
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
208367051
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
dollysharma2066
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
Shivakumar Viswanathan
定制(RMIT毕业证书)澳洲墨尔本皇家理工大学毕业证成绩单原版一比一
定制(RMIT毕业证书)澳洲墨尔本皇家理工大学毕业证成绩单原版一比一
lvtagr7
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Site
galleryaagency
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
dollysharma2066
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
mapanig881
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
kojalkojal131
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
F La
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
Aginakm1
Recently uploaded
(20)
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
Call Girls Meghani Nagar 7397865700 Independent Call Girls
Call Girls Meghani Nagar 7397865700 Independent Call Girls
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
定制(RMIT毕业证书)澳洲墨尔本皇家理工大学毕业证成绩单原版一比一
定制(RMIT毕业证书)澳洲墨尔本皇家理工大学毕业证成绩单原版一比一
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Site
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
モダンなCSS設計パターンを考える
1.
QCon Tokyo 2014
Conference Modern CSS Architecture Hiroki Tani モダンなCSS設計パターンを考える
2.
Hiroki Tani Front-end Engineer CyberAgent,
Inc.
3.
?Why Architecture
4.
5.
6.
7.
#news h2 {
border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; }
8.
#news h2 {
border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; } ! #faq .title { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; }
9.
#news h2 {
border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; } ! #faq .title { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; } ! #service .feature .title { border: 1px solid black; padding: 0.5em; font-size: 16px; }
10.
.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 { ... } body#top .column_3 #inbox .list.left { ... }
11.
!important
12.
13.
14.
15.
Goals of Better
CSS Architecture -Predictable -Reusable -Maintainable -Scalable http://article.enja.io/articles/css-architecture.html 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい
16.
Modular CSS
17.
OOCSS Nicole Sullivan https://github.com/stubbornella/oocss/wiki
18.
19.
20.
21.
22.
OOCSS -Separate structure and
skin -Separate container and content 構造と見た目の分離 コンテナとコンテンツの分離
23.
Media object
24.
<div class="media"> <div
class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
25.
<div class="media"> <div
class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
26.
<div class="media"> <div
class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
27.
.media { /*
Clearfix */ } .media-image { float: left; margin-right: 10px; } .media-image > img { display: block; } .media-body { overflow: hidden; }
28.
<div class="media skin-a">
<div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
29.
<div class="media skin-b">
<div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
30.
?How to build
modules
31.
It depends.
32.
Rule of Three ‘Refactoring’ http://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)
33.
3, 6
34.
3, 6, 9,
12, 15 ...
35.
3, 6, 12,
24, 48 ...
36.
3, 6, 9
37.
3, 6, 9,
12, 15 ...
38.
39.
.fontSize10 { font-size:
10px } .colorRed { color: red }
40.
<p class="fontSize18 colorRed"> 入力内容に誤りがあります。 </p>
41.
<p class="box radius10
fontSize18 colorRed"> 入力内容に誤りがあります。 </p>
42.
.fontSize18 { font-size:
18px }
43.
.fontSize18 { font-size:
18px } ! @media only screen and (max-width : 320px) { .fontSize18 { font-size: 14px } } ⚠
44.
.colorRed { color:
red }
45.
.colorRed { color:
orange; } ⚠
46.
.colorRed { color:
orange; /* あとで直す */ } ⚠
47.
⚠
48.
?How to maintain
modules
49.
SMACSS Jonathan Snook http://smacss.com/ja 日本語、あります
50.
SMACSS -Categorization -Naming Convention -Decoupling CSS
from HTML カテゴライズ 命名規則 HTMLとCSSの分離
51.
SMACSS Categories -Base -Layout -Module -State -Theme
52.
/* # Base
*/ body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }
53.
/* # Layout
*/ #header { width: 960px; margin: auto; } .l-article { border: solid #CCC; border-width: 1px 0 0; } .l-grid { margin: 0; padding: 0; list-style-type: none; } .l-grid > li { display: inline-block; margin: 0 0 10px 10px; }
54.
/* # State
*/ .is-hidden { display: none; } .is-error { font-weight: bold; color: red; } .is-tab-active { border-bottom-color: transparent; }
55.
/* # Theme
*/ /* ## Spring Theme CSS */ .theme-header { background-image: url("/theme/spring/ header.png"); } .theme-border { 1px solid pink; }
56.
57.
Message-box http://cdpn.io/hKBkm
58.
<div class="msg"> <p>...</p> </div> .msg { display:
block; border: 1px solid #cccccc; border-radius: 8px; padding: 1em; background-color: #efefef; color: #333333; }
59.
60.
<div class="msg msg-error"> <p>...</p> </div> .msg
{ ... } .msg-error { border: 1px solid #c0392b; background-color: #fe9282; }
61.
62.
<div class="msg msg-success"> <p>...</p> </div> .msg
{ ... } .msg-success { border: 1px solid #27ae60; background-color: #99f3c9; }
63.
64.
<div class="msg msg-error"> <h2>...</h2> <p>...</p> </div>
65.
<div class="msg msg-error"> <h2>...</h2> <p>...</p> </div> .msg
h2 { font-size: inherit; font-weight: bold; } ! .msg p { margin-top: 0.6em; }
66.
67.
.msg h2 { font-size:
inherit; font-weight: bold; } ! .msg ul, .msg p { margin-top: 0.6em; } ⚠
68.
<div class="msg msg-error"> <h2
class="msg-title"> ... </h2> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
69.
.msg-title { font-size: inherit; font-weight:
bold; } ! .msg-body { margin-top: 0.6em; }
70.
<div class="msg msg-error"> <p
class="msg-title"> ... </p> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
71.
72.
<div class="msg msg-error"> <h2
class="msg-title"> <i class="msg-title-icon ico ico-label ico-alert"></i> ... </h2> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
73.
.msg-title-icon { vertical-align: -0.3em; } ! .ico
{ display: inline-block; } ! .ico-alert { background-image: url(...); width: 24px; height: 24px; } ! .ico-label { margin-right: 0.3em; }
74.
%ico { display: inline-block; } ! %ico-alert
{ background-image: url(...); width: 24px; height: 24px; } ! %ico-label { margin-right: 0.3em; } ! .msg-error-icon { vertical-align: -0.3em; @extend %ico; @extend %ico-alert; @extend %ico-label; }
75.
76.
! .msg-error { border: 1px
solid #c0392b; background-color: #fe9282; }
77.
78.
.msg-title { font-size: inherit; font-weight:
bold; } .msg-body { margin-top: 0.6em; }
79.
.msg { ... } .msg-error { border:
1px solid #c0392b; background-color: #fe9282; } .msg-title { font-size: inherit; font-weight: bold; }
80.
BEM Yandex http://bem.info/
81.
BEM stands for
... -Block -Element -Modifier
82.
Block
83.
Element
84.
Modifier
85.
.block { ... } .block__element
{ ... } .block_modifier { ... } .block__element_modifier { ... }
86.
.nav { ... } .nav__item
{ ... } .nav_segmented { ... } .nav__item_segmented { ... }
87.
.nav { ... } .nav__item
{ ... } .nav--segmented { ... } .nav__item--segmented { ... } http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
88.
.msg { ... } .msg--error { border:
1px solid #c0392b; background-color: #fe9282; }
89.
.msg__title { font-size: inherit; font-weight:
bold; } .msg__body { margin-top: 0.6em; } .msg__title-icon { vertical-align: -0.3em; }
90.
MCSS -Base -Project -cosmetic http://operatino.github.io/MCSS/en/
91.
FLOCSS -Foundation -Layout -Object https://github.com/hiloki/flocss -Component -Project -Utility
92.
93.
Front-end Styleguide
94.
Starbucks Style Guide http://www.starbucks.com/static/reference/styleguide/
95.
MailChimp Pattern Library http://ux.mailchimp.com/patterns/
96.
Twitter Bootstrap http://getbootstrap.com
97.
A Pattern Apart http://patterns.alistapart.com/
98.
http://alistapart.com/blog/post/getting-started-with-pattern-libraries Code Example view
99.
http://alistapart.com/blog/post/getting-started-with-pattern-libraries Patchwork view
100.
Front-end Styleguide
101.
Front-end Styleguide Living
102.
103.
KSS http://warpspire.com/kss/styleguides/
104.
Kalei http://kaleistyleguide.com/
105.
StyleDocco http://jacobrask.github.io/styledocco/
106.
// // # 見出し // //
説明文を書きます。マークダウン形式です。 // // ``` // <button type="button" class="btn btn-default"> // ``` で囲んだ部分にデモのHTMLを記述します。 // </button> // ``` ! .btn { display: inline-block; ... &:hover, &:focus { color: @btn-default-color; text-decoration: none; } }
107.
$ styledocco -n
"ProjectName" css/ $ styledocco -n "ProjectName" -o "mydocs" $ styledocco -n "ProjectName" --preprocessor "lessc" less/
108.
http://d.pr/v/46BF
109.
110.
⚏🎬 👤👤 ⚏🎬 👤 Building
Pages Systems
111.
Styleguide Driven Development http://www.stubbornella.org/content/2014/04/09/style-guide-driven-development/
112.
Developer vs Designer
?
113.
⚏🎬 👤👤
114.
Developer with Designer
115.
Best Practice
116.
Best Practices
117.
どんなに多くの人が貢献したとしても どのコードも一人で書いたようにする https://github.com/necolas/idiomatic-css - Idiomatic CSS All
code in any code-base should look like a single person typed it, even when many people are contributing to it. “ ”
118.
壊れない完璧な設計を求めるのではなく 壊れたときに勇気をもって修復できる設計を “ ” - Anonymous
119.
Thanks. - twitter.com/hiloki - inkdesign.jp -
slideshare.net/hiloki
120.
Photo credit - http://www.flickr.com/photos/bpotstra/3490333174/sizes/l/ -
http://www.flickr.com/photos/bettybroadbent/3704523854/sizes/o/ - http://www.flickr.com/photos/drewmaughan/8209503226/sizes/l/ - http://www.flickr.com/photos/biodork/6849406792/ - http://www.flickr.com/photos/43266097@N03/9444574320/sizes/l/ - http://www.flickr.com/photos/90585146@N08/8234225693/sizes/l/ - http://www.flickr.com/photos/lwr/6778863776/sizes/l/ - http://www.flickr.com/photos/jezpage/4696962046/ - http://www.flickr.com/photos/april-mo/8485249298/sizes/l/ - http://www.flickr.com/photos/4st4roth/2366615948/ - http://www.flickr.com/photos/sharman/4570412801/sizes/l/ - http://www.flickr.com/photos/kaptainkobold/3771497484/ - http://www.flickr.com/photos/laurie_pink/2549598674/sizes/l/ - http://www.flickr.com/photos/dansdata/3266946102/ - http://www.flickr.com/photos/ochre_jelly/6839227477/sizes/l/ - http://www.flickr.com/photos/in-duce/2232109985/sizes/o/ - http://www.flickr.com/photos/pgoyette/5911926699/sizes/z/ - http://www.flickr.com/photos/conradoplg/10091603396/sizes/l/ - http://www.flickr.com/photos/kaptainkobold/4441509147/sizes/l/
Download now