Clean and Unbreakable CSS

きれいな CSS 速習会 @ Wantedly
http://wantedly.connpass.com/event/18018

Transcript

1. CLEAN and UNBREAKABLE CSS ͖Ε͍ͳ
   $44
   ଎शձ
   !
   8BOUFEMZ
   creasty.com YUKI IWANAGA
2. ؠӬ
   ༐ً
   
   YUKI IWANAGA σβΠϯ͔Βɺ ϑϩϯτΤϯυɺ όοΫΤϯυɺ Πϯϑϥ·ͰϚϧνʹ׆ಈɻ $SFBTUZ
   ͱ͍͏԰߸ͰͷϑϦʔϥϯεɺ '*$$
   JOD
   ͰͷࣗࣾαʔϏε։ൃɺ %FMZ
   *OD
   ͷ্ཱͪ͛Λܦͯɺ ࠓ೥݄͔Β
   8BOUFEMZ
   ʹ
   +0*/ɻ 8BOUFEMZ
   Ͱ͸ओʹόοΫΤϯυͱϑϩϯτΤϯυʹܞΘ͍ͬͯΔɻ creasty.com | www.wantedly.com/users/1408075
3. ͳͥ
   $44
   ͸Ԛ͘ͳΔͷ͔
4. ͳͥ
   $44
   ͸ Ԛ͘ͳΔͷͰ͠ΐ͏ ʁ ҰݴͰઆ໌Ͱ͖·͔͢ʁ WHY DOES CSS GET CHAOTIC QUESTION
5. $BTDBEJOH
   4UZMF
   4IFFUT ͔ͩΒԚ͘ͳΔ WHY DOES CSS GET CHAOTIC ANSWER
6. WHY DOES CSS GET CHAOTIC ANSWER ʮ֊ஈঢ়ͷୌͷΑ͏ͳʯ ʮ࿈࠯తʹ఻ΘΔʯ ͱ͍͏ҙຯɻ ༷ʑͳϨϕϧͰఆٛ͞ΕͨελΠϧ͸ɺ ্ྲྀ͔ΒԼྲྀ΁Ҿ͖ܧ͕ΕΔͱ͍͏ɺ $44
   ͷେ͖ͳಛ௃ͷ͜ͱͰ͢ɻ $BTDBEJOH
   4UZMF
   4IFFUT ͔ͩΒԚ͘ͳΔ
7. large text * { font-size: large; } WHY DOES CSS GET CHAOTIC CASCADING
8. large text * { font-size: large; } large text on blue bg body { background: blue; } WHY DOES CSS GET CHAOTIC CASCADING
9. large text * { font-size: large; } large text on blue bg body { background: blue; } large text on blue bg of white p { color: white; } WHY DOES CSS GET CHAOTIC CASCADING
10. $BTDBEJOH
    ͸ɺ ࢸΔͱ͜ΖͰΦʔόϥΠυ͕ى͜Δ WHY DOES CSS GET CHAOTIC OVERRIDING
11. large text * { font-size: large; } WHY DOES CSS GET CHAOTIC OVERRIDING
12. large text * { font-size: large; } large text of blue body { color: blue; } WHY DOES CSS GET CHAOTIC OVERRIDING
13. large text * { font-size: large; } large text of blue body { color: blue; } large text of blue green p { color: green; } WHY DOES CSS GET CHAOTIC OVERRIDING ΦʔόʔϥΠ υ͍ͯ͠Δ
14. ͜͜ͷελΠϧΛ͍͡Δͱ͕͋ͬͪյΕɺ յΕͨελΠϧΛ͞ΒʹΦʔόϥΠυ͢Δ͜ͱͰमਖ਼͢Δɾ ɾ ɾ $BTDBEJOH
    ͸ɺ ࢸΔͱ͜ΖͰΦʔόϥΠυ͕ى͜Δ WHY DOES CSS GET CHAOTIC OVERRIDING
15. ͜͜ͷελΠϧΛ͍͡Δͱ͕͋ͬͪյΕɺ յΕͨελΠϧΛ͞ΒʹΦʔόϥΠυ͢Δ͜ͱͰमਖ਼͢Δɾ ɾ ɾ ˠ
    ӡ༻͕େมʹɻ $BTDBEJOH
    ͸ɺ ࢸΔͱ͜ΖͰΦʔόϥΠυ͕ى͜Δ WHY DOES CSS GET CHAOTIC OVERRIDING
16. ͖Ε͍ͳ
    $44
    Λॻ͘ʹ͸Ͳ͏͢Δ͔
17. $44
    Λ͖Ε͍ʹॻ͘ʹ͸ɺ ζόϦ
    $BTDBEJOH
    Λ࠷খݶʹ͢Δ͜ͱ AVOIDING CHAOS
18. ຊ౰ʹඞཁͳͷ͸ɺ େن໛ʹͳͬͯ΋ഁ୼͠ͳ͍ ߏ଄Խϧʔϧ AVOIDING CHAOS Α͘ɺ 4."$44
    ͱ͔
    #&.
    ͱ͔
    00$44
    ͱ͔ฉ͖·͢ΑͶʁ ผʹ޷͖ͳ΋ͷΛ࢖͑͹͍͍ͷͰ͢ɻ ͲΕΛ࢖ͬͯ΋͜ΕΒ୯ମͰ͸
    $44
    ͷ໰୊͸ղܾ͠·ͤΜɻ
19. AVOIDING CHAOS .JYJO
    ϕʔεͷઃܭ σΟϨΫτϦߏ଄
20. .JYJO
    ϕʔεͷઃܭ
21. MIXIN BASED DESIGN PRINCIPLE ελΠϧͷ࠶ར༻͸
    .JYJO
    Ͱߦ͏ DMBTT
    ʹΑΔ࠶ར༻͸ߦΘͳ͍ɻ DMBTT
    ΛνΣΠϯͯ͠ϨΠΞ΢τΛ࣮ݱ͠Α͏ͱ͠ͳ͍ɻ
22. MIXIN BASED DESIGN CONCEPT /posts .btn .btn /admin/dashboard
23. MIXIN BASED DESIGN CONCEPT /posts .btn .btn { } .btn /admin/dashboard
24. MIXIN BASED DESIGN CONCEPT /posts .btn <link> <link> .btn { } .btn /admin/dashboard
25. MIXIN BASED DESIGN CONCEPT /posts .btn <link> <link> .btn { } .btn /admin/dashboard Өڹൣғ͕େ͖͍
26. MIXIN BASED DESIGN CONCEPT /posts .btn <link> <link> .btn { } .btn /admin/dashboard
27. MIXIN BASED DESIGN CONCEPT /posts .btn .btn { } .btn /admin/dashboard
28. MIXIN BASED DESIGN CONCEPT /posts .btn @mixin btn .btn /admin/dashboard
29. MIXIN BASED DESIGN CONCEPT /posts .btn @mixin btn .btn { @include btn } .btn /admin/dashboard @import
30. MIXIN BASED DESIGN CONCEPT /posts .btn @mixin btn .btn { @include btn } .btn { @include btn } .btn /admin/dashboard @import @import
31. MIXIN BASED DESIGN CONCEPT /posts .btn @mixin btn .btn { @include btn } .btn { @include btn } .btn /admin/dashboard @import <link> <link> @import
32. Կ͕͍͍ͷ͔ʁ MIXIN BASED DESIGN MERIT
33. MIXIN BASED DESIGN MERIT ϖʔδຖʹ
    !JODMVEF
    ͢Δ͜ͱͰɺ ηϨΫλࣗମ͸ϖʔδ಺ʹด͡ࠐΊΔ͜ͱͰɺ ༨ܭͳ
    DBTDBEJOH
    Λؾʹ͢Δඞཁ͕ͳ͘ͳΓɺ Өڹൣғ΋খ͘͞ͳΓ·͢ɻ ·ͨɺ ໊લͷিಥ΋ͳ͘ͳΓ·͢ɻ first ηϨΫλͷ࿐ग़Λ࠷খݶʹͰ͖Δ
34. .JYJO
    ͷҾ਺Λ׆༻Ͱ͖Δ MIXIN BASED DESIGN MERIT .JYJO
    ͷҾ਺Λ׆༻͢Δ͜ͱͰɺ όϦΤʔγϣϯ΍ίϯςΫενϡΞϧͳελΠϧΛɺ ࠷খݶͷΦʔόʔϥΠυͰ࣮ݱͰ͖·͢ɻ ͜ΕʹΑΓɺ ൥ࡶʹͳΓ͕ͪͳ ʮಉ͡ཁૉͰ΋ඍົʹҧ͏σβΠϯʯ ͷ؅ཧ͕ͱͯ΋༰қʹͳΓ·͢ɻ second
35. σΟϨΫτϦߏ଄
36. DIRECTORY STRUCTURE UNIT components/ headers/ shared/
37. DIRECTORY STRUCTURE UNIT components/ headers/ shared/ ڞ௨Ͱ࢖͏ίϯϙʔωϯτ
38. DIRECTORY STRUCTURE UNIT components/ headers/ shared/ ڞ௨Ͱ࢖͏ίϯϙʔωϯτ ઃఆม਺΍
    .JYJOɺ ؔ਺ͳͲ
39. DIRECTORY STRUCTURE UNIT components/ headers/ shared/ ڞ௨Ͱ࢖͏ίϯϙʔωϯτ ઃఆม਺΍
    .JYJOɺ ؔ਺ͳͲ ڞ௨ͷελΠϧ
40. DIRECTORY STRUCTURE UNIT components/ headers/ shared/ ڞ௨Ͱ࢖͏ίϯϙʔωϯτ ͜ͷߏ੒Λ ʮ࠶ར༻ͷجຊ୯Ґʯ ͱ͠·͢ ઃఆม਺΍
    .JYJOɺ ؔ਺ͳͲ ڞ௨ͷελΠϧ
41. DIRECTORY STRUCTURE L1 1
42. DIRECTORY STRUCTURE L1 components/ headers/ shared/ جຊ୯Ґ 1
43. DIRECTORY STRUCTURE L1 components/ headers/ shared/ vendor/ جຊ୯Ґ layouts/ 1
44. DIRECTORY STRUCTURE L1 components/ headers/ shared/ vendor/ جຊ୯Ґ ϓϥάΠϯ౳
    ͋Ε͹ layouts/ 1
45. DIRECTORY STRUCTURE L1 components/ headers/ shared/ vendor/ جຊ୯Ґ ϓϥάΠϯ౳
    ͋Ε͹ layouts/ ֤ϨΠΞ΢τ
    ςʔϚ
    ຖͷελΠϧ 1
46. DIRECTORY STRUCTURE L1 components/ headers/ shared/ vendor/ جຊ୯Ґ ͜ͷ֊૚Λ ʮ-ʯ ͱݺͼ·͢ ϓϥάΠϯ౳
    ͋Ε͹ layouts/ ֤ϨΠΞ΢τ
    ςʔϚ
    ຖͷελΠϧ 1
47. DIRECTORY STRUCTURE L1 components/ headers/ shared/ vendor/ layouts/ ֤ϨΠΞ΢τ
    ςʔϚ
    ຖͷελΠϧ 1
48. DIRECTORY STRUCTURE L2 layouts/ ֤ϨΠΞ΢τ
    ςʔϚ
    ຖͷελΠϧ 1
49. DIRECTORY STRUCTURE L2 layouts/ main/ ֤ϨΠΞ΢τ
    ςʔϚ
    ຖͷελΠϧ admin/ 1
50. DIRECTORY STRUCTURE L2 layouts/ main/ ֤ϨΠΞ΢τ
    ςʔϚ
    ຖͷελΠϧ ී௨ͷϨΠΞ΢τ ؅ཧը໘ͷϨΠΞ΢τ admin/ 1
51. DIRECTORY STRUCTURE L2 layouts/ main/ 1 2
52. DIRECTORY STRUCTURE L2 layouts/ main/ 1 2 components/ headers/ shared/ جຊ୯Ґ
53. DIRECTORY STRUCTURE L2 layouts/ main/ views/ ֤ϖʔδຖͷελΠϧ 1 2 components/ headers/ shared/ جຊ୯Ґ
54. DIRECTORY STRUCTURE L2 ͜ͷ֊૚Λ ʮ-ʯ ͱݺͼ·͢ layouts/ main/ views/ ֤ϖʔδຖͷελΠϧ 1 2 components/ headers/ shared/ جຊ୯Ґ
55. Կ͕͍͍ͷ͔ʁ DIRECTORY STRUCTURE MERIT
56. DIRECTORY STRUCTURE MERIT ࠶ར༻ͷجຊ୯ҐΛ
    -
    Ͱ΋
    -
    Ͱ΋࢖͏Α͏ͳ࠶ؼతͳߏ଄Λͱ͍ͬͯ·͢ɻ ͜ͷεϥΠυͷํ਑ଇͬͨ··ɺ ্ɾ Լʹಉ͡Α͏ͳߏ଄Λࣗ෼Ͱ௥Ճ͢Δ͜ͱͰɺ αʔϏεʹ߹ΘͤͯΧελϚΠζͰ͖ΔͷͰ͢ɻ ྫ͑͹ɺ εϚʔτϑΥϯ൛ͱ
    1$
    ൛͕͋Δ৔߹͸ɺ -
    ͷ্ͷ֊૚ʹ ʮ-ʯ Λ࡞Ε͹͍͍ͷͰ͢ɻ first ࠶ؼతͳߏ଄ͰԠ༻͕ޮ͘
57. ηϨΫλ͕͔͚Δ৔ॴɾ͔͚ͳ͍৔ॴ DIRECTORY STRUCTURE MERIT !NJYJO
    ͚ͩΛॻ͚ΔσΟϨΫτϦ
    IFBEFST
    ͱ !JODMVEF
    ͯ͠ηϨΫλΛॻ͚ΔσΟϨΫτϦ
    TIBSFE
    ΍
    WJFXT Λ෼཭ͨ͠ߏ଄ʹͳ͍ͬͯ·͢ɻ ηϨΫλΛؚ·ͳ͍෦෼͚ͩΛڞ༗͢Δ͜ͱͰɺ ʮ.JYJO
    ϕʔεͷઃܭʯ ͕ࣗવʹୡ੒͞Ε·͢ɻ second
58. Ϩοπ ɾ τϥΠ
59. github.com/creasty/css-better-practice vist and follow the instruction
60. ·ͱΊ
61. .JYJO
    ϕʔεͷઃܭ RECAP
62. .JYJO
    ϕʔεͷઃܭ ˠ
    .JYJO
    ʹΑΔ࠶ར༻ RECAP
63. .JYJO
    ϕʔεͷઃܭ ˠ
    .JYJO
    ʹΑΔ࠶ར༻ ˠ
    ηϨΫλͷ࿐ग़ΛݮΒ͢ RECAP
64. .JYJO
    ϕʔεͷઃܭ ˠ
    .JYJO
    ʹΑΔ࠶ར༻ ˠ
    ηϨΫλͷ࿐ग़ΛݮΒ͢ ˠ
    Ҿ਺ͷ׆༻ RECAP
65. .JYJO
    ϕʔεͷઃܭ ˠ
    .JYJO
    ʹΑΔ࠶ར༻ ˠ
    ηϨΫλͷ࿐ग़ΛݮΒ͢ ˠ
    Ҿ਺ͷ׆༻ σΟϨΫτϦߏ଄ RECAP
66. .JYJO
    ϕʔεͷઃܭ ˠ
    .JYJO
    ʹΑΔ࠶ར༻ ˠ
    ηϨΫλͷ࿐ग़ΛݮΒ͢ ˠ
    Ҿ਺ͷ׆༻ σΟϨΫτϦߏ଄ ˠ
    Ԡ༻͕ޮ͘࠶ؼతͳߏ଄ RECAP
67. .JYJO
    ϕʔεͷઃܭ ˠ
    .JYJO
    ʹΑΔ࠶ར༻ ˠ
    ηϨΫλͷ࿐ग़ΛݮΒ͢ ˠ
    Ҿ਺ͷ׆༻ σΟϨΫτϦߏ଄ ˠ
    Ԡ༻͕ޮ͘࠶ؼతͳߏ଄ ˠ
    ηϨΫλ͕ॻ͚ͳ੍͍໿ RECAP
68. Thank you very mush indeed! ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠