スタイル警察24時 / style police 24h

みんなでいいCSS書いていこうなって話

Transcript

1. ελΠϧܯ࡯ ࣌ ★ ★ ★ ★ ★ ★ ★ ★
2. 2 େ݄ ༎Ղࢠ ࡀͰԦͷૉ࣭Λ։Ֆͤ͞Δͱ༧ݴΛड͚Δ ˔ ۙگ ˔ ޷͖ͳ$44ϧʔϧηοτ QPJOUFSFWFOUT
   OPOF QPTJUJPO
   TUJDLZ @yukako_otsuki
3. 3 ࠓ೔͸ಛʹ ໨৽͍͠࿩͸͠·ͤΜ
4. 4 $44ͷ࿩Λ͠·͢
5. 5 ྑ͍ελΠϧͬͯ ͳΜͩΖ͏
6. 6 ѱ͍ελΠϧͬͯ ͳΜͩΖ͏
7. 7 ϨϏϡʔͷ࣌ʹେ੾ʹ͍ͯ͠Δ؍఺ ύϑΥʔϚϯε ։ൃޮ཰ σβΠϯ࠶ݱੑ ύϑΥʔϚϯε
8. 8 ։ൃޮ཰
9. 9 The Goals of Good CSS Architecture ϝϯςφϯεੑ ˔ 1SFEJDUBCMF ʜ༧ଌ͠΍͍͢ ˔ 3FVTBCMF ʜ࠶ར༻͠΍͍͢ ˔ .BJOUBJOBCMF ʜอक͠΍͍͢ ˔ 4DBMBCMF ʜ֦ு͠΍͍͢ https://philipwalton.com/articles/css-architecture/
10. 10 Predictable ༧ଌ͠΍͍͢ “༧ଌՄೳͳ$44͸ɺϧʔϧ͕ظ଴Ͳ͓Γʹಈ࡞͢Δ͜ͱΛҙຯ ͠·͢ɻ ϧʔϧΛ௥Ճ·ͨ͸ߋ৽͢Δ৔߹ɺҙਤ͠ͳ͍αΠτͷ෦෼ʹ ӨڹΛ༩͑ͯ͸ͳΓ·ͤΜɻ
11. 11 Not predictableͳελΠϧ
12. 12 Not predictableͳελΠϧ ˔ ελΠϧΛଧͪফ͍ͯ͠Δ ˔ ηϨΫλʹΫϥεͱλά͕ࠞࡏ͍ͯ͠Δ ˔ Ϋϥε໊ͱݟͨ໨͕Ұக͠ͳ͍ ˔ ηϨΫλͷৄࡉ౓͕ೖΓཚΕ͍ͯΔ
13. 13 Reusable “$44ϧʔϧ͸ந৅తͰɺे෼ʹ෼཭͞Ε͍ͯΔඞཁ͕͋Γ·͢ɻ ͜ΕʹΑΓɺطʹղܾͨ͠ύλʔϯ΍໰୊Λ࠶ίʔσΟϯά͢ Δ͜ͱͳ͘ɺطଘͷύʔπ͔Β৽͍͠ίϯϙʔωϯτΛ͢͹΍ ͘ߏஙͰ͖·͢ɻ ࠶ར༻͠΍͍͢
14. 14 Maintainable “αΠτͰ৽͍͠ίϯϙʔωϯτ΍ػೳΛ௥Ճɺߋ৽ɺ࠶഑ஔ͢ Δඞཁ͕͋Δ৔߹ɺطଘͷ$44ΛϦϑΝΫλϦϯά͢Δඞཁ͕ ͋Γ·ͤΜɻ ίϯϙʔωϯτ9Λϖʔδʹ௥Ճͯ͠΋ɺͦͷଘࡏ͚ͩͰίϯ ϙʔωϯτ:͕յΕͯ͸͍͚·ͤΜɻ อक͠΍͍͢
15. 15 Scalable “εέʔϥϒϧͳ$44͸ɺҰਓ·ͨ͸େن໛ͳΤϯδχΞ ϦϯάνʔϜ͕؆୯ʹ؅ཧͰ͖Δ͜ͱΛҙຯ͠·͢ɻ ·ͨɺ๲େͳֶशۂઢΛඞཁͱͤͣʹɺαΠτͷ$44Ξ ʔΩςΫνϟʹ؆୯ʹΞΫηεͰ͖·͢ɻ ֦ு͠΍͍͢
16. 16 ScalableͳελΠϧʹ͢ΔͨΊʹ͸ ίϯϙʔωϯτઃܭʹΑΓ ؔ৺ͷ෼཭ɾΧϓηϧԽΛߦ͏ ˣ $44
    JO
    +4
    PS
    $44ઃܭख๏ΛऔΓೖΕΔ
17. 17 σβΠϯ࠶ݱੑ
18. 18 σβΠϯ࠶ݱੑ σβΠϯ௨Γͷݟͨ໨ʹͳ͍ͬͯΔ͔
19. 19 σβΠϯ௨Γͷݟͨ໨ͱ͸ ϝϯςφϯεੑ ˔ ΢Οϯυ΢αΠζΛม͑ͨ࣌ ˔ ΢Οϯυ΢ͷॎ௕ԣ௕දࣔΛม͑ͨ࣌ ˔ ಈతʹऔಘ͢ΔՕॴʹσβΠϯσʔλҎ֎ͷσʔλ͕ೖ ͖ͬͯͨ࣌ ˔ $ISPNFҎ֎ͷϒϥ΢βͰදࣔͨ࣌͠ ˔ ϒϥ΢βͷػೳͰςΩεταΠζΛมߋͨ࣌͠ ˔ ֦େɾॖখදࣔͨ࣌͠
20. 20 σβΠϯ௨Γͷݟͨ໨ͱ͸ ϝϯςφϯεੑ ˔ ΢Οϯυ΢αΠζΛม͑ͨ࣌ ˔ ΢Οϯυ΢ͷॎ௕ԣ௕දࣔΛม͑ͨ࣌ ˔ ಈతʹऔಘ͢ΔՕॴʹσβΠϯσʔλҎ֎ͷσʔλ͕ೖ ͖ͬͯͨ࣌ ˔ $ISPNFҎ֎ͷϒϥ΢βͰදࣔͨ࣌͠ ˔ ϒϥ΢βͷػೳͰςΩεταΠζΛมߋͨ࣌͠ ˔ ֦େɾॖখදࣔͨ࣌͠ ද่͕ࣔΕͳ͍͔ σβΠφʔ͞Μͷҙਤ͕͖ͪΜͱ൓ө͞Ε͍ͯΔ͔
21. 21 ύϑΥʔϚϯε
22. 22 ύϑΥʔϚϯεΛߟྀͨ͠ελΠϧ ϝϯςφϯεੑ ˔ %0.ΛඞཁҎ্ʹਂ͘ͳ͍ ʜ
    Ϛονϯά͢ΔηϨΫλΛ૯౰ͨΓͰ୳͢ ˔ ແବͳελΠϧ͕ͳ͍ ʜ
    ελΠϧ͸ඞཁͳͱ͜Ζʹඞཁͳ͚ͩ ʜ
    ϕϯμʔϓϨϑΟοΫεͷ࠷దԽ ˔ ϨϯμϦϯάͷෛՙ͕ߟྀ͞Ε͍ͯΔ ʜ
    ϝσΟΞΫΤϦͷ࠷దԽ ʜ
    $44Ξχϝʔγϣϯͷ࠷దԽ ˔ ηϨΫλ͕࠷దԽ͞Ε͍ͯΔ ʜ
    ηϨΫλ͸ӈ͔Βࠨ΁র߹͞ΕΔ ʜ
    ࢠଙɾؒ઀ɾશশηϨΫλͷଟ༻Λආ͚Δ
23. 23 $44
    JO
    +4ʹΑΔ Ըܙ
24. 24 $44
    JO
    +4ʹΑΔԸܙ ։ൃޮ཰ ύϑΥʔϚϯε ਓ͕ؒࣗΒߟ͑ͳ͚Ε͹ͳͯ͘΋࠷௿ݶ୲อͰ͖ΔϨϕϧ্͕͕ͬͨ
25. 25 Α͋͘Δ ୁัࣄҊ
27. 27 JNQPSUBOU Λࢦఆ͍ͯ͠Δ
28. 28 JNQPSUBOU Λࢦఆ͍ͯ͠Δ ! ৄࡉ౓ઃܭͷΧΦεԽ͕ଅਐͯ͠͠·͍·͢ Ͳ͏ͯ͠΋ͷ৔߹͸ίϝϯτʹཧ༝Λڙड़͠·͠ΐ͏
29. 29 ෆཁͳελΠϧ͕ ଘࡏ͢Δ
30. 30 ෆཁͳελΠϧ͕ ଘࡏ͢Δ ! σβΠϯσʔλ͔ΒίϐϖͨελΠϧΛ ͦͷ··࢖ͬͯ͸͍͚·ͤΜ
31. 31 ྫ֎
    GMFYCBTJT
     WBMVF͕zzͷͱ͖ʹ ୯Ґ͕ࢦఆ͞Ε͍ͯΔ
32. 32 ྫ֎
    GMFYCBTJT
     WBMVF͕zzͷͱ͖ʹ ୯Ґ͕ࢦఆ͞Ε͍ͯΔ ! ෆཁͳ΋ͷ͸ॻ͔͔ͳ͍ͷ͕ݪଇͰ͢
33. 33 MJOFIFJHIUʹ ୯Ґ͕ࢦఆ͞Ε͍ͯΔ
34. 34 MJOFIFJHIUʹ ୯Ґ͕ࢦఆ͞Ε͍ͯΔ ! ϒϥ΢βͷػೳͰจࣈΛେ͖ͨ࣌͘͠ʹද่͕ࣔΕ·͢
35. 35 NBSHJO͕ ૬ࡴ͞Ε͍ͯΔ
36. 36 NBSHJO͕ ૬ࡴ͞Ε͍ͯΔ ! मਖ਼ͨ͠Γ࠶ར༻ͨ͠Γ͢Δࡍʹ͏·͍͔͘ͳ͍ݪҼʹͳΓ·͢
37. 37 ࣏҆ҡ࣋ͷ ৬࣭ ͷϧʔϧ
38. 38 IFJHIU͕ܾΊଧͪͰ ࢦఆ͞Ε͍ͯΔ
39. 39 ωΨςΟϒNBSHJO
40. 40 qFYCPYҎ֎Ͱͷԣฒͼ PS
    (SJE
    -BZPVU
41. 41 qFYCPYҎ֎Ͱ্Լதԝدͤ PS
    (SJE
    -BZPVU
42. 42 BCTPMVUFΛࢦఆ͍ͯ͠Δ ཁૉͷ௚લʹ SFMBUJWFͷཁૉ͕͍ͳ͍
43. 43 ࣏҆ҡ࣋ʹ༗ޮͳ ϕετ ϓϥΫςΟε
44. 44 NBSHJOͷ޲͖Λଗ͑Δ
45. 45 GPOUTJ[Fͷ ୯Ґ͸zSFNz
46. 46 CPYTJ[JOH
    CPSEFSCPY Λࢦఆ͢Δ
47. 47 πʔϧΛར༻͢Δ
48. 48 ݸݸ͸ ࡉ͔͍͜ͱ͚ͩͲ
50. 50 ͏ʔΜ৮ͬͯͳ͍ϖʔδͷ ελΠϧ͕มΘͬͪΌͬͯΔΑ͓
51. 51 ࣗ෼΋·ͩ·ͩ
52. 52 ΈΜͳͰ͍͍$44 ॻ͍͍ͯ͜͏ͳʂ
53. 53 ׬