Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to CSS Architecture

Introduction to CSS Architecture

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

Masaaki Morishita

June 04, 2015
Tweet

More Decks by Masaaki Morishita

Other Decks in Programming

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