Clean and Unbreakable CSS

Clean and Unbreakable CSS

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

Bf2ebe75576bfadaac9fb2e42c2187db?s=128

Yuki Iwanaga

July 30, 2015
Tweet

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 4UZMF4IFFUT ͔ͩΒԚ͘ͳΔ WHY DOES CSS GET CHAOTIC ANSWER

  6. WHY DOES CSS GET CHAOTIC ANSWER ʮ֊ஈঢ়ͷୌͷΑ͏ͳʯ ʮ࿈࠯తʹ఻ΘΔʯ ͱ͍͏ҙຯɻ ༷ʑͳϨϕϧͰఆٛ͞ΕͨελΠϧ͸ɺ

    ্ྲྀ͔ΒԼྲྀ΁Ҿ͖ܧ͕ΕΔͱ͍͏ɺ $44ͷେ͖ͳಛ௃ͷ͜ͱͰ͢ɻ $BTDBEJOH 4UZMF4IFFUT ͔ͩΒԚ͘ͳΔ
  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! ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠