Your SlideShare is downloading. ×
0
CsS
ThInKiNg
ARcHiTeCtUrE
FRoNtReNdiNOSaKa
Re:cReatEr’S kAnSaI
SAtUrDaY, sEpTeMbEr 14 2013
AbOuT
HirOkI taNi
CYbEragEnT, inC.
タイトル
@T32K
@AhOmU
@HiLoKi@HiLoKi
APp
WeB
¤なぜ設計を学ぶべきなのか
ARcHiTeCtUrE
k
1BRoWsEr
0PsD
q k u
¤
¥
.text {
	 color: black;
}
.catchcopy {
	 color: red;
}
#message .text {
	 color: green;
}
10mIn
11l12
9 3
6
¥
k11l12
9 3
6
10mIn 60mIn...aNd MoRe
11l12
9 3
6
11l12
9 3
6
111
11l12
9 3
6
11l12
9 3
6
11l12
9 3
6
11l12
9 3
6
¤
¥
k
10mIn BUgS...
1 1 1
±'
lll
lll
H
H
±'
lll
lll
H
H
±'
lll
lll
H
H
11l12
9 3
6
¤
¥
L
?SOmEoNe
L N
? YOu
k1112
9
6
3
l
30mIn
1112
9
6
3
l
30mIn
¤
¥
1CsS
1HtMl
1CsS
1Js
e良いCSS設計のゴールとは
GoAl
®©°
®©°PHiLiP waLtOn
CsS arChItEcTuRe
®©°
®©°PHiLiP waLtOn
CsS arChItEcTuRe
&
PReDiCtAbLe
REuSaBlE
MAiNtAiNaBlE
SCaLaBlE
#content article h1:first-child { ... }
<div id="content">
	 <article>
	 	 <h1>Article Title</h1>
	 </article>
</div>
<div id="content">
	 <section>
	 	 <h1>Article Title</h1>
	 </section>
</div>
<div id="content">
	 <article>
	 	 <p>2013/09/13</p>
	 	 <h1>Article Title</h1>
	 </article>
</div>
D¤
.entry-title { ... }
<div id="content">
	 <article>
	 	 <p>2013/09/13</p>
	 	 <h1 class="entry-title">Article Title</
h1>
	 </article>
</div>
<div id="content">
	 <div>
	 	 <p>2013/09/13</p>
	 	 <h2 class="entry-title">Article Title</
h2>
	 </div>
</div>
POCSSは壊れやすい
CsS Is ToO FrAgIlE
®©°®©°OoCsS
bY niCoLe suLlIvAn
SEpArAtE CoNtAiNeR AnD CoNtEnT
SEpArAtE StRuCtUrE AnD SkIn
SEpArAtE CoNtAiNeR AnD CoNtEnT
SEpArAtE StRuCtUrE AnD SkIn
®©°
MEdIa obJeCt
<div class="media">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="media-body...
<div class="media">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="media-body...
<div class="media">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="media-body...
.media {
	 overflow: hidden; // Clearfix
	 *zoom: 1; // Clearfix
}
.media-image {
	 float: left;
	 margin-right: 10px;
}
....
<div class="media skin-a">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="med...
<div class="media skin-b">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="med...
SEpArAtE CoNtAiNeR AnD CoNtEnT
SEpArAtE StRuCtUrE AnD SkIn
h2 {
	 font-weight: bold;
	 font-size: 16px;
}
#news h2 {
	 border-bottom: 1px solid black;
	 padding-bottom: 0.5em;
}
h2 {
	 font-weight: bold;
	 font-size: 16px;
}
#news h2,
#speakers h2 {
	 border-bottom: 1px solid black;
	 padding-bottom...
<div id="speakers">
	 <h1>Hiroki Tani</h1>
	 <h2>Session Title</h2>
	 <div>
	 	 <p>Summary</p>
	 </div>
</div>
®©°
<div id="speakers">
	 <h1>Hiroki Tani</h1>
	 <h2>Session Title</h2>
	 <div>
	 	 <p>...</p>
	 </div>
	 <div>
	 	 <h2>Books<...
<div id="speakers">
	 <h1>Hiroki Tani</h1>
	 <h2>Session Title</h2>
	 <div>
	 	 <p>...</p>
	 </div>
	 <div>
	 	 <h2>Books<...
<div id="speakers">
	 <h1>Hiroki Tani</h1>
	 <h2>Session Title</h2>
	 <div>
	 	 <p>...</p>
	 </div>
	 <div>
	 	 <h2>Books<...
D¤
h2 {
	 font-weight: bold;
	 font-size: 16px;
}
.headline {
	 border-bottom: 1px solid black;
	 padding-bottom: 0.5em;
}
<div id="speakers">
	 <h1>Hiroki Tani</h1>
	 <h2 class="headline">Session Title</h2>
	 <div>
	 	 <p>...</p>
	 </div>
	 <di...
.heading {
	 font-weight: bold;
	 font-size: 16px;
}
.headline {
	 border-bottom: 1px solid black;
	 padding-bottom: 0.5em...
<div id="speakers">
	 <h1>Hiroki Tani</h1>
	 <h2 class="heading headline">Session
Title</h2>
	 <div>
	 	 <p>...</p>
	 </di...
®©°=DoN’t uSe iD!
*
®©°3SHoUlDn'T
uSe iD seLeCtOr
11
®©°=.colorRed {
color: red;
}
*
®©°311
.note {
color: red;
}
®©°3iF YoU NeEd It.
11
®©°
®©°SmAcSs
BY joNaThAn snOoK
cAtEgOrIzAtIoN
nAmInG CoNvEnTiOn
dEcOuPlInG CsS FrOm HtMl
cAtEgOrIzAtIoN
BAsE MOdUlE THeMeSTaTeLAyOuT
/* # Base */
body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}
/* # Layout */
.l-header, l-article, l-footer {
width: 960px;
margin: auto;
}
.l-article {
border: solid #CCC;
border-widt...
/* # Layout */
#header, #article, #footer {
width: 960px;
margin: auto;
}
.l-article {
border: solid #CCC;
border-width: 1...
/* # Layout */
.l-container {
width: 960px;
margin: auto;
}
.l-article {
border: solid #CCC;
border-width: 1px 0 0;
}
.l-g...
/* # State */
.is-hidden {
	 display: none;
}
.is-error {
	 font-weight: bold;
	 color: red;
}
.is-tab-active {
	 border-b...
/* # Theme */
/* ## Pink Theme CSS */
.theme-header {
	 background-image: url("/theme/pink/
header.png");
}
.theme-border ...
/* # Module */
/* ## Button */
.btn { ... }
.btn-primary { ... }
.btn-small { ... }
/* ## UIlist */
.uilist { ... }
.uilis...
<button class="btn btn-primary">Submit</button>
<a href="/help" class="btn btn-small">Help</a>
<button class="btn btn-succ...
<div class="widget">
	 <h2>Title</h2>
	 <p>Text</p>
</div>
.widget { ... }
.widget p {
	 margin-top: 10px;
	 margin-bottom: 10px;
}
<div class="widget">
	 <h2>Title</h2>
	 <ul>
	 	 <li>ListItem</li>
	 	 <li>ListItem</li>
	 	 <li>ListItem</li>
	 </ul>
</d...
.widget { ... }
.widget p,
.widget ul {
	 margin-top: 10px;
	 margin-bottom: 10px;
}
<div class="widget">
	 <h2>Title</h2>
	 <ul class="widget-body">
	 	 <li>ListItem</li>
	 	 <li>ListItem</li>
	 	 <li>ListI...
.widget { ... }
.widget-body {
	 margin-top: 10px;
	 margin-bottom: 10px;
}
®©°>
®©°,
‘RUlE Of ThReE’
®©°
3, 6, 9, 12, 15
,
‘RUlE Of ThReE’
®©°
3, 6, 9, 12, 15
,
‘RUlE Of ThReE’
®©°
3, 6, 12, 24, 48
,
‘RUlE Of ThReE’
®©°
3, 6, 9, 12, 15
,
‘RUlE Of ThReE’
®©°,
‘RUlE Of ThReE’
3, 6, 9, 12, 15
®©°DOnAlD e, knUtH
時期尚早な最適化は
諸悪の根源である。
... PrEmAtUrE OpTiMiZaTiOn Is ThE RoOt Of AlL EvIl.
®©°
®©°=NOt SeMaNtIcS!
*
®©°
すべてのセマンティックが
コンテンツ派生である必要はない。
... NoT AlL SeMaNtIcS NeEd To Be CoNtEnT-DeRiVeD.
NIcOlAs gaLlAgHeR
<div class="review">
<h1>CSS Architecture</h1>
<p class="reviewer">Review: <span>Hiroki Tani</
span></p>
<time datetime="2...
<div itemscope itemtype="http://data-
vocabulary.org/Review">
<h1 itemprop="itemreviewed">CSS Architecture</
h1>
<p>Review...
®©°=*
ClAsS!ClAsS!ClAsS! ...
®©°311
/* Sass(.scss) */
%btn {
border-radius: 6px;
padding: 0.5em 1em;
background-color: #CCC;
}
.btn-primary {
@extend %btn;
ba...
/* CSS */
.btn-primary {
border-radius: 6px;
adding: 0.5em 1em;
background-color: #CCC;
background-image: linear-gradient(...
<button class="btn-primary">Save</button>
/* Sass(.scss) */
%btn {
border-radius: 6px;
padding: 0.5em 1em;
background-color: #CCC;
}
%btn-primary {
border-radius: 6...
/* CSS */
.save {
border-radius: 6px;
adding: 0.5em 1em;
background-color: #CCC;
background-image: linear-gradient(...);
c...
<button class="save">Submit</button>
.clearfix:after,.btn_type2_A:after,.bnavi
ul:after,.box_3col:after,.userData
dl:after,.likeTool:after,.likeUser ul:after,....
®©°©°BEm
bY yaNdEx
/* # Module */
/* ## Button */
.btn { ... }
.btn-primary { ... }
.btn-small { ... }
/* ## Widget */
.widget { ... }
.widge...
v vk.btn .btn-primary
MOdIfIeR
00
.widget
.widget-body
SUb-CoMpOnEnT
BLoCk,elEmEnT,moDiFiEr
BlOcK,ElEmEnT,MoDiFiEr
.ranking { ... }
.ranking__thumbnail { ... }
.ranking__item { ... }
.nav-line { ... }
.nav-line__item { ... }
.nav-line_se...
/* # Module */
/* ## Button */
.btn { ... }
.btn_primary { ... }
.btn_small { ... }
/* ## Widget */
.widget { ... }
.widge...
/* # Module */
/* ## Button */
.btn { ... }
.btn--primary { ... }
.btn--small { ... }
/* ## Widget */
.widget { ... }
.wid...
®©°=*
UUuUgLy!
®©°=AgReEeE!
;
パターンライブラリ/CSSスタイルガイド/テスト
TOoL
®©©°
®©KsS
STyLeGuIdE geNeRaToR
®©°©°STyLedoCcO
STyLeGuIdE geNeRaToR
/*
A button suitable for giving stars to someone.
:hover - Subtle hover highlight.
.stars-given - A highlight indicating y...
COmPoNeNt
&
&
&
&
COmPoNeNt
&
&
&
&
WeB
BeSt pRaCtIcE
BeSt pRaCtIcES
®©°
どんなに多くの人が貢献したとしても、
どのコードも一人で書いたようにする。
ALl CoDe In AnY CoDe-BaSe ShOuLd LoOk LiKe A SiNgLe PeRsOn
tYpEd It, EvEn WhEn M...
THaNkS
@HiLoKi
iNkDeSiGn.JpC
CrEdItS
http://www.flickr.com/photos/darice/8526800143/
http://www.flickr.com/photos/franksvalli/5173283924/
http://www.fl...
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Thinking about CSS Architecture
Upcoming SlideShare
Loading in...5
×

Thinking about CSS Architecture

6,657

Published on

Frontrend in Osaka & Re:Creator's Kansai での講演スライド

Published in: Technology

Transcript of "Thinking about CSS Architecture"

  1. 1. CsS ThInKiNg ARcHiTeCtUrE FRoNtReNdiNOSaKa Re:cReatEr’S kAnSaI SAtUrDaY, sEpTeMbEr 14 2013 AbOuT
  2. 2. HirOkI taNi CYbEragEnT, inC.
  3. 3. タイトル @T32K @AhOmU @HiLoKi@HiLoKi
  4. 4. APp WeB
  5. 5. ¤なぜ設計を学ぶべきなのか ARcHiTeCtUrE
  6. 6. k 1BRoWsEr 0PsD
  7. 7. q k u
  8. 8. ¤ ¥
  9. 9. .text { color: black; } .catchcopy { color: red; } #message .text { color: green; }
  10. 10. 10mIn 11l12 9 3 6 ¥
  11. 11. k11l12 9 3 6 10mIn 60mIn...aNd MoRe 11l12 9 3 6 11l12 9 3 6 111 11l12 9 3 6 11l12 9 3 6 11l12 9 3 6 11l12 9 3 6 ¤ ¥
  12. 12. k 10mIn BUgS... 1 1 1 ±' lll lll H H ±' lll lll H H ±' lll lll H H 11l12 9 3 6 ¤ ¥
  13. 13. L ?SOmEoNe
  14. 14. L N ? YOu
  15. 15. k1112 9 6 3 l 30mIn 1112 9 6 3 l 30mIn ¤ ¥
  16. 16. 1CsS
  17. 17. 1HtMl 1CsS 1Js
  18. 18. e良いCSS設計のゴールとは GoAl
  19. 19. ®©° ®©°PHiLiP waLtOn CsS arChItEcTuRe
  20. 20. ®©° ®©°PHiLiP waLtOn CsS arChItEcTuRe
  21. 21. & PReDiCtAbLe REuSaBlE MAiNtAiNaBlE SCaLaBlE
  22. 22. #content article h1:first-child { ... }
  23. 23. <div id="content"> <article> <h1>Article Title</h1> </article> </div>
  24. 24. <div id="content"> <section> <h1>Article Title</h1> </section> </div>
  25. 25. <div id="content"> <article> <p>2013/09/13</p> <h1>Article Title</h1> </article> </div>
  26. 26.
  27. 27. .entry-title { ... }
  28. 28. <div id="content"> <article> <p>2013/09/13</p> <h1 class="entry-title">Article Title</ h1> </article> </div>
  29. 29. <div id="content"> <div> <p>2013/09/13</p> <h2 class="entry-title">Article Title</ h2> </div> </div>
  30. 30. POCSSは壊れやすい CsS Is ToO FrAgIlE
  31. 31. ®©°®©°OoCsS bY niCoLe suLlIvAn
  32. 32. SEpArAtE CoNtAiNeR AnD CoNtEnT SEpArAtE StRuCtUrE AnD SkIn
  33. 33. SEpArAtE CoNtAiNeR AnD CoNtEnT SEpArAtE StRuCtUrE AnD SkIn
  34. 34. ®©° MEdIa obJeCt
  35. 35. <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>
  36. 36. <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>
  37. 37. <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>
  38. 38. .media { overflow: hidden; // Clearfix *zoom: 1; // Clearfix } .media-image { float: left; margin-right: 10px; } .media-image > img { display: block; } .media-body { overflow: hidden; }
  39. 39. <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>
  40. 40. <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>
  41. 41. SEpArAtE CoNtAiNeR AnD CoNtEnT SEpArAtE StRuCtUrE AnD SkIn
  42. 42. h2 { font-weight: bold; font-size: 16px; } #news h2 { border-bottom: 1px solid black; padding-bottom: 0.5em; }
  43. 43. h2 { font-weight: bold; font-size: 16px; } #news h2, #speakers h2 { border-bottom: 1px solid black; padding-bottom: 0.5em; }
  44. 44. <div id="speakers"> <h1>Hiroki Tani</h1> <h2>Session Title</h2> <div> <p>Summary</p> </div> </div>
  45. 45. ®©°
  46. 46. <div id="speakers"> <h1>Hiroki Tani</h1> <h2>Session Title</h2> <div> <p>...</p> </div> <div> <h2>Books</h2> <ul> <li>...</li> </ul> </div> </div>
  47. 47. <div id="speakers"> <h1>Hiroki Tani</h1> <h2>Session Title</h2> <div> <p>...</p> </div> <div> <h2>Books</h2> <ul> <li>...</li> </ul> </div> </div>
  48. 48. <div id="speakers"> <h1>Hiroki Tani</h1> <h2>Session Title</h2> <div> <p>...</p> </div> <div> <h2>Books</h2> <ul> <li>...</li> </ul> </div> </div>
  49. 49.
  50. 50. h2 { font-weight: bold; font-size: 16px; } .headline { border-bottom: 1px solid black; padding-bottom: 0.5em; }
  51. 51. <div id="speakers"> <h1>Hiroki Tani</h1> <h2 class="headline">Session Title</h2> <div> <p>...</p> </div> <div> <h2>Books</h2> <ul> <li>...</li> </ul> </div> </div>
  52. 52. .heading { font-weight: bold; font-size: 16px; } .headline { border-bottom: 1px solid black; padding-bottom: 0.5em; }
  53. 53. <div id="speakers"> <h1>Hiroki Tani</h1> <h2 class="heading headline">Session Title</h2> <div> <p>...</p> </div> <div> <h2 class="heading">Books</h2> <ul> <li>...</li> </ul> </div> </div>
  54. 54. ®©°=DoN’t uSe iD! *
  55. 55. ®©°3SHoUlDn'T uSe iD seLeCtOr 11
  56. 56. ®©°=.colorRed { color: red; } *
  57. 57. ®©°311 .note { color: red; }
  58. 58. ®©°3iF YoU NeEd It. 11
  59. 59. ®©° ®©°SmAcSs BY joNaThAn snOoK
  60. 60. cAtEgOrIzAtIoN nAmInG CoNvEnTiOn dEcOuPlInG CsS FrOm HtMl
  61. 61. cAtEgOrIzAtIoN BAsE MOdUlE THeMeSTaTeLAyOuT
  62. 62. /* # Base */ body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }
  63. 63. /* # Layout */ .l-header, l-article, l-footer { 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; }
  64. 64. /* # Layout */ #header, #article, #footer { 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; }
  65. 65. /* # Layout */ .l-container { 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; }
  66. 66. /* # State */ .is-hidden { display: none; } .is-error { font-weight: bold; color: red; } .is-tab-active { border-bottom-color: transparent; }
  67. 67. /* # Theme */ /* ## Pink Theme CSS */ .theme-header { background-image: url("/theme/pink/ header.png"); } .theme-border { 1px solid pink; }
  68. 68. /* # Module */ /* ## Button */ .btn { ... } .btn-primary { ... } .btn-small { ... } /* ## UIlist */ .uilist { ... } .uilist-item { ... } .uilist-item-icon { ... } /* ## Widget */ .widget { ... } .widget-title { ... } .widget-body { ... }
  69. 69. <button class="btn btn-primary">Submit</button> <a href="/help" class="btn btn-small">Help</a> <button class="btn btn-success btn-large"> Complete! </button>
  70. 70. <div class="widget"> <h2>Title</h2> <p>Text</p> </div>
  71. 71. .widget { ... } .widget p { margin-top: 10px; margin-bottom: 10px; }
  72. 72. <div class="widget"> <h2>Title</h2> <ul> <li>ListItem</li> <li>ListItem</li> <li>ListItem</li> </ul> </div>
  73. 73. .widget { ... } .widget p, .widget ul { margin-top: 10px; margin-bottom: 10px; }
  74. 74. <div class="widget"> <h2>Title</h2> <ul class="widget-body"> <li>ListItem</li> <li>ListItem</li> <li>ListItem</li> </ul> </div>
  75. 75. .widget { ... } .widget-body { margin-top: 10px; margin-bottom: 10px; }
  76. 76. ®©°>
  77. 77. ®©°, ‘RUlE Of ThReE’
  78. 78. ®©° 3, 6, 9, 12, 15 , ‘RUlE Of ThReE’
  79. 79. ®©° 3, 6, 9, 12, 15 , ‘RUlE Of ThReE’
  80. 80. ®©° 3, 6, 12, 24, 48 , ‘RUlE Of ThReE’
  81. 81. ®©° 3, 6, 9, 12, 15 , ‘RUlE Of ThReE’
  82. 82. ®©°, ‘RUlE Of ThReE’ 3, 6, 9, 12, 15
  83. 83. ®©°DOnAlD e, knUtH 時期尚早な最適化は 諸悪の根源である。 ... PrEmAtUrE OpTiMiZaTiOn Is ThE RoOt Of AlL EvIl.
  84. 84. ®©°
  85. 85. ®©°=NOt SeMaNtIcS! *
  86. 86. ®©° すべてのセマンティックが コンテンツ派生である必要はない。 ... NoT AlL SeMaNtIcS NeEd To Be CoNtEnT-DeRiVeD. NIcOlAs gaLlAgHeR
  87. 87. <div class="review"> <h1>CSS Architecture</h1> <p class="reviewer">Review: <span>Hiroki Tani</ span></p> <time datetime="2013-09-14">2013/09/14</time> <p class="review-summary">CSS Bible!</p> <p class="review-description">...</p> Rating: <span class="rating">4.5</span> </div>
  88. 88. <div itemscope itemtype="http://data- vocabulary.org/Review"> <h1 itemprop="itemreviewed">CSS Architecture</ h1> <p>Review: <span itemprop="reviewer">Hiroki Tani</span></p> <time itemprop="dtreviewed" datetime="2013-09-14">2013/09/14</time> <p itemprop="summary">CSS Bible!</p> <p itemprop="description">...</p> Rating: <span itemprop="rating">4.5</span> </div>
  89. 89. ®©°=* ClAsS!ClAsS!ClAsS! ...
  90. 90. ®©°311
  91. 91. /* Sass(.scss) */ %btn { border-radius: 6px; padding: 0.5em 1em; background-color: #CCC; } .btn-primary { @extend %btn; background-image: linear-gradient(...); color: #FFF; }
  92. 92. /* CSS */ .btn-primary { border-radius: 6px; adding: 0.5em 1em; background-color: #CCC; background-image: linear-gradient(...); color: #FFF; }
  93. 93. <button class="btn-primary">Save</button>
  94. 94. /* Sass(.scss) */ %btn { border-radius: 6px; padding: 0.5em 1em; background-color: #CCC; } %btn-primary { border-radius: 6px; padding: 0.5em 1em; background-color: #CCC; } %btn-large { font-size: 18px; } .save { @extend %btn; @extend %btn-primary; @extend %btn-large; }
  95. 95. /* CSS */ .save { border-radius: 6px; adding: 0.5em 1em; background-color: #CCC; background-image: linear-gradient(...); color: #FFF; font-size: 18px; }
  96. 96. <button class="save">Submit</button>
  97. 97. .clearfix:after,.btn_type2_A:after,.bnavi ul:after,.box_3col:after,.userData dl:after,.likeTool:after,.likeUser ul:after,.commentUser ul:after,.userData:after,.circleList li a:after,.time_count:after,.paging ul:after,.myData:after,.status:after,.bar:after,.month:a fter,.month2:after,.about:after,.sort:after,.mainList ul:after,.mainList2 li ul:after,.bnr_2col:after,.likeTool_lp:after,.flow:after, .radio:after,.btn_entry_2col:after,.sort2:after,ul#popup _message:after,.sort3:after,.f_circleList:after,.f_circl eList a:after,.mainList3 dl:after,.mainList3 ul:after,.box_2col:after,.frame_desc dl:after { content: ""; display: block; clear: both; height: 0; }
  98. 98. ®©°©°BEm bY yaNdEx
  99. 99. /* # Module */ /* ## Button */ .btn { ... } .btn-primary { ... } .btn-small { ... } /* ## Widget */ .widget { ... } .widget-title { ... } .widget-body { ... }
  100. 100. v vk.btn .btn-primary MOdIfIeR
  101. 101. 00 .widget .widget-body SUb-CoMpOnEnT
  102. 102. BLoCk,elEmEnT,moDiFiEr
  103. 103. BlOcK,ElEmEnT,MoDiFiEr
  104. 104. .ranking { ... } .ranking__thumbnail { ... } .ranking__item { ... } .nav-line { ... } .nav-line__item { ... } .nav-line_separated { ... } .nav-line_separated__item { ... }
  105. 105. /* # Module */ /* ## Button */ .btn { ... } .btn_primary { ... } .btn_small { ... } /* ## Widget */ .widget { ... } .widget__title { ... } .widget__body { ... }
  106. 106. /* # Module */ /* ## Button */ .btn { ... } .btn--primary { ... } .btn--small { ... } /* ## Widget */ .widget { ... } .widget__title { ... } .widget__body { ... }
  107. 107. ®©°=* UUuUgLy!
  108. 108. ®©°=AgReEeE!
  109. 109. ; パターンライブラリ/CSSスタイルガイド/テスト TOoL
  110. 110. ®©©°
  111. 111. ®©KsS STyLeGuIdE geNeRaToR
  112. 112. ®©°©°STyLedoCcO STyLeGuIdE geNeRaToR
  113. 113. /* A button suitable for giving stars to someone. :hover - Subtle hover highlight. .stars-given - A highlight indicating you've already given a star. .stars-given:hover - Subtle hover highlight on top of stars-given styling. .disabled - Dims the button to indicate it cannot be used. Styleguide 2.1.3. */ a.button.star{ ... } a.button.star.stars-given{ ... } a.button.star.disabled{ ... }
  114. 114. COmPoNeNt & & & &
  115. 115. COmPoNeNt & & & & WeB
  116. 116. BeSt pRaCtIcE
  117. 117. BeSt pRaCtIcES
  118. 118. ®©° どんなに多くの人が貢献したとしても、 どのコードも一人で書いたようにする。 ALl CoDe In AnY CoDe-BaSe ShOuLd LoOk LiKe A SiNgLe PeRsOn tYpEd It, EvEn WhEn MaNy PeOpLe ArE CoNtRiBuTiNg To It. NIcOlAs gaLlAgHeR
  119. 119. THaNkS @HiLoKi iNkDeSiGn.JpC
  120. 120. CrEdItS http://www.flickr.com/photos/darice/8526800143/ http://www.flickr.com/photos/franksvalli/5173283924/ http://www.flickr.com/photos/bdesham/2432400623/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×