CSSのクラス名は 機能じゃなくて 役割でつけたい話

Transcript

1. $44ͷΫϥε໊͸
   ػೳ͡Όͳͯ͘
   ໾ׂͰ͚͍ͭͨ࿩ 5BLBOPSJ
   0LJ
   ΄ΖΑ͍ͯͬ͘ʢҎԼུʣ
2. ࣗݾ঺հ w େ໦ଚلʢΦΦΩλΧϊϦ!UBLBOPSJQʣ
   w גࣜձࣾεϚʔτυϥΠϒ
   w ϑϩϯτΤϯυΤϯδχΞ
   w 3FBDUɺ7VFɺ8PSE1SFTTɺ΢Σϒ੍࡞શൠ
   w গྛࣉݓ๏
   ࡾஈʢϒϥϯΫ೥ʣ
4. 5-%3 w Ϋϥε໊ͱελΠϧΛҰॹʹͨ͘͠ͳ͍
   w Ϋϥε໊͸ͳΔ΂͘ݻ༗ͷ໊લΛ͚͍ͭͨ
   w ελΠϧͷڞ௨Խ͸4BTTͳͲͷNJYJOͳͲΛ࢖ͬ ͯߦ͏
   w ͦͷཁૉ͕ϖʔδͷதͰͲΜͳ໾ׂΛ͍࣋ͬͯ Δͷ͔ʁΛߟ໊͑ͯલ͚͍ͭͨ
5. Α͋͘Δ໋໊ͷ࢓ํ
6. <section class="section"> <h1 class=“section_title">about</h1> <p class=“section_text is-white“>hogehoge</p> </section> <section class="section"> <h1 class="section_title">works</h1> <p class="section_text">hogegegege</p> </section>
7. ޷͖͡Όͳ͍ͱ͜Ζ w ҧ͏໾ׂΛ͍࣋ͬͯΔཁૉ͕ಉ໊͡લʹ
 ͳͬͯ͠·͏ͷ͕ؾ࣋ͪѱ͍
   w ϑΥʔϜͷϘλϯͱηΫγϣϯதͷϘλϯɺ ݟͨ໨͸ಉ͚ͩ͡Ͳɺ໾ׂ͸ҧ͏ΑͶʁ
   w Ϋϥε໊ͰελΠϧ؅ཧͯ͠ΔͱɺελΠϧΛ ͪΐͬͱม͍͑ͨͳʔͬͯͱ͖ɺ৽͘͠Ϋϥ ε͚ͭͳ͍ͱ͍͚ͳ͍
8. <button class="button-blue button-small button-left button- bottom"> BUTTON </button>
9. վળҊ
10. <section class="about"> <h1 class="about_title">about</h1> <p class="works_text">hogehoge</p> </section> <section class="works"> <h1 class="works_title">works</h1> <p class="works_text">hogegegege</p> </section>
11. $section() { margin-bottom: 36px; } $title() { font-size: 24px; } $text() { font-size: 14px; }
12. .about { $section(); } .about_title { $title(); } .about_text { $text(); } .works { $section(); } .works_title { $title(); color: #f00; } .works_text { $text(); }
13. ܽ఺ w େن໛ϓϩδΣΫτʹ͸޲͔ͳ͍
    w ෳ਺ਓͰ։ൃ͢Δ࣌ɺΫϥε໊͔ΒελΠϧ ͕૝૾Ͱ͖ͳ͍ͱΊΜͲͯ͘͘͞ࢮ͵
    w NJYJOΛ࠷ॳʹ࡞͓͚ͬͯ͹େৎ෉͔΋
    w NJYJOͷ؅ཧ͕ΊΜͲ͍͘͞
    w ෳ਺ਓͰNJYJO࡞Γ·͘Δͱࢮ͵
14. ྑ͍͓೥Λʂ