Submit Search
Upload
モダンなCSS設計パターンを考える
•
148 likes
•
42,935 views
拓樹 谷
Follow
HTML5 Conference 2013 "モダンなCSS設計パターンを考える" のセッションスライドです。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 128
Download now
Download to read offline
Recommended
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
Beyond CSS Architecture
Beyond CSS Architecture
拓樹 谷
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
拓樹 谷
High Performance Webdesign
High Performance Webdesign
拓樹 谷
Try Web Components
Try Web Components
拓樹 谷
Html5 intro
Html5 intro
Wilfred Nas
Rapid Prototyping
Rapid Prototyping
Even Wu
Xlrays online web tutorials
Xlrays online web tutorials
Yogesh Gupta
Recommended
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
Beyond CSS Architecture
Beyond CSS Architecture
拓樹 谷
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
拓樹 谷
High Performance Webdesign
High Performance Webdesign
拓樹 谷
Try Web Components
Try Web Components
拓樹 谷
Html5 intro
Html5 intro
Wilfred Nas
Rapid Prototyping
Rapid Prototyping
Even Wu
Xlrays online web tutorials
Xlrays online web tutorials
Yogesh Gupta
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
Stephen Hay
Dorothea orem-theory
Dorothea orem-theory
Ramlah12041991
I pv6+at+caribbean+sector
I pv6+at+caribbean+sector
max Firmin
Html22
Html22
passkalilo
Guia de-estudio-2
Guia de-estudio-2
59vallebenito
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
Erin M. Kidwell
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Esteve Castells
Haml, Sass & Compass
Haml, Sass & Compass
László Bácsi
A More Perfect Union with CSS
A More Perfect Union with CSS
Christopher Schmitt
Capitulo 3-enegia-y-conservacion-de-masas
Capitulo 3-enegia-y-conservacion-de-masas
wanda i sanchez trinidad
Introducing YUI
Introducing YUI
Christian Heilmann
Plone Interactivity
Plone Interactivity
Eric Steele
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
Myles Braithwaite
WordCamp Bari 2019
WordCamp Bari 2019
Stefano Minoia
Nanoformats
Nanoformats
rozario
Hardcore HTML
Hardcore HTML
PDX Web & Design
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Patrick Lauke
Espacios en-tu-vida
Espacios en-tu-vida
epacheco1
10 Things Web Designers tend to forget when doing SEO
10 Things Web Designers tend to forget when doing SEO
Timon Hartung
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
Timon Hartung
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
TsungWei Hu
Introduction to web components
Introduction to web components
Marc Bächinger
More Related Content
What's hot
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
Stephen Hay
Dorothea orem-theory
Dorothea orem-theory
Ramlah12041991
I pv6+at+caribbean+sector
I pv6+at+caribbean+sector
max Firmin
Html22
Html22
passkalilo
Guia de-estudio-2
Guia de-estudio-2
59vallebenito
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
Erin M. Kidwell
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Esteve Castells
Haml, Sass & Compass
Haml, Sass & Compass
László Bácsi
A More Perfect Union with CSS
A More Perfect Union with CSS
Christopher Schmitt
Capitulo 3-enegia-y-conservacion-de-masas
Capitulo 3-enegia-y-conservacion-de-masas
wanda i sanchez trinidad
Introducing YUI
Introducing YUI
Christian Heilmann
Plone Interactivity
Plone Interactivity
Eric Steele
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
Myles Braithwaite
WordCamp Bari 2019
WordCamp Bari 2019
Stefano Minoia
Nanoformats
Nanoformats
rozario
Hardcore HTML
Hardcore HTML
PDX Web & Design
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Patrick Lauke
Espacios en-tu-vida
Espacios en-tu-vida
epacheco1
10 Things Web Designers tend to forget when doing SEO
10 Things Web Designers tend to forget when doing SEO
Timon Hartung
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
Timon Hartung
What's hot
(20)
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
Dorothea orem-theory
Dorothea orem-theory
I pv6+at+caribbean+sector
I pv6+at+caribbean+sector
Html22
Html22
Guia de-estudio-2
Guia de-estudio-2
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Haml, Sass & Compass
Haml, Sass & Compass
A More Perfect Union with CSS
A More Perfect Union with CSS
Capitulo 3-enegia-y-conservacion-de-masas
Capitulo 3-enegia-y-conservacion-de-masas
Introducing YUI
Introducing YUI
Plone Interactivity
Plone Interactivity
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
WordCamp Bari 2019
WordCamp Bari 2019
Nanoformats
Nanoformats
Hardcore HTML
Hardcore HTML
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Espacios en-tu-vida
Espacios en-tu-vida
10 Things Web Designers tend to forget when doing SEO
10 Things Web Designers tend to forget when doing SEO
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
Similar to モダンなCSS設計パターンを考える
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
TsungWei Hu
Introduction to web components
Introduction to web components
Marc Bächinger
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
Critical Rendering Path
Critical Rendering Path
BarbaraFellner1
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
Renato Iwashima
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
UXPA International
Slow kinda sucks
Slow kinda sucks
Tim Wright
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
Erin M. Kidwell
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
MeetMagentoNY2014
SMACSS Workshop
SMACSS Workshop
Tim Hettler
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
偉格 高
When dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniques
Wim Godden
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
raghavanp4
css.ppt
css.ppt
DakshPratapSingh1
css.ppt
css.ppt
Sana903754
HTML CSS Best Practices
HTML CSS Best Practices
hoctudau
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
beyond tellerrand
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
Coulawrence
Polymer - El fin a tus problemas con el FrontEnd
Polymer - El fin a tus problemas con el FrontEnd
Israel Blancas
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
Israel Blancas
Similar to モダンなCSS設計パターンを考える
(20)
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
Introduction to web components
Introduction to web components
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-...
Critical Rendering Path
Critical Rendering Path
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Slow kinda sucks
Slow kinda sucks
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
SMACSS Workshop
SMACSS Workshop
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
When dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniques
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
css.ppt
css.ppt
css.ppt
css.ppt
HTML CSS Best Practices
HTML CSS Best Practices
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
Polymer - El fin a tus problemas con el FrontEnd
Polymer - El fin a tus problemas con el FrontEnd
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
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
拓樹 谷
Thinking about CSS Architecture
Thinking about CSS Architecture
拓樹 谷
More from 拓樹 谷
(6)
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
Thinking about CSS Architecture
Thinking about CSS Architecture
Recently uploaded
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
Evaluating the top large language models.pdf
Evaluating the top large language models.pdf
ChristopherTHyatt
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Igalia
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Recently uploaded
(20)
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Evaluating the top large language models.pdf
Evaluating the top large language models.pdf
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
モダンなCSS設計パターンを考える
1.
モダンなCSS設計パターンを考える Modern CSS Architecture Hiroki
Tani HTML5 Conference 2013
2.
Hiroki Tani CyberAgent, Inc.
3.
http://frontrend.github.io/ Frontrend in Sapporo Frontrend
in Fukuoka 2013年12月7日 2013年1月
4.
Why Architecture ?
5.
6.
7.
8.
#news h2 {
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; }
10.
#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; }
11.
.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 } ... } { ... } { ... }
12.
!important
13.
14.
15.
16.
Goals of Better
CSS Architecture - Predictable - Reusable - Maintainable - Scalable 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい http://enja.studiomohawk.com/2013/07/06/css-architecture/
17.
Modular CSS
18.
OOCSS Nicole Sullivan https://github.com/stubbornella/oocss/wiki
19.
20.
21.
22.
23.
OOCSS - Separate structure
and skin 構造と見た目の分離 - Separate container and content コンテナとコンテンツの分離
24.
Media object
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.
<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>
28.
.media { /*
Clearfix */ } .media-image { float: left; margin-right: 10px; } .media-image img { > display: block; } .media-body { overflow: hidden; }
29.
<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>
30.
<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>
31.
How to build
modules ?
32.
It depends.
33.
Rule of Three ‘Refactoring’ http://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)
34.
3, 6
35.
3, 6, 9,
12, 15 ...
36.
3, 6, 12,
24, 48 ...
37.
3, 6, 9
38.
3, 6, 9,
12, 15 ...
39.
40.
.fontSize10 { font-size:
10px } .colorRed { color: red }
41.
<p class="fontSize18 colorRed"> 入力内容に誤りがあります。 </p>
42.
<p class="box radius10
fontSize18 colorRed"> 入力内容に誤りがあります。 </p>
43.
.colorRed { color:
red }
44.
.colorRed { color:
orange; } ⚠
45.
.colorRed { color:
orange; /* あとで直す */ } ⚠
46.
.fontSize18 { font-size:
18px }
47.
.fontSize18 { font-size:
18px } @media only screen and (max-width : 320px) { .fontSize18 { font-size: 14px } } ⚠
48.
.radius6 { border-radius: } .radius10
{ border-radius: } .radius12 { border-radius: } .radius14 { border-radius: } 6px; 10px; 12px; 14px; ⚠
49.
How to maintain
modules ?
50.
SMACSS Jonathan Snook http://smacss.com/ja
51.
日本語、あります SMACSS Jonathan Snook http://smacss.com/ja
52.
SMACSS - Categorization カテゴライズ - Naming
Convention 命名規則 - Decoupling CSS from HTML HTMLとCSSの分離
53.
SMACSS Categories - Base -
Layout - State - Theme - Module
54.
/* # Base
*/ body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }
55.
/* # 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; }
56.
/* # State
*/ .is-hidden { display: none; } .is-error { font-weight: bold; color: red; } .is-tab-active { border-bottom-color: transparent; }
57.
/* # Theme
*/ /* ## Spring Theme CSS */ .theme-header { background-image: url("/theme/spring/ header.png"); } .theme-border { 1px solid pink; }
58.
59.
Message-box http://cdpn.io/hKBkm
60.
<div class="msg"> <p>...</p> </div> .msg { display:
block; border: 1px solid #cccccc; border-radius: 8px; padding: 1em; background-color: #efefef; color: #333333; }
61.
62.
<div class="msg msg-error"> <p>...</p> </div> .msg
{ ... } .msg-error { border: 1px solid #c0392b; background-color: #fe9282; }
63.
64.
<div class="msg msg-success"> <p>...</p> </div> .msg
{ ... } .msg-success { border: 1px solid #27ae60; background-color: #99f3c9; }
65.
66.
<div class="msg msg-error"> <h2>...</h2> <p>...</p> </div>
67.
<div class="msg msg-error"> <h2>...</h2> <p>...</p> </div> .msg
h2 { font-size: inherit; font-weight: bold; } .msg p { margin-top: 0.6em; }
68.
69.
.msg h2 { font-size:
inherit; font-weight: bold; } .msg ul, .msg p { margin-top: 0.6em; }
70.
.msg h2 { font-size:
inherit; font-weight: bold; } .msg ul, .msg p { margin-top: 0.6em; } ⚠
71.
<div class="msg msg-error"> <h2
class="msg-title"> ... </h2> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
72.
.msg-title { font-size: inherit; font-weight:
bold; } .msg-body { margin-top: 0.6em; }
73.
<div class="msg msg-error"> <p
class="msg-title"> ... </p> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
74.
75.
<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>
76.
.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; }
77.
%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; }
78.
79.
80.
.msg-error { border: 1px
solid #c0392b; background-color: #fe9282; }
81.
82.
83.
.msg-title { font-size: inherit; font-weight:
bold; } .msg-body { margin-top: 0.6em; }
84.
.msg { ... } .msg-error { border:
1px solid #c0392b; background-color: #fe9282; } .msg-title { font-size: inherit; font-weight: bold; }
85.
BEM Yandex http://bem.info/
86.
BEM stands for
... - Block - Element - Modifier
87.
Block
88.
Element
89.
Modifier
90.
.block { ... } .block__element
{ ... } .block_modifier { ... } .block__element_modifier { ... }
91.
.nav { ... } .nav__item
{ ... } .nav_segmented { ... } .nav__item_segmented { ... }
92.
.nav { ... } .nav__item
{ ... } .nav--segmented { ... } .nav__item--segmented { ... } http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
93.
.msg { ... } .msg--error { border:
1px solid #c0392b; background-color: #fe9282; }
94.
.msg__title { font-size: inherit; font-weight:
bold; } .msg__body { margin-top: 0.6em; } .msg__title-icon { vertical-align: -0.3em; }
95.
MCSS - Base - Project -
cosmetic http://operatino.github.io/MCSS/en/
96.
inuit.css - Base - Generic -
Objects http://inuitcss.com/
97.
SUIT - Utilities - Components https://github.com/suitcss/suit
98.
99.
Front-end Styleguide
100.
Starbucks Style Guide http://www.starbucks.com/static/reference/styleguide/
101.
Pattern Primer http://patternprimer.adactio.com/
102.
MailChimp Pattern Library http://ux.mailchimp.com/patterns/
103.
Twitter Bootstrap http://getbootstrap.com
104.
105.
KSS http://warpspire.com/kss/styleguides/
106.
Kalei http://kaleistyleguide.com/
107.
StyleDocco http://jacobrask.github.io/styledocco/
108.
// // # 見出し // //
説明文を書きます。マークダウン形式です。 // // ``` // <button type="button" class="btn btn-default"> // ``` で囲んだ部分にデモのHTMLを記述します。 // </button> // ``` .btn { display: inline-block; ... &:hover, &:focus { color: @btn-default-color; text-decoration: none; } }
109.
$ styledocco -n
"ProjectName" css/ $ styledocco -n "ProjectName" -o "mydocs" $ styledocco -n "ProjectName" --preprocessor "lessc" less/
110.
111.
Building Pages 🎬⚏ 👤 👤
112.
Building Pages 🎬⚏ 👤 👤 🎬⚏ 👤
113.
Building Pages Systems 🎬⚏ 🎬⚏ 👤 👤 👤
114.
Developer vs Designer
?
115.
🎬⚏ 👤 👤
116.
🎬⚏ 👤 👤
117.
🎬⚏ 👤 👤
118.
🎬⚏ 👤 👤
119.
🎬⚏ 👤 👤
120.
🎬⚏ 👤 👤
121.
🎬⚏ 👤 👤
122.
Developer with Designer
123.
Best Practice
124.
Best Practices
125.
“ どんなに多くの人が貢献したとしても どのコードも一人で書いたようにする All code in
any code-base should look like a single person typed it, even when many people are contributing to it. ” - Idiomatic CSS https://github.com/necolas/idiomatic-css
126.
“ 壊れない完璧な設計を求めるのではなく 壊れたときに勇気をもって修復できる設計を - Anonymous ”
127.
Thanks. - twitter.com/hiloki - inkdesign.jp -
html5experts.jp/hiloki/
128.
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