入社前と入社後で CSSの書き方を変えた話

Transcript

1. Ⰵ爡⵸הⰅ爡䖓ד
   $44ך剅ֹ倯׾㢌ִ׋鑧 Daisuke Konishi

2. Daisuke Konishi @skd_nw ϚʔΫΞοϓΤϯδχΞ

3. ٕज़తͳ࿩ɺΠϕϯτߦͬͨ࿩ɺͳΜ΍͔Μ΍ http://peng-note.com

4. ࠷ۙ΍ͬͯΔ͜ͱ w Ξχϝʔγϣϯͷษڧ
   w 1PTU$44ͰΦϨΦϨίϯύΠϥ࡞੒
   w +BWB4DSJQUͷઃܭͱ͔3FBDUKTͷษڧ
   w ൴ঁ୳͠

5. ೖ͔ࣾͯ͠Βॻ͖ํΛͲ͏ม͔͑ͨ

6. ೖࣾલ େֶੜ࣌୅ ֶ಺ͷ׆ಈͷαΠτ΍ϒϩάͷ੍࡞ɾอक
   w εΫϥον͔$44ϑϨʔϜϫʔΫΛ׆༻
   w 4."$44ϕʔεͰͷઃܭ

7. ೖࣾޙίέΔࣄ͕ଟ͔ͬͨ

8. ίʔσΟϯάελΠϧʹ׳Εͳ͍ 例えば .listStyle03 { … } .box01 { … }

9. ṖͷίʔσΟϯάελΠϧʹ׳Εͳ͍ ͋Δఔ౓ม͑ΕΔΑ͏ʹަব͠ɺ
 ηϚϯςΟοΫͳωʔϛϯάΛՄೳʹ

10. ౖΓͱѩ͠Έͷ*&ରԠ w ΞΫηεղੳ͢Δͱͳ͔ͳ͔ͷׂ߹Ͱ
 ੾Εͳ͍
    w ͜Ε·Ͱʹܦݧφγ

11. ౖΓͱѩ͠Έͷ*&ରԠ w DBOJVTFDPN
    Ͱ࢖͑ΔϓϩύςΟͷ֬ೝ
    w ίʔσΟϯά͠ͳ͕Β7.ͰνΣοΫ
    w ؾ߹͍ transition, animate࢖͍͍ͨਓੜͩͬͨ…

12. CSSϑϨʔϜϫʔΫ࢖͑ͳ͍໰୊

13. BourbonΛಋೖ http://bourbon.io/

14. #PVSCPOͷ͋Γ͕͍ͨͱ͜ w ඞཁͳ෼͚ͩࣗಈͰग़ྗ͢ΔͷͰΑ͋͘Δ
 ϑϨʔϜϫʔΫʹൺ΂ɺ༨෼ͳίʔυ͕
 ੜ੒͞Εͳ͍
    w ϕϯμʔϓϨϑΟοΫε΋෇͚ͯ͘ΕΔ
    w هड़ྔ͕ݮͬͨΓίʔυ͕·ͱ·ΔͷͰ
 ݟқ͘ͳΔ

15. ྫ͑͹ position: absolute; top: 10px; right: -13px;
 bottom: 0;
 left:

    0; positionपΓͷ৭ʑΛ·ͱΊͯॻ͚Δ

16. ྫ͑͹ @include position(absolute, 10px -13px 0 0); QPTJUJPOपΓͷ৭ʑΛ·ͱΊͯॻ͚Δ

17. ྫ͑͹ɹ @include transition(all 5s $ease-in-circ); transitionͷهड़ & easingͱ͔

18. ྫ͑͹ɹ @include triangle(8px 6px, grey, down); άϨʔͷԼ޲͖ࡾ֯
 (γϯϓϧͳਧ͖ग़͠ͷ଍ͱ͔)

19. ͦͷଞ͍Ζ͍Ζʂ

20. SnippetͷϓϥάΠϯͰ
 αδΣετՄೳ • Atom atom-bourbon-snippets • SublimeText 3(?) rossedman/derby: Bourbon

    & Neat Sublime Text Snippets & Auto Completions

21. ࢥͬͯΔҎ্ʹมߋ͕͘Δ w ͪΌͿ୆Λͻͬ͘Γฦ͢ΫϥΠΞϯτ͸ଟ͍
    w lฦ͞Εͳ͍Α͏ʹ͢Δzͷ͸σΟϨΫλʔʹ
 ͓ئ͍
 
    ฦ͞Εͨ࣌ʹڧ͘ੜ͖ΔͨΊͷίʔυΛ ॻ͘

22. ྫ͑͹ AΛ͜͜·ͰҠಈ͍ͯͩ͘͠͞ CͷαΠζมߋʹͳΓ·ͨ͠

23. ཁૉͷαΠζ΍Ґஔͷܭࢉ͸ Sassʹ

24. ͦ͜Ͱ͜͏ʂ margin-left: floor(percentage( 282 / 504 )); ͋Μ·Γ΍ΔͱίϯύΠϧ͕஗͘ͳΔͷͰ
 मਖ਼ೖΔͱϋήΔͱ͜ͱ͔ࡉ͔͍ͱ͚ͩ͜ͱ͔

25. ྫ͑͹ AͱBೖΕସ͍͑ͯͩ͘͞ ಉ͡ݟͨ໨Ͱ
 ΋͏1ݸηΫγϣϯ૿΍͠·͢ ΍ͬͺແ͘ͳΓ·ͨ͠ʔʂ

26. มߋʹڧ͍$44Λ૊Ή

27. w ୳͠΍͘͢ӨڹൣғΛڱ͘
    w ࢖͍ճ͕͠ޮ͘Α͏ʹίϯϙʔωϯτΛҙࣝ
    w ୳͠΍͍͢Α͏ʹద౓ʹϑΝΠϧΛ෼ׂ มߋʹڧ͍$44Λ૊Ή

28. ·ͱΊ w ίʔσΟϯάελΠϧ΋ͳΜ΍͔Μ΍্ख͍͜ͱ Ͱ͖Δ
    w ϑϨʔϜϫʔΫແͯ͘΋#PVSCPOͰ޾ͤʹͳΕΔ
    w *&ରԠ΋ؾ߹ͰͳΜͱ͔ͳΔ ͨ͘͠ͳ͍
    

    w ͪΌͿ୆ͻͬ͘Γฦ͞Εͯ΋ઃܭ࣍ୈͰ
 ڧ͘ੜ͖ΕΔ

29. ্ख͘૊ΜͰ໌೔΋ؤுΖ͏