Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

メンテナブルでありつづけるためのCSS設計

31,519 views

Published on

2014年11月8日 大阪
「Web制作者のためのCSS設計の教科書」出版記念イベント x CSSオジサン #0 のスライドです。

Published in: Technology
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

メンテナブルでありつづけるためのCSS設計

  1. 1. ًٝذشـٕד֮׶אבֽ׷׋׭ך$44鏣鎘 8FCⵖ⡲罏ך׋׭ך$44鏣鎘ך侄猰剅$44ؔآ؟ٝ
  2. 2. http://www.slideshare.net/hiloki/thinking-about-css-architecture
  3. 3. 靼䬪埠 Hiroki Tani Front-end Engineer ! github.com/hiloki twitter.com/hiloki inkdesign.jp
  4. 4. 1994.10.10
  5. 5. http://codepen.io/hiloki/full/ahdEF
  6. 6. 20 years of CSS 鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ ،صً٦ءّٝծؿ؍ٕةծFUD
  7. 7. 20 years of CSS 鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ ،صً٦ءّٝծؿ؍ٕةծFUD
  8. 8. $44כ㠨׸װְׅ
  9. 9. 㠨׸װְׅ ͑ 僒׃ְ
  10. 10. Easy .text { color: green; }
  11. 11. Easy .text { color: green; } ! .lead .text { color: blue } div class=lead /div
  12. 12. too Fragile #main { ... } #main .article { ... } #main .article .title { #main .breaking .title { #header #logo img { ... #header li#logoTop { ... #header li#logoTop:after .article-header .datetime ul.member-list li.member .widget p,.widget ul { ... #sidebar .widget { ... } #sidebar li a.register{} body.landing #main section #slider-control div { #bannerList li div#rotate
  13. 13. ! ⏲ # 
  14. 14. 㠨׸זְ㸣樴ז鏣鎘׾実׭׷ךדכזֻծ 㠨׸׋הֹח⹃孡׾䭯׏ג⥜䗁דֹ׷鏣鎘׾ ˑ 俕谏牂⛲
  15. 15. OOCSS Nicole Sullivan @stubbornella
  16. 16. http://codepen.io/hiloki/full/dnGeB
  17. 17. div class=speaker div class=image img src=tani.jpg /div div class=inner p class=name…/p div class=biography p.../p /div /div /div
  18. 18. .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .image { float: left; margin-right: 15px; } .speaker .image img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
  19. 19. div class=book div class=cover img src=book.jpg /div div class=inner p class=title.../p p class=info ... /p div class=intro p.../p /div ul class=shop li.../li /ul /div /div
  20. 20. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  21. 21. div class=event a href=event.html div class=thumbnail img src=event.jpg /div div class=inner p class=event__name … /p /div /a /div
  22. 22. .event a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  23. 23. %
  24. 24. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  25. 25. div class=media speaker div class=media__image image img src=tani.jpg /div div class=media__body inner p class=name…/p div class=biography p.../p /div /div /div
  26. 26. div class=media book div class=media__image cover img src=book.jpg /div div class=media__body inner p class=title.../p p class=info ... /p div class=intro p.../p /div ul class=shop li.../li /ul /div /div
  27. 27. div class=media event a href=event.html div class=media__image thumbnail img src=event.jpg /div div class=media__body inner p class=event__name … /p /div /a /div
  28. 28. .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .image { float: left; margin-right: 15px; } .speaker .image img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
  29. 29. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  30. 30. .event a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  31. 31. OOCSS
  32. 32. OOCSS SMACSS BEM SUIT CSS AMCSS MCSS FLOCSS
  33. 33. ⥯ך $44鏣鎘ךه؎ٝز
  34. 34. 1 إؙٖةכ崮ֻծ䠐㔳涸ח
  35. 35. 2 ㄏせ鋉⵱׾䭯א
  36. 36. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  37. 37. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media .image { float: left; margin-right: 15px; } .media .body { overflow: hidden; }
  38. 38. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media .image { float: left; margin-right: 15px; } .media .body { overflow: hidden; }
  39. 39. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  40. 40. https://github.com/hiloki/flocss
  41. 41. /* Media */ .c-media { overflow: hidden; /* Clearfix */ } .c-media__image { float: left; margin-right: 15px; } .c-media__body { overflow: hidden; }
  42. 42. !-- 一般的でない略称は避ける -- div class=c-wdt p-rcmdTpcs__li よくわからない /div ! div class=c-widget p-recommendTopics__list 長い...が分かる /div
  43. 43. /* Emmet/Zen-codingのAliasを参考にする */ .u-mts { margin-top: 10px } /* margin-top small */ .u-vam { vertical-align: middle } .u-fl { float: left }
  44. 44. 3 㔐粸׶鵤׃׋׵؝ٝه٦طٝزךⱄ鏣鎘
  45. 45. @ @ @ 
  46. 46.
  47. 47.
  48. 48. @ @ 
  49. 49.
  50. 50. 4 +4ךة٦؜حزחأة؎ٕ׾䭯׋ׇזְ
  51. 51. $('.profile .button') .on('click', function(e){ ... });
  52. 52. div class=profile ... button class=button Save! /button /div
  53. 53. div class=profile ... button class=“profile__button” Save! /button /div
  54. 54. $('.js-save-profile') .on('click', function(e){ ... });
  55. 55. /* スタイルを持たせてはいけない */ .js-save-profile { ... }
  56. 56. div class=profile ... button class=“button js-save-profile“ Save! /button /div
  57. 57. div class=profile ... button class=“profile__button js-save-profile” Save! /button /div
  58. 58. button class=c-button js-tap” Tappable /button ! !-- カスタムデータ属性を使う -- button class=c-button data-tap Tappable /button
  59. 59. 5 TUZMF㾩䚍דך鎸鶢כ窫㼎׃זְ
  60. 60. div style=“margin-bottom: 242pxblah blah blah/div
  61. 61. 6 ؝٦سךⱄⵃ欽ָׅץגדכזְ
  62. 62. h1 class=section heading The Heading /h1 ! div class=section The Box /div
  63. 63. .section { padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; } ! .heading { margin-bottom: 20px; font-size: 18px; font-weight: bold; }
  64. 64. .section { padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; } ! .heading { margin-bottom: 20px; padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; font-size: 18px; font-weight: bold; }
  65. 65. h1 class=heading The Heading /h1 ! div class=section The Box /div
  66. 66. .s-box { padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; }
  67. 67. h1 class=“s-box heading” The Heading /h1 ! div class=s-box section The Box /div
  68. 68. 7 رؠ؎ش٦הך؝ىُص؛٦ءّٝ
  69. 69. $44فٔفٗإح؟כ鏣鎘ך㉏겗׾鍑寸ׅ׷
  70. 70. No. 
  71. 71. .btn { ... } ! .btn--primary { background-color: #F31; color: #FFF; } ! .btn--large { font-size: 1.5em; }
  72. 72. a class=btn btn--primarySave/a ! a class=btn btn--primary btn--largeRegister/a
  73. 73. %btn { display: inline-block; border-radius: 6px; vertical-align: middle; padding: .6em 1em; cursor: pointer; } ! %btn--primary { background-color: #F31; color: #FFF; font-weight: 700; } ! %btn--large { font-size: 1.5em; }
  74. 74. .save-button { @extend %btn; @extend %btn--primary; } ! .register-button { @extend %btn; @extend %btn--primary; @extend %btn--large; }
  75. 75. .save-button, .register-button { display: inline-block; border-radius: 6px; vertical-align: middle; padding: .6em 1em; cursor: pointer; } ! .save-button, .register-button { background-color: #F31; color: #FFF; font-weight: 700; } ! .register-button { font-size: 1.5em; }
  76. 76. a class=save-buttonSave/a ! a class=register-buttonRegister/a
  77. 77. Smart!
  78. 78. Smart! ׃ַ׃䪔ְָꨇ׃ְ
  79. 79. .mod_listType1 { section { margin-bottom:1em; } h1 { margin:0 0 .5em .5em; font-size:fz(15); -webkit-text-shadow:0px 1px 0px rgba(255,255,255,0.75); text-shadow:0px 1px 0px rgba(255,255,255,0.75); } ul { background-color:#ffffff; border:#c3c3c3 1px solid; overflow:hidden; @include radius(12px); li { border-top:#C3C3C2 1px solid; margin-top:-1px; margin-bottom:1px; font-size:fz(16); :first-child { a.disable { @include radius-tr(12px); @include radius-tl(12px); }
  80. 80. /* listType */ .mod_listType1 section, .mod_listType3 section, .mod_listType4 section, .mod_listType5 section, .mod_listType8 section, .mod_listType7 section { margin-bottom: 1em; } .mod_listType1 h1, .mod_listType3 h1, .mod_listType4 h1, .mod_listType5 h1, .mod_listType8 h1, .mod_listType7 h1 { margin: 0 0 .5em .5em; font-size: 15px; -webkit-text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); } .mod_listType1 ul, .mod_H[JQ䖓 listType3 ul, .mod_listType4 ul, .mod_listType5 ul, .mod_listType8 ul, .mod_listType7 ul { background-border: overflow: border-440kb color: #ffffff; #c3c3c3 1px solid; hidden; radius: 12px; } .mod_listType1 ul li, .mod_listType3 ul li, .mod_listType4 ul li, .mod_listType5 ul li, .mod_listType8 ul li, .mod_listType7 ul li { border-top: #C3C3C2 1px solid; margin-top: -1px; margin-bottom: 1px; font-size: 16px; } .mod_listType1 ul li:first-child a.disable, .mod_listType3 ul li:first-child a.disable, .mod_listType4 ul li:first-child a.disable, .mod_listType5 ul li:first-child a.disable, .mod_listType8 ul li:first-child a.disable, .mod_listType7 ul li:first-child a.disable { border-radius: 12px; border-radius: 12px; } .mod_listType1 ul li:last-child a.disable, .mod_listType3 ul li:last-child a.disable, .mod_listType4 ul li:last-child a.disable, .mod_listType5 ul li:last-child a.disable, .mod_listType8 ul li:last-child a.disable, .mod_listType7 ul li:last-child a.disable { border-radius: 12px; border-radius: 12px;
  81. 81. Do 1BSUJBM!JNQPSU 知⽃ז!NJYJO ⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
  82. 82. Do 1BSUJBM!JNQPSU 知⽃ז!NJYJO ⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
  83. 83. .c-button--primary { $primaryColor: #F31; background-color: $primaryColor; :hover { background-color: mix($primaryColor,#FFF,80%); } }
  84. 84. Do 1BSUJBM!JNQPSU 知⽃ז!NJYJO ⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
  85. 85. // pc.app.scss // // Foundation @import foundation/normalize; @import foundation/variables; @import foundation/mixin; @import “foundation/base”; ! // Layout @import layout/app; ! // Object @import object/components/button; @import object/components/avatar; @import object/components/media; @import object/project/header; @import object/project/profile; @import object/project/articles;
  86. 86. // object/project/_profile.scss // // =============== // # Profile // =============== ! .p-profile {...} .p-profile__avatar {...} .p-profile__name {...} .p-profile__biography {...} ...
  87. 87. pc.app.scss pc.lp.scss sp.app.scss sp.lp.scss
  88. 88. pc.app.scss pc.lp.scss sp.app.scss sp.lp.scss
  89. 89. /** * Concatenation **/ concat: { pc: { files: { 'temp/pc.app.scss': [ 'app/stylesheets/foundation/*.scss', 'app/stylesheets/layout/_app.scss', 'app/stylesheets/object/component/*.scss', 'app/stylesheets/object/project/*.scss', 'app/stylesheets/object/utility/*.scss' ] } }, sp: { files: { 'temp/sp.app.scss': [ 'app/stylesheets/foundation/*.scss', 'app/stylesheets/layout/_app.scss', 'app/stylesheets/object/component/sp/*.scss', 'app/stylesheets/object/project/sp/*.scss', 'app/stylesheets/object/utility/sp/*.scss'
  90. 90. The first draft ˑ of anything is shit قىؚٝؐؑ؎
  91. 91. Thank you! ! github.com/hiloki twitter.com/hiloki inkdesign.jp

×