Soumettre la recherche
Mettre en ligne
モダンなCSS設計パターンを考える
•
89 j'aime
•
16,016 vues
拓樹 谷
Suivre
HTML5 Conference 2013 "モダンなCSS設計パターンを考える" の一部を改変したQCon Tokyo 2014 版スライドです。
Lire moins
Lire la suite
Design
Signaler
Partager
Signaler
Partager
1 sur 120
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
モダンな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
Contenu connexe
Tendances
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
Tendances
(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
En vedette
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
En vedette
(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デザインガイドライン
Similaire à モダンな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
css.ppt
css.ppt
Sana903754
css.ppt
css.ppt
DakshPratapSingh1
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
Bem methodology
Bem methodology
Andrew Rota
Similaire à モダンな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
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
Bem methodology
Bem methodology
Plus de 拓樹 谷
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
拓樹 谷
Plus de 拓樹 谷
(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
Dernier
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
kenzukiri
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
Alan Dix
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Ted Drake
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
SamKuruvilla5
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
Cre8iveskill
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
khushisharma298853
Construction Documents Checklist before Construction
Construction Documents Checklist before Construction
ResDraft
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
HctorFranciscoSnchez1
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
Hasan S
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
Block Party
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
b2kshani34
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
saidbilgen
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Ed Orozco
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
Think 360 Studio
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
TeeFusion
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
mikailaoh
Embroidery design from embroidery magazine
Embroidery design from embroidery magazine
RivanEleraki
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Amil baba
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
jakyjhon00
Dernier
(19)
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
Construction Documents Checklist before Construction
Construction Documents Checklist before Construction
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
Embroidery design from embroidery magazine
Embroidery design from embroidery magazine
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
モダンなCSS設計パターンを考える
1.
QCon Tokyo 2014
Conference Modern CSS Architecture Hiroki Tani モダンなCSS設計パターンを考える
2.
Hiroki Tani Front-end Engineer CyberAgent,
Inc.
3.
?Why Architecture
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
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
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 ...
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; }
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; }
60.
<div class="msg msg-error"> <p>...</p> </div> .msg
{ ... } .msg-error { border: 1px solid #c0392b; background-color: #fe9282; }
62.
<div class="msg msg-success"> <p>...</p> </div> .msg
{ ... } .msg-success { border: 1px solid #27ae60; background-color: #99f3c9; }
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; }
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>
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; }
76.
! .msg-error { border: 1px
solid #c0392b; background-color: #fe9282; }
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
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
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
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/
Télécharger maintenant