SlideShare une entreprise Scribd logo
1  sur  120
Télécharger pour lire hors ligne
QCon Tokyo 2014 Conference
Modern CSS Architecture
Hiroki Tani
モダンなCSS設計パターンを考える
Hiroki Tani
Front-end Engineer
CyberAgent, Inc.
?Why Architecture
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
#news h2 {	
	 border-bottom: 1px solid black;	
	 padding: 1em 0.5em;	
	 font-size: 18px;	
	 font-weight: bold;	
}
#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;	
}
#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;	
}
.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 { ... }
!important
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
Goals of Better CSS Architecture
-Predictable
-Reusable
-Maintainable
-Scalable
http://article.enja.io/articles/css-architecture.html
予測しやすい
再利用しやすい
保守しやすい
拡張しやすい
Modular CSS
OOCSS
Nicole Sullivan
https://github.com/stubbornella/oocss/wiki
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
OOCSS
-Separate structure and skin
-Separate container and content
構造と見た目の分離
コンテナとコンテンツの分離
Media object
<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>
<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>
<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>
.media {	
	 /* Clearfix */	
}	
.media-image {	
	 float: left;	
	 margin-right: 10px;	
}	
.media-image 	> img {	
	 display: block;	
}	
.media-body {	
	 overflow: hidden;	
}
<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>
<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>
?How to build modules
It depends.
Rule of Three
‘Refactoring’
http://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)
3, 6
3, 6, 9, 12, 15 ...
3, 6, 12, 24, 48 ...
3, 6, 9
3, 6, 9, 12, 15 ...
モダンなCSS設計パターンを考える
.fontSize10 {	
	 font-size: 10px	
}	
.colorRed {	
	 color: red	
}
<p class="fontSize18 colorRed">	
入力内容に誤りがあります。	
</p>
<p class="box radius10 fontSize18 colorRed">	
入力内容に誤りがあります。	
</p>
.fontSize18 {	
	 font-size: 18px	
}
.fontSize18 {	
	 font-size: 18px	
}	
!
@media only screen and (max-width : 320px) {	
	 .fontSize18 {	
	 	 font-size: 14px	
	 }	
}	
⚠
.colorRed {	
	 color: red	
}
.colorRed {	
	 color: orange;	
}
⚠
.colorRed {	
	 color: orange; /* あとで直す */	
}
⚠
⚠
?How to maintain modules
SMACSS
Jonathan Snook
http://smacss.com/ja
日本語、あります
SMACSS
-Categorization
-Naming Convention
-Decoupling CSS from HTML
カテゴライズ
命名規則
HTMLとCSSの分離
SMACSS Categories
-Base
-Layout
-Module
-State
-Theme
/* # Base */	
body, form {	
margin: 0;	
padding: 0;	
}	
a {	
color: #039;	
}	
a:hover {	
color: #03F; 	
}
/* # 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; 	
}
/* # State */	
.is-hidden {	
	 display: none;	
}	
.is-error {	
	 font-weight: bold;	
	 color: red;	
}	
.is-tab-active {	
	 border-bottom-color: transparent;	
}
/* # Theme */	
/* ## Spring Theme CSS */	
.theme-header {	
	 background-image: url("/theme/spring/
header.png");	
}	
.theme-border {	
	 1px solid pink;	 	
}
モダンなCSS設計パターンを考える
Message-box
http://cdpn.io/hKBkm
<div class="msg">	
<p>...</p>	
</div>
.msg {	
display: block;	
border: 1px solid #cccccc;	
border-radius: 8px;	
padding: 1em;	
background-color: #efefef;	
color: #333333;	
}
モダンなCSS設計パターンを考える
<div class="msg msg-error">	
<p>...</p>	
</div>
.msg {	
...	
}	
.msg-error {	
border: 1px solid #c0392b;	
background-color: #fe9282;	
}
モダンなCSS設計パターンを考える
<div class="msg msg-success">	
<p>...</p>	
</div>
.msg {	
...	
}	
.msg-success {	
border: 1px solid #27ae60;	
background-color: #99f3c9;	
}
モダンなCSS設計パターンを考える
<div class="msg msg-error">	
<h2>...</h2>	
<p>...</p>	
</div>
<div class="msg msg-error">	
<h2>...</h2>	
<p>...</p>	
</div>
.msg h2 {	
font-size: inherit;	
font-weight: bold;	
}	
!
.msg p {	
margin-top: 0.6em;	
}
モダンなCSS設計パターンを考える
.msg h2 {	
font-size: inherit;	
font-weight: bold;	
}	
!
.msg ul,	
.msg p {	
margin-top: 0.6em;	
}
⚠
<div class="msg msg-error">	
<h2 class="msg-title">	
...	
</h2>	
<ul class="msg-body">	
<li>...</li>	
<li>...</li>	
</ul>	
</div>
.msg-title {	
font-size: inherit;	
font-weight: bold;	
}	
!
.msg-body {	
margin-top: 0.6em;	
}
<div class="msg msg-error">	
<p class="msg-title">	
...	
</p>	
<ul class="msg-body">	
<li>...</li>	
<li>...</li>	
</ul>	
</div>
モダンなCSS設計パターンを考える
<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>
.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;	
}
%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;	
}
モダンなCSS設計パターンを考える
!
.msg-error {	
border: 1px solid #c0392b;	
background-color: #fe9282;	
}
モダンなCSS設計パターンを考える
.msg-title {	
font-size: inherit;	
font-weight: bold;	
}	
.msg-body {	
margin-top: 0.6em;	
}
.msg {	
...	
}	
.msg-error {	
border: 1px solid #c0392b;	
background-color: #fe9282;	
}	
.msg-title {	
font-size: inherit;	
font-weight: bold;	
}
BEM
Yandex
http://bem.info/
BEM stands for ...
-Block
-Element
-Modifier
Block
Element
Modifier
.block {	
	 ...	
}	
.block__element {	
	 ...	
}	
.block_modifier {	
	 ...	
}	
.block__element_modifier {	
	 ...	
}
.nav {	
	 ...	
}	
.nav__item {	
	 ...	
}	
.nav_segmented {	
	 ...	
}	
.nav__item_segmented {	
	 ...	
}
.nav {	
	 ...	
}	
.nav__item {	
	 ...	
}	
.nav--segmented {	
	 ...	
}	
.nav__item--segmented {	
	 ...	
}
http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
.msg {	
...	
}	
.msg--error {	
border: 1px solid #c0392b;	
background-color: #fe9282;	
}
.msg__title {	
font-size: inherit;	
font-weight: bold;	
}	
.msg__body {	
margin-top: 0.6em;	
}	
.msg__title-icon {	
vertical-align: -0.3em;	
}
MCSS
-Base
-Project
-cosmetic
http://operatino.github.io/MCSS/en/
FLOCSS
-Foundation
-Layout
-Object
https://github.com/hiloki/flocss
-Component
-Project
-Utility
モダンなCSS設計パターンを考える
Front-end Styleguide
Starbucks Style Guide
http://www.starbucks.com/static/reference/styleguide/
MailChimp Pattern Library
http://ux.mailchimp.com/patterns/
Twitter Bootstrap
http://getbootstrap.com
A Pattern Apart
http://patterns.alistapart.com/
http://alistapart.com/blog/post/getting-started-with-pattern-libraries
Code Example view
http://alistapart.com/blog/post/getting-started-with-pattern-libraries
Patchwork view
Front-end Styleguide
Front-end Styleguide
Living
モダンなCSS設計パターンを考える
KSS
http://warpspire.com/kss/styleguides/
Kalei
http://kaleistyleguide.com/
StyleDocco
http://jacobrask.github.io/styledocco/
//	
// # 見出し	
//	
// 説明文を書きます。マークダウン形式です。	
//	
// ```	
// <button type="button" class="btn btn-default">	
// ``` で囲んだ部分にデモのHTMLを記述します。	
// </button>	
// ```	
!
.btn {	
display: inline-block;	
...	
&:hover,	
&:focus {	
color: @btn-default-color;	
text-decoration: none;	
}	
}
$ styledocco -n "ProjectName" css/	
$ styledocco -n "ProjectName" -o "mydocs"	
$ styledocco -n "ProjectName" --preprocessor "lessc" less/
http://d.pr/v/46BF
モダンなCSS設計パターンを考える
⚏🎬 👤👤 ⚏🎬
👤
Building Pages
Systems
Styleguide Driven Development
http://www.stubbornella.org/content/2014/04/09/style-guide-driven-development/
Developer vs Designer ?
⚏🎬 👤👤
Developer with Designer
Best Practice
Best Practices
どんなに多くの人が貢献したとしても
どのコードも一人で書いたようにする
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.
“
”
壊れない完璧な設計を求めるのではなく
壊れたときに勇気をもって修復できる設計を
“
”
- Anonymous
Thanks.
- twitter.com/hiloki
- inkdesign.jp
- slideshare.net/hiloki
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/

Contenu connexe

Tendances

Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryTodd Zaki Warfel
 
Html5 & CSS overview
Html5 & CSS overviewHtml5 & CSS overview
Html5 & CSS overviewIvan Frantar
 
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris GriffithRapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris GriffithUXPA International
 
Você precisa aprender Web
Você precisa aprender WebVocê precisa aprender Web
Você precisa aprender WebJean Carlo Emer
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
Xlrays online web tutorials
Xlrays online web tutorialsXlrays online web tutorials
Xlrays online web tutorialsYogesh Gupta
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingMyles Braithwaite
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointSahil Gandhi
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Marc Grabanski
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standardsgleddy
 
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Esteve Castells
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By PalashPalashBajpai
 
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleClass 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleErin M. Kidwell
 

Tendances (20)

Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
 
Html5 ux london
Html5 ux londonHtml5 ux london
Html5 ux london
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
Html5 & CSS overview
Html5 & CSS overviewHtml5 & CSS overview
Html5 & CSS overview
 
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris GriffithRapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
 
Você precisa aprender Web
Você precisa aprender WebVocê 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 developmentiPhone 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 tutorialsXlrays online web tutorials
Xlrays online web tutorials
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
 
Html22
Html22Html22
Html22
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics 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)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
 
HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
 
Slicing the web
Slicing the webSlicing the web
Slicing the web
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
Guia de-estudio-2
Guia de-estudio-2Guia de-estudio-2
Guia de-estudio-2
 
Critical Rendering Path
Critical Rendering PathCritical 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 #seoplus2018Advanced 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 PalashCSS framework By Palash
CSS framework By Palash
 
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleClass 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 WorldAkka-chan's Survival Guide for the Streaming World
Akka-chan's Survival Guide for the Streaming WorldKonrad Malawski
 
7 key recipes for data engineering
7 key recipes for data engineering7 key recipes for data engineering
7 key recipes for data engineeringunivalence
 
Preparing for distributed system failures using akka #ScalaMatsuri
Preparing for distributed system failures using akka #ScalaMatsuriPreparing for distributed system failures using akka #ScalaMatsuri
Preparing for distributed system failures using akka #ScalaMatsuriTIS Inc.
 
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅schoowebcampus
 
WebデザイナーのためのGit勉強会 ~準備編~
WebデザイナーのためのGit勉強会 ~準備編~WebデザイナーのためのGit勉強会 ~準備編~
WebデザイナーのためのGit勉強会 ~準備編~Satoshi Ebisawa
 
WebデザイナーによるWebデザイナーのためのマーケティング入門
WebデザイナーによるWebデザイナーのためのマーケティング入門WebデザイナーによるWebデザイナーのためのマーケティング入門
WebデザイナーによるWebデザイナーのためのマーケティング入門Miho Ishida
 
エコなWebデザイナーになろう
エコなWebデザイナーになろうエコなWebデザイナーになろう
エコなWebデザイナーになろうYasuhisa Hasegawa
 
軽量マークアップ言語で気楽にマークアップ
軽量マークアップ言語で気楽にマークアップ軽量マークアップ言語で気楽にマークアップ
軽量マークアップ言語で気楽にマークアップTomohiko Himura
 
WEBデザイナー3年目を終えて
WEBデザイナー3年目を終えてWEBデザイナー3年目を終えて
WEBデザイナー3年目を終えてfujita_ryo
 
CSS設計のお勉強
CSS設計のお勉強CSS設計のお勉強
CSS設計のお勉強MarlboroLand
 
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkillsサルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkillsSatoshi Kikuchi
 
UXデザインの上流工程の考え方とプロセス  ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへUXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス  ~リサーチからアイデア発想そしてUIデザインへMasaya Ando
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)Horiguchi Seito
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんHayato Mizuno
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!Yuji Nojima
 
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーYoshiki Hayama
 
制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキルTomoyuki Arasuna
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインHiroyuki Makishita
 

En vedette (20)

Akka-chan's Survival Guide for the Streaming World
Akka-chan's Survival Guide for the Streaming WorldAkka-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 engineering7 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 #ScalaMatsuriPreparing for distributed system failures using akka #ScalaMatsuri
Preparing for distributed system failures using akka #ScalaMatsuri
 
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
 
WebデザイナーのためのGit勉強会 ~準備編~
WebデザイナーのためのGit勉強会 ~準備編~WebデザイナーのためのGit勉強会 ~準備編~
WebデザイナーのためのGit勉強会 ~準備編~
 
ゆるふわCSS3
ゆるふわCSS3 ゆるふわCSS3
ゆるふわCSS3
 
WebデザイナーによるWebデザイナーのためのマーケティング入門
WebデザイナーによるWebデザイナーのためのマーケティング入門WebデザイナーによるWebデザイナーのためのマーケティング入門
WebデザイナーによるWebデザイナーのためのマーケティング入門
 
エコなWebデザイナーになろう
エコなWebデザイナーになろうエコなWebデザイナーになろう
エコなWebデザイナーになろう
 
軽量マークアップ言語で気楽にマークアップ
軽量マークアップ言語で気楽にマークアップ軽量マークアップ言語で気楽にマークアップ
軽量マークアップ言語で気楽にマークアップ
 
WEBデザイナー3年目を終えて
WEBデザイナー3年目を終えてWEBデザイナー3年目を終えて
WEBデザイナー3年目を終えて
 
CSS設計のお勉強
CSS設計のお勉強CSS設計のお勉強
CSS設計のお勉強
 
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkillsサルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
 
UXデザインの上流工程の考え方とプロセス  ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへUXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス  ~リサーチからアイデア発想そしてUIデザインへ
 
CSS の歩き方
CSS の歩き方CSS の歩き方
CSS の歩き方
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
 
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
 
制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮した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-...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 designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designErin M. Kidwell
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersTsungWei Hu
 
I pv6+at+caribbean+sector
I pv6+at+caribbean+sectorI pv6+at+caribbean+sector
I pv6+at+caribbean+sectormax Firmin
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web componentsMarc Bächinger
 
IT1150CapstoneProjectFall2016TedCarr
IT1150CapstoneProjectFall2016TedCarrIT1150CapstoneProjectFall2016TedCarr
IT1150CapstoneProjectFall2016TedCarrTed Carr
 
When dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniquesWhen dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniquesWim Godden
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單偉格 高
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićMeetMagentoNY2014
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
Making Links Magical Again with CSS
Making Links Magical Again with CSSMaking Links Magical Again with CSS
Making Links Magical Again with CSSJenn Lukas
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practiceshoctudau
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyDenise Jacobs
 
Polytechnic 1.0 Granada
Polytechnic 1.0 GranadaPolytechnic 1.0 Granada
Polytechnic 1.0 GranadaIsrael Blancas
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事Sofish Lin
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesRenato Iwashima
 

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-...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 designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
 
css.ppt
css.pptcss.ppt
css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
 
I pv6+at+caribbean+sector
I pv6+at+caribbean+sectorI pv6+at+caribbean+sector
I pv6+at+caribbean+sector
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web components
 
IT1150CapstoneProjectFall2016TedCarr
IT1150CapstoneProjectFall2016TedCarrIT1150CapstoneProjectFall2016TedCarr
IT1150CapstoneProjectFall2016TedCarr
 
When dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniquesWhen 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 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Making Links Magical Again with CSS
Making Links Magical Again with CSSMaking Links Magical Again with CSS
Making Links Magical Again with CSS
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practices
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
Polytechnic 1.0 Granada
Polytechnic 1.0 GranadaPolytechnic 1.0 Granada
Polytechnic 1.0 Granada
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
 
Class15
Class15Class15
Class15
 
Bem methodology
Bem methodologyBem methodology
Bem methodology
 

Plus de 拓樹 谷

CSS設計の理想と現実
CSS設計の理想と現実CSS設計の理想と現実
CSS設計の理想と現実拓樹 谷
 
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計拓樹 谷
 
CSS Components
CSS ComponentsCSS Components
CSS Components拓樹 谷
 
How to Win the Heart of CSS Boys
How to Win the Heart of CSS BoysHow to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys拓樹 谷
 
High Performance Webdesign
High Performance WebdesignHigh Performance Webdesign
High Performance Webdesign拓樹 谷
 
Thinking about CSS Architecture
Thinking about CSS ArchitectureThinking about CSS Architecture
Thinking about CSS Architecture拓樹 谷
 

Plus de 拓樹 谷 (7)

CSS設計の理想と現実
CSS設計の理想と現実CSS設計の理想と現実
CSS設計の理想と現実
 
Why Sass?
Why Sass?Why Sass?
Why Sass?
 
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
 
CSS Components
CSS ComponentsCSS Components
CSS Components
 
How to Win the Heart of CSS Boys
How to Win the Heart of CSS BoysHow to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
 
High Performance Webdesign
High Performance WebdesignHigh Performance Webdesign
High Performance Webdesign
 
Thinking about CSS Architecture
Thinking about CSS ArchitectureThinking about CSS Architecture
Thinking about CSS Architecture
 

Dernier

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
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...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 | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
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...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.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 

Dernier (19)

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath 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 2024The 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 2024Introduce 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.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD 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.pptxWCM 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 teamsDesigning 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.pptxProduction 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.pdfBuilding+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...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 | ChatGPTHow 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 ShirtMike 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 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery 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...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.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 

モダンなCSS設計パターンを考える