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 in the post-deep learning era
Artificial intelligence in the post-deep learning era
Deakin University
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Slibray Presentation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Safe Software
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
BookNet Canada
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Miki Katsuragi
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
Science&tech:THE INFORMATION AGE STS.pdf
Science&tech:THE INFORMATION AGE STS.pdf
jimielynbastida
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
null - The Open Security Community
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Ridwan Fadjar
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
The Digital Insurer
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
Fwdays
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Patryk Bandurski
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
2toLead Limited
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
carlostorres15106
Recently uploaded
(20)
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning era
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Science&tech:THE INFORMATION AGE STS.pdf
Science&tech:THE INFORMATION AGE STS.pdf
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
モダンな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