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

CSS Talk vol.1 - TAMのイベント | Doorkeeper : https://taminc.doorkeeper.jp/events/52298

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. ্ख͘૊ΜͰ໌೔΋ؤுΖ͏