Introduction to CSS Architecture

新卒社内勉強会(2015/6/4) の資料です

Transcript

1. Introduction to
   CSS Architecture
   in ৽ଔࣾ಺ษڧձ
   

   View Slide

2. ࣗݾ঺հ
   • Twitter: @morishitter_
   • GitHub: morishitter
   • εϓϥτΡʔϯ: ϥϯΫ20
   • χϯςϯυʔωοτϫʔΫID: CSS0830
   

   View Slide

3. ໨࣍
   • CSSͷ໰୊఺
   • طଘͷCSSઃܭख๏
   • CSSઃܭͷຊ࣭
   

   View Slide

4. CSSͷ໰୊఺
   

   View Slide

5. CSS is γϯϓϧ
   article h1 {
   font-size: 20px;
   padding-bottom: 5px;
   border-bottom: solid 1px #ccc;
   margin-bottom: 10px;
   }
   

   View Slide

6. γϯϓϧ ≒ ؆୯
   

   View Slide

7. article h1 {
   font-size: 20px;
   padding-bottom: 5px;
   border-bottom: solid 1px #ccc;
   margin-bottom: 10px;
   }
   article h1 + p.lead {
   font-size: 14px;
   color: #ddd;
   line-height: 1.5;
   }
   

   View Slide

8. article h1 {
   font-size: 20px;
   padding-bottom: 5px;
   border-bottom: solid 1px #ccc;
   margin-bottom: 10px;
   }
   article h1 + p.lead {
   font-size: 14px;
   color: #ddd;
   line-height: 1.5;
   }
   #header { }
   

   View Slide

9. article h1 {
   font-size: 20px;
   padding-bottom: 5px;
   border-bottom: solid 1px #ccc;
   margin-bottom: 10px;
   }
   article h1 + p.lead {
   font-size: 14px;
   color: #ddd;
   line-height: 1.5;
   }
   #header { }
   #header > img#logo{ }
   ul > list.item { }
   .menu { }
   .menu .nav { }
   #sidebar { }
   #sidebar .widget { }
   

   View Slide

10. #header { }
    #header > img#logo{ }
    ul > list.item { }
    #menu { }
    #menu .nav { }
    #sidebar { }
    #sidebar .widget { }
    body { }
    .container{ }
    .container > h2.title { }
    .col-md-5 { }
    .row .col-md-5 { }
    .landing > h1 { }
    .widget .title { }
    #sidebar > img#logo{ }
    ul > list#logo { }
    #article { }
    #article .title { }
    footer small { }
    footer small .info { }
    

    View Slide

11. !important;
    

    View Slide

12. ϧʔϧηοτͷӨڹൣғ͕
    Θ͔Βͳ͘ͳΔ
    

    View Slide

13. ؆୯ ≒ յΕ΍͍͢
    

    View Slide

14. CSSͷ໰୊఺ʢٕज़తଆ໘ʣ
    • ߏจ͕ශऑ
    • ϧʔϧηοτʹείʔϓ͕ͳ͍
    • શͯͷϧʔϧηοτ͕άϩʔόϧఆٛ
    

    View Slide

15. CSSͷ໰୊఺ʢӡ༻తଆ໘ʣ
    • σβΠϯ͕มΘΒͳ͍WebαΠτ͸ͳ͍
    • ৔౰ͨΓతͳमਖ਼͕܁Γฦ͞ΕΔ
    

    View Slide

16. CSSͷ໰୊఺ʢࣾձతଆ໘ʣ
    • CSSᢞΊΒΕ͗͢
    • ϓϩάϥϚʹ͸όΧʹ͞ΕɺσβΠφʔ͕ࡶʹॻ͘
    • ยखؒCSS
    • ίʔυͷైḤͳ؅ཧ
    

    View Slide

17. CSS ͸ͨͩWebͷϏδϡΞϧσβΠϯ
    ΛදݱͰ͖Ε͹͍͍΋ͷͰ͸ͳ͍
    

    View Slide

18. WebαΠτ͸ΞʔτͰ͸ͳ͘
    ৘ใγεςϜ
    

    View Slide

19. CSS ΋ιϑτ΢ΣΞͷҰ෦ͱͯ͠
    อक͞ΕΔ΂͖ͩ͠
    ϦϑΝΫλϦϯάͷର৅
    

    View Slide

20. CSS ͪΌΜͱॻ͜͏ͳ
    

    View Slide

21. طଘͷCSSઃܭख๏
    

    View Slide

22. طଘͷCSSઃܭख๏
    • OOCSS
    • SMACSS
    • BEM
    

    View Slide

23. OOCSS
    

    View Slide

24. OOCSS
    • Object Oriented CSS (by Nicole Sullivan)
    • ʮߏ଄ͱݟͨ໨ͷ෼཭ʯ
    • ʮίϯςφͱίϯςϯπͷ෼཭ʯ
    • CSSઃܭͷϕʔεͱͳΔ֓೦
    • ଟ͘ͷCSSϑϨʔϜϫʔΫͰ࠾༻
    

    View Slide

25. OOCSS
    WebϖʔδΛϨΰͷΑ͏ʹߟ͑Δ
    

    View Slide

26. OOCSS
    .btn {
    property: value;
    }
    /* Decoration */
    .btn-danger { }
    .btn-success { }
    /* Layout */
    .btn-large { }
    .btn-small { }
    

    View Slide

27. OOCSS
    Submit
    

    View Slide

28. OOCSS
    Submit
    Delete
    

    View Slide

29. SMACSS
    

    View Slide

30. SMACSS
    • Scalable and Modular Architecture for CSS
    • ϕʔε͸OOCSS
    • OOCSS + ໋໊نଇ Έ͍ͨͳ΋ͷ
    

    View Slide

31. SMACSS
    • CSS ͷΧςΰϥΠζ
    • Base
    • Layout
    • Module
    • State
    • Theme
    

    View Slide

32. Base
    • ཁૉͦͷ΋ͷͷσϑΥϧτͷελΠϧ
    • CSSϦηοτ͕͜Ε
    body {
    background: white;
    }
    p {
    margin-bottom: .5rem;
    }
    

    View Slide

33. Layout
    • ϖʔδΛΤϦΞ͝ͱʹ෼ׂ
    .l-header {
    margin-bottom: 20px;
    }
    .l-footer {
    border-top: 1px solid gray;
    }
    .l-main {
    float: left;
    width: 80%;
    }
    

    View Slide

34. Module
    • ࠶ར༻Մೳͳύʔπ
    • Module͸Layoutͷதʹ഑ஔ͞ΕΔ
    • ผͷLayoutͰ΋࠶ར༻Ͱ͖ΔΑ͏ʹ׬શʹ
    ಠཱ
    

    View Slide

35. Module
    
    
    
    alt="">
    
    
    

    View Slide

36. State
    • Layout΍Moduleͷಛఆͷঢ়ଶΛද͢
    .is-hidden {
    display: none;
    }
    .is-error {
    color: red;
    }
    

    View Slide

37. Theme
    • ίϯϙʔωϯτͷ૷০
    .theme-border {
    border-color: #ccc;
    }
    .theme-background {
    background-color: #eee;
    }
    

    View Slide

38. BEM
    

    View Slide

39. BEM
    • Block, Element, Modifier
    • Yandex੡
    

    View Slide

40. BEM (Block)
    • ̍ͭͷίϯϙʔωϯτͷ·ͱ·Γ
    

    View Slide

41. Element (BEM)
    • BlockΛߏ੒͢Δཁૉ
    • ΞϯμʔείΞ2ͭ (__) Λ࢖͏͜ͱ͕ଟ͍
    • Block__Element
    

    View Slide

42. BEM (Modifier)
    • Block ·ͨ͸ ElementͷόϦΤʔγϣϯ
    • SMACSSͰ͍͏StateͱTheme
    • ϋΠϑϯ2ͭ (--) Λ࢖͏͜ͱ͕ଟ͍
    (MindBEMding)
    • Block—Modifier, Element--Modifier
    

    View Slide

43. BEM
    
    
    
    
    
    
    

    View Slide

44. ͦͷଞ
    • ACSS
    • MCSS
    • FLOCSS
    

    View Slide

45. Web੍࡞ऀͷͨΊͷ
    CSSઃܭͷڭՊॻ
    

    View Slide

46. ཁ͢Δʹ
    

    View Slide

47. CSSͷϧʔϧηοτʹ͸
    είʔϓ͕ͳ͍͔Β໋໊نଇ
    ͰͳΜͱ͔͠Α͏
    

    View Slide

48. CSSઃܭͷຊ࣭
    

    View Slide

49. ϚϧνΫϥε ͱ γϯάϧΫϥε
    • ϚϧνΫϥεઃܭɿHTMLͷclassଐੑʹෳ਺ͷ஋
    Λ૊Έ߹ΘͤͯελΠϧΛ౰ͯΔ (OOCSS)
    • γϯάϧΫϥεઃܭɿHTMLͷclassଐੑʹ1ͭͷ஋
    ͰελΠϧΛ౰ͯΔ (BEM)
    

    View Slide

50. ϚϧνΫϥεઃܭ
    Submit
    

    View Slide

51. ϚϧνΫϥεઃܭͷϝϦοτ
    • ϧʔϧηοτͷ࠶ར༻
    • ৑௕Ͱͳ͘ͳΓϑΝΠϧαΠζ͕খ͘͞ͳΔ
    

    View Slide

52. ϚϧνΫϥεઃܭͷ໰୊఺
    • ϧʔϧηοτʹڞ௨͢ΔϓϩύςΟ͕͋ͬͨ
    Β্ॻ͖͞ΕΔ
    • ϧʔϧηοτؒʹ҉໧ͷґଘؔ܎͕Ͱ͖Δ
    • ෼ް͍ελΠϧΨΠυ͕ඞཁ
    • HTMLͷηϚϯςΟοΫεΛଛͶΔ
    

    View Slide

53. γϯάϧΫϥεઃܭ
    Submit
    Submit
    

    View Slide

54. γϯάϧΫϥεઃܭͷϝϦοτ
    • 1classଐੑʹରͯ͠1ϧʔϧηοτͳͷͰγϯ
    ϓϧ
    • ίϯςϯπͷ಺༰ʹదͨ͠ηϚϯςΟοΫͳ
    ໊લ
    

    View Slide

55. γϯάϧΫϥεઃܭͷ໰୊఺
    • 1ͭͷϧʔϧηοτ͕େ͖͘ͳΓɺهड़͕৑௕
    ʹͳΔ
    • ϧʔϧηοτͷ࠶ར༻ੑ͕௿͍
    • ϑΝΠϧαΠζͷංେԽ
    • αΠτύϑΥʔϚϯεͷ௿Լ
    

    View Slide

56. γϯάϧΫϥεઃܭͱ
    ϚϧνΫϥεઃܭͷ
    ͍͍ͱ͜औΓΛͨ͠
    ͍͖͞ΐ͏ͷઃܭख๏
    by @morishitter_
    

    View Slide

57. CSSઃܭͷຊ࣭͸
    

    View Slide

58. ηϨΫλͷ໋໊نଇͰ͸ͳ͘
    

    View Slide

59. ϧʔϧηοτͷ෼ׂཻ౓
    

    View Slide

60. ཧ૝తͳ CSS ͱ͸Կ͔
    

    View Slide

61. CSS ʹݶͬͨ࿩Ͱ͸ͳ͍
    

    View Slide

62. ࠓࣗ෼͕࢖͍ͬͯΔٕज़ɾಓ۩͸
    ࣗ෼ʹͱͬͯҰମͲ͏͍͏ଘࡏͳͷ͔
    

    View Slide

63. ࣌ʹ͸ͦͷٕज़ͷࢥ૝͑͞΋͍ٙ
    ΑΓྑ͍΋ͷΛ࡞Γ͍ͨ
    

    View Slide

64. ಓ۩ʹৼΓճ͞ΕΔͳ
    ղܾ͍ͨ͠໰୊͸͍ͭ΋ಉ͡
    

    View Slide

65. શମΛ၆ᛌ͠
    ຊ࣭ΛݟۃΊΔ
    

    View Slide

66. Thanks :D
    Any Questions?
    @morishitter_
    

    View Slide