O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

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

  • Seja o primeiro a comentar

メンテナブルでありつづけるための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

    Seja o primeiro a comentar

    Entre para ver os comentários

  • plastiktraume

    Jun. 9, 2015
  • tick3627

    Jun. 10, 2015
  • DaisukeIgarashi

    Jun. 11, 2015
  • makiko-t

    Jun. 11, 2015
  • junkomieno

    Jun. 16, 2015
  • ssusercb0e69

    Jul. 9, 2015
  • watanabae-ei

    Jul. 16, 2015
  • daisukeyamabayashi3

    Jul. 17, 2015
  • vantischen

    Jul. 28, 2015
  • TakafumiHirata

    Aug. 3, 2015
  • shooohei

    Aug. 4, 2015
  • kosukemuramatsu39

    Aug. 20, 2015
  • yoshiyukiohga

    Aug. 31, 2015
  • TakahiroSaeki1

    Oct. 2, 2015
  • satoshishoji

    Feb. 13, 2016
  • KazumaMatsumoto1

    Mar. 15, 2016
  • KoichiHigashi

    Apr. 23, 2016
  • RenMishima

    Jul. 27, 2016
  • cometmiki

    Dec. 23, 2016
  • ssuserded453

    Nov. 1, 2018

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

Vistos

Vistos totais

36.059

No Slideshare

0

De incorporações

0

Número de incorporações

19.886

Ações

Baixados

116

Compartilhados

0

Comentários

0

Curtir

157

×