迷わない!学べば分かるCSS設計

Web業界なんでも勉強会（第２回）のセッション内容です。

Transcript

1. ໎Θͳ͍ʂֶΜͰָ͢ΔCSSઃܭ Yohei Munesada 8FCۀքͳΜͰ΋ษڧձ
   WPM IUUQTqJDLSQP.BEZ
2. फఆ
   ༸ฏ
   at HTML5ϏΪφʔζ About me http://www.yoheim.net
3. ໰୊Ͱ͢
4. ͲͷΑ͏ʹϚʔΫΞοϓ͠·͔͢ʁ IUUQTTNBDTTDPN
5. ϚʔΫΞοϓͰ͸͍ͭ΋೰Ή Ϋϥε໊͸Ͳ͏͠Α͏ *%ʁΫϥεʁཁૉʁ ελΠϧͷཻ౓͸ Χεέʔυ͕େม
6. Ͳ͏͢Ε͹ྑ͍͔ʁ
7. Ͳ͏͢Ε͹ྑ͍ͷ͔ʁ ઌਓͷ஌ܙΛआΓΔʂ  ଟ͘ͷ৔߹ʹղܾࡦ͸͢Ͱʹଘࡏ͠·͢ɻ
   ͦΕΛֶΜͰ਎ʹ͚ͭΕ͹ɺແବʹ೰Ήඞཁ͸͋Γ·ͤΜʂ
8. ಉ͡Α͏ͳ͜ͱͰ೰ΜͰ͍Δਓ͕͍Δ Throwing every new style you create onto the end of a single file would make finding things more difficult and would be very confusing for anybody else working on the project. 
 Of course, you likely have some organization in place already. ৽͘͠ελΠϧΛఆٛ͢Δͨͼʹɺ
   ϑΝΠϧͷ࠷ޙʹ௥هͯ͠ߦͬͨͷͰ͸ɺ
   ΋͏ͦΕ͸ݟ͚ͭΔͷ͸ࠔ೉ͩ͠ɺଞͷਓ΋ࠞཚͤͯ͞͠·͏ɻ
   ΋͔ͨ͠͠Βطʹಉ͡Α͏ͳελΠϧ͕ଘࡏ͢Δ͔΋͠Εͳ͍ɻ https://smacss.com/book/categorizing
9. Agenda 㾎 ϚʔΫΞοϓ͸೰Έ͕͍ͬͺ͍ 㾎 $44ઃܭʹٻΊΒΕΔͭͷཁૉ 㾎 ͭͷղܾࡦ 㾎 4."$44 㾎 ·ͱΊ
10. CSSઃܭʹٻΊΒΕΔ4ͭͷཁૉ Predictable ͦΕ͕ԿͰ͋Δͷ͔ɺͦΕΛݟΔ͚ͩͰ༧ଌ͢Δ͜ͱ͕Ͱ͖Δ Reusable ಉ͡ϚʔΫΞοϓ΍ελΠϧΛଞͷ৔ॴͰ΋ಉ͡Α͏ʹ࢖͏͜ͱ͕Ͱ͖Δ Maintainable มߋΛՃ͑Δ͜ͱ͕Ͱ͖Δ Scalable େن໛αΠτʹͳͬͨͱͯ͠΋ಉ͡Α͏ʹར༻Ͱ͖Δ
11. ͭͷղܾࡦ
12. ओཁͳͭ$44ઃܭ OOCSS SMACSS BEM
13. Object Oriented CSS a CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site. ܁Γฦ͠දݱ͞ΕΔύλʔϯΛ$44ΦϒδΣΫτͱͯ͠ଊ͑ɺ
    ͦΕ͸)5.- $44 +BWB4DSJQU͔Βߏ੒͞ΕΔಠཱͨ͠ϞδϡʔϧͰ͋Δɻ
    ಠཱ͍ͯ͠ΔͨΊϞδϡʔϧ͸αΠτ಺Λ௨ͯ͠࠶ར༻͢Δ͜ͱ͕Ͱ͖Δɻ https://github.com/stubbornella/oocss/wiki
14. Scalable and Modular At the very core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns. 4."$44ͷ࠷΋ίΞͱͳΔߟ͑ํ͸෼ྨͰ͢ɻ
    $44ϧʔϧΛ෼ྨ͢Δ͜ͱͰύλʔϯΛݟ͚ͭΔ͜ͱ͕Ͱ͖ɺ
    ͦΕΒύλʔϯΛ࣮ݱ͢ΔͨΊͷΑΓྑ͍ํ๏Λཱ֬͢Δ͜ͱ͕Ͱ͖·͢ɻ Architecture for CSS https://smacss.com/book/categorizing
15. Block, Element, Modifier We used BEM principles to create a set of front-end development techniques and tools. A block is an independent entity, An element is a part of a block, and A modifier is a property of a block or an element that alters its look or behavior. #&.ͷݪཧ͸ϑϩϯτΤϯυ։ൃͷςΫχοΫ΍πʔϧΛ࡞Γग़͢ɻ
    #MPDL͸ಠཱͨ͠ϖʔδͷߏ੒ཁૉͰ͋Γɺ&MFNFOU͸#MPDLͷཁૉͰ͋Γɺ
    .PEJpFS͸#MPDL΍&MFNFOUͷঢ়ଶΛมߋͤ͞ΔཁૉͰ͋Δɻ https://bem.info/method/definitions/
16. ओཁͳ3ͭCSSઃܭ OOCSS ΦϒδΣΫτࢦ޲ΛऔΓೖΕͨ$44ઃܭ SMACSS #BTFɺ-BZPVUɺ.PEVMFɺ4UBUFɺ5IFNFͷͭʹ෼ղͨ͠$44ઃܭ BEM #MPDLɺ&MFNFOUɺ.PEJpFS΁ͷ෼ղͱɺݫ໋໊͍͠ϧʔϧ
17. ओཁͳ3ͭCSSઃܭ OOCSS ΦϒδΣΫτࢦ޲ΛऔΓೖΕͨ$44ઃܭ SMACSS #BTFɺ-BZPVUɺ.PEVMFɺ4UBUFɺ5IFNFͷͭʹ෼ղͨ͠$44ઃܭ BEM #MPDLɺ&MFNFOUɺ.PEJpFS΁ͷ෼ղͱɺݫ໋໊͍͠ϧʔϧ શମʙৄࡉ·Ͱྑ͍όϥϯε
18. ओཁͳ3ͭCSSઃܭ OOCSS https://github.com/stubbornella/oocss/wiki SMACSS BEM https://bem.info/ 63-Λ঺հ͠·͢
19. SMACSS Scalable and Modular Architecture for CSS IUUQTqJDLSQU:SP3
20. SMACSS͸ CSSઃܭΛ5ͭʹ෼ղ͢Δ
21. Base Layout Module State Theme αΠτશମͷελΠϧΛఆٛ͢Δ ϨΠΞ΢τΛఆٛ͢Δ αΠτͷ֩ͱͳΔߏ੒ཁૉΛఆٛ͢Δ ঢ়ଶͷมԽΛఆٛ͢Δ ςʔϚΛఆٛ͢Δ ج
    ૅ ม
    Խ $44ઃܭΛͭʹ෼ղ͢Δ
    
    4."$44
22. 㾎 αΠτશମͰར༻͢Δڞ௨ελΠϧΛఆٛ͢Δ Base Base > Layout > Module > State > Theme
23. αΠτશମͰڞ௨ͷελΠϧ - Base 'POU
    4J[F -JOL
    $PMPS 'POU
24. html,body,div,p { margin:0; padding:0; } body { background: white; font-family: "Bell MT"; font-size:16px; color:#333; } a { color:#336633; } table { … } 㾎 )5.-ཁૉ΁ͷ૷০Λߦ͏ 㾎 $44ϦηοτΛఆٛ͢Δ 㾎 JNQPSUBOU
    ͸࢖Θͳ͍ 㾎 άϩʔόϧʹఆٛ͢Δ αΠτશମͰڞ௨ͷελΠϧ - Base
25. Layout 㾎 αΠτͷࠎ૊ΈΛఆٛ͢Δ
    㾎 ϔομʔɺφϏήʔγϣϯɺϝΠϯͳͲ Base > Layout > Module > State > Theme
26. αΠτͷࠎ૊ΈΛఆٛ͢Δ - Layout .l-header .l-primary .l-article .l-nav
27. .l-header { background: #091f29; color: #fff; text-align: right; font-size: 90%; } .l-primary { background: #3399cc; } 㾎 άϩʔόϧʹఆٛ͢Δ 㾎 *%૷০΋0,͕ͩʜɺ/PU
    (PPE 㾎 M<ϨΠΞ΢τ໊>
    ͷωʔϛϯάϧʔϧ αΠτͷࠎ૊ΈΛఆٛ͢Δ - Layout
28. Module 㾎 αΠτΛߏ੒͢Δओཁͳཁૉ
    㾎 ͻͱ·ͱ·ΓͷػೳΛ࣋ͪɺ࠶ར༻ՄೳͰ͋Δ
    㾎 φϏήʔγϣϯɺΧʔϧηϧɺೖྗϑΥʔϜͳͲ Base > Layout > Module > State > Theme
29. ͻͱ·ͱ·ΓͷػೳΛ࣋ͭ - Module *OUSPϞδϡʔϧ .FOVϞδϡʔϧ
30. .intro {…} .intro-image { float: left; margin-right: 20px; } 㾎 άϩʔόϧʹఆٛ͢Δ͜ͱͰ
 ਌ཁૉ͔Βಠཱͤ͞Δ 㾎 Ϟδϡʔϧ໊ΛΫϥε໊ʹ͢Δ ͻͱ·ͱ·ΓͷػೳΛ࣋ͭ - Module 㾎 Ϟδϡʔϧͷߏ੒ཁૉ͸ɺ
 <Ϟδϡʔϧ໊><ཁૉ໊>ͷ
 ωʔϛϯάϧʔϧ͕ྑ͍͔΋ #&.ΑΓ
31. Best Practice 01 )5.-ཁૉ΁ͷम০Λආ͚Δ
32. HTMLཁૉ΁ͷम০Λආ͚Δ - Module <div class="fld"> <span>Folder Name</span> </div> .fld span { padding-left: 20px; background: url(folder-icon.png); } HTML CSS
33. ΋͠ӡ༻Ͱมߋ͕͋ͬͨ৔߹ <div class="fld"> <span>Folder Name</span> <span>(32 items)</span> </div> .fld > span {…} .fld > span:last-child { padding-left: 0; background: none; } HTML CSS ໘౗ͳΧεέʔυ͕
    ൃੜ͢Δ
34. ղܾࡦɿHTMLཁૉʹम০͠ͳ͍ <div class="fld"> <span class=“fld-name”>Folder Name</span> <span class=“fld-items”>(32 items)</span> </div> .fld .fld-name {…} .fld .fld-items {…} HTML CSS
35. Best Practice 02 Ϟδϡʔϧ಺ཁૉͷΧεέʔυ
36. <div class="pod"> <input type=“text” class=“pod-input”> </div> HTML ྫ͑͹ೖྗϑΥʔϜ͕͋Δͱ͠·͢ .pod .pod-input { width: 50%; } CSS
37. <div class=“l-nav”> <div class="pod"> <input type=“text” class=“pod-input”> </div> </div> HTML φϏήʔγϣϯ಺Ͱ͸inputͷԣ෯Λݻఆ͍ͨ͠ʂ .l-nav .pod .pod-input { width: 180px; } CSS ਌ΫϥεͰΧεέʔυ͠ͳ͍ MOBWͰ͔͠
    ࢖͑ͳ͍ ελΠϧͷ
    ࠶ར༻͕Ͱ͖ͳ͍
38. HTML ղܾࡦɿΧεέʔυ༻ͷΫϥεΛ࡞੒͢Δ .pod.pod-constrained .pod-input { width: 180px; } CSS MOBWҎ֎Ͱ΋
    ࢖͑Δ ελΠϧͷ
    ࠶ར༻͕Ͱ͖Δ <div class=“l-nav”> <div class=“pod pod-constrained"> <input type=“text” class=“pod-input”> </div> </div>
39. Base Layout Module State Theme αΠτશମͷελΠϧΛఆٛ͢Δ ϨΠΞ΢τΛఆٛ͢Δ αΠτͷ֩ͱͳΔߏ੒ཁૉΛఆٛ͢Δ ঢ়ଶͷมԽΛఆٛ͢Δ ςʔϚΛఆٛ͢Δ ج
    ૅ ม
    Խ $44ઃܭΛͭʹ෼ղ͢Δ
    
    4."$44
40. Base Layout Module State Theme αΠτશମͷελΠϧΛఆٛ͢Δ ϨΠΞ΢τΛఆٛ͢Δ αΠτͷ֩ͱͳΔߏ੒ཁૉΛఆٛ͢Δ ঢ়ଶͷมԽΛఆٛ͢Δ ςʔϚΛఆٛ͢Δ ج ૅ ม
    Խ $44ઃܭΛͭʹ෼ղ͢Δ
    
    4."$44
41. State 㾎 ঢ়ଶͷมԽΛఆٛ͢Δ
    㾎 ϝοηʔδͷΤϥʔදࣔɺΞίʔσΟΦϯͷ։ดɺͳͲ Base > Layout > Module > State > Theme
42. ঢ়ଶͷมԽΛఆٛ͢Δ - State ϝοηʔδͷΤϥʔදࣔ
43. <div class="message is-error"> There are some errors… </div> 㾎 JT<ঢ়ଶ໊>
    ͷωʔϛϯάϧʔϧ 㾎 ඞཁʹԠͯ͡
    JNQPSUBOU
    ΋࢖͏ 㾎 άϩʔόϧͳ$44ͱͯ͠ఆٛ͢Δ ঢ়ଶͷมԽΛఆٛ͢Δ - State .message { background: green; color: white; } .is-error { background: red; }
44. Best Practice 01 Ϟδϡʔϧʹґଘ͢Δ4UBUF
45. .tab { background: purple; color: white; } ղܾࡦɿϞδϡʔϧ໊ΛΫϥε໊ʹؚΊΔ CSS 㾎 ಛఆϞδϡʔϧʹର͢Δ
 4UBUF༻ͷΫϥε໊ͷωʔϛϯά͸ɺ
 JT<Ϟδϡʔϧ໊><ঢ়ଶ໊>ͱ͢Δ .is-tab-active { background: white; color: black; }
46. Theme 㾎 αΠτશମͷςʔϚΛఆٛ͢Δ
    㾎 શͯͷϓϩδΣΫτͰར༻͢Δඞཁ͸ͳ͍
    㾎 γοΫܥςʔϚɺόϨϯλΠϯςʔϚɺͳͲ Base > Layout > Module > State > Theme
47. ςʔϚΛมߋ͢Δ - Theme
48. ςʔϚΛมߋ͢Δ - Theme
49. // in module-name.css .mod { border: 1px solid; } // in dark-theme.css .mod { border-color: blue; } 㾎 ผ$44ϑΝΠϧʹఆٛͯ͠ɺ
 ඞཁʹԠͯ͡ಡΈࠐΈΧεέʔυ͢Δ ςʔϚΛมߋ͢Δ - Theme 㾎 CPEZʹಛఆͷΫϥεΛ෇༩͢Δ͜ͱͰ
 ΧεέʔυΛߦ͏
50. 4."$44·ͱΊ
51. Base Layout Module State Theme αΠτશମͷελΠϧΛఆٛ͢Δ ϨΠΞ΢τΛఆٛ͢Δ αΠτͷ֩ͱͳΔߏ੒ཁૉΛఆٛ͢Δ ঢ়ଶͷมԽΛఆٛ͢Δ ςʔϚΛఆٛ͢Δ ج
    ૅ ม
    Խ ʢ࠶ܝʣ$44ઃܭΛͭʹ෼ղ͢Δ
    
    4."$44
52. ʢ࠶ܝʣCSSઃܭʹٻΊΒΕΔ4ͭͷཁૉ Predictable ͦΕ͕ԿͰ͋Δͷ͔ɺͦΕΛݟΔ͚ͩͰ༧ଌ͢Δ͜ͱ͕Ͱ͖Δ Reusable ಉ͡ϚʔΫΞοϓ΍ελΠϧΛଞͷ৔ॴͰ΋ಉ͡Α͏ʹ࢖͏͜ͱ͕Ͱ͖Δ Maintainable มߋΛՃ͑Δ͜ͱ͕Ͱ͖Δ Scalable େن໛αΠτʹͳͬͨͱͯ͠΋ಉ͡Α͏ʹར༻Ͱ͖Δ
53. Conclusion IUUQTqJDLSQ#X&&W
54. ηογϣϯ·ͱΊ 㾎 ྑ͍$44͸ͭͷཁૉΛຬͨ͢ 㾎 4."$44͸$44ઃܭΛͭʹ෼ղ͢Δ 㾎 00$44ͱ#&.΋ֶΜͰΈΑ͏ʂ 㾎 ࣮ݱ͢Δखஈͱͯ͠00$44
    4."$44
    #&.͕ଘࡏ͢Δ
55. !ZPIFJ.VOF http://www.yoheim.net ϒϩά΍5XJUUFSͰ͸ɺϑϩϯτΤϯυωλΛத৺ʹൃ৴͍ͯ͠·͢ɻ
 ؾʹͳͬͨͧͱ͍͏ํ͸ͥͻͱ΋ϑΥϩʔΛ͓ئ͍͠·͢
    ?? Thank you