CSSの技術的負債との向き合い方 / How to Deal with Technical Debt of CSS (ja)

CSSの技術的負債との向き合い方 / How to Deal with Technical Debt of CSS (ja)

0814cba621ab9aeabcf91b4095d9dd50?s=128

Takuya Matsumoto

March 22, 2019
Tweet

Transcript

  1. How to Deal with Technical Debt of CSS CSSͷٕज़తෛ࠴ͱͷ޲͖߹͍ํ Takuya

    Matsumoto @upinetree Rails Developer Meetup 2019 Day 1 2019.03.22
  2. Takuya Matsumoto @upinetree גࣜձࣾ ສ༿ ϓϩάϥϚ ੜ·Ε: ৽ׁݝ௕Ԭࢢ ޷͖: ೔ຊञ,

    Ϊλʔ, ήʔϜ
  3. #ݱ৔Rails ͕Μ͹Γ·ͨ͠

  4. ຊ೔ͷςʔϚ CSSͷٕज़తෛ࠴

  5. CSSͷෛ࠴Λվળͨ͠ͱ͖ͷܦݧΛݩʹ ϓϩάϥϚͷࢹ఺͔Βߟ࡯ͯ͠ΈΔ

  6. CSSͷٕज़తෛ࠴͸Ͳ͏ͯ͠ੜ͡Δͷ͔

  7. ͜Μͳܦݧ͸͋Γ·ͤΜ͔ • CSSΛมߋͨ͠Βظ଴ͱҧ͏ͱ͜ΖʹӨڹͨ͠ • HTMLͷߏ଄Λগ͠ม͑ͨΒελΠϧ่͕յͨ͠ • CSS͕Ͳ͜ʹͲ͏࡞༻͍ͯ͠Δ͔͕෼͔ΒͣखΛՃ͑ͨ͘ͳ͍ • ͳ͔ͥࢦఆͨ͠ελΠϧ͕͋ͨΒͳ͍ •

    ࢖ΘΕ͍ͯͳ͍CSS͕͋Δ͕ফ͢ͷ͕ාͯ͘์ஔ͞Ε͍ͯΔ
  8. ։ൃͷϘτϧωοΫʹͳͬͯ͠·ͬͨCSS • ෺ཧతɺ৺ཧతʹͲΜͲΜखΛग़ͮ͠Β͘ͳͬͯ͠·͏ • ݁Ռͱͯͪ͠ΐͬͱͨ͠ελΠϧमਖ਼ʹଟେͳ͕͔͔࣌ؒΔ • Ұ෦ͷৄ͍͠ϝϯόʔʹෛՙ͕ूதͯ͠͠·͍SPOFͱͳΔ

  9. ٕज़తෛ࠴ͷӨڹͱ͍͏؍఺Ͱ͸ (Ruby) ϓϩάϥϛϯάͰ΋ ݟ֮͑ͷ͋Δߏਤ

  10. Ͱ΋ɺ CSSͷٕज़తෛ࠴͸ϓϩάϥϛϯά΄Ͳ νʔϜͰٞ࿦͞Εͳ͍ҹ৅͕͋Δ

  11. Ͳ͏ͯͩ͠Ζ͏

  12. CSSͳΒͰ͸ͷഎܠΛߟ͑Δ

  13. CSSͷ࢓༷͸γϯϓϧ • ৄࡉ౓ͳͲͷ͍͔ͭ͘ͷϧʔϧ͕͋Δ͚ͩͰɺॻ͍ͨͱ͓Γʹε λΠϧ͕ద༻͞ΕΔ • ࠷ॳظ͸໌֬ͰΘ͔Γ΍͍͢ • ͲΜͳ࡞ΓΛ͍ͯͯ͠΋ද໘తʹ͸ͳΜͱ͔ͳͬͯ͠·͏ • ແҙࣝʹฦࡁͷݟࠐΈͷͳ͍ɺརࢠͷߴ͍आΓೖΕΛͯ͠͠·͍

    ͕ͪ
  14. ࠷ॳ͸γϯϓϧͳͷ͸ͲͷݴޠͰ΋ಉ͡ • ໰୊͸ • CSSͷߏ଄Խ͸ϋʔυϧ͕ߴ͍ • ෛ࠴Λ࡞ͬͯ͠·͍ͬͯΔࣄ࣮ͷೝࣝͮ͠Β͞ • νʔϜͰҙࣝతʹCSSͷϝϯςφϯε΁ͷؔ৺ΛߴΊ͍͔ͯͳ ͍ͱɺؾ͍ͮͨͱ͖ʹ͸େ͖ͳෛ࠴Λ๊͍͑ͯΔ͜ͱʹͳΔ

  15. νʔϜ։ൃͰؔ৺Λ࣋ͭ΂͖ࣄฑ͸ͨ͘͞Μ DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε

    ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ※ԁͷେ͖͞ʹҙຯ͸͋Γ·ͤΜ
  16. DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ

    ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ͋ΔνʔϜͷϝϯόʔͷؔ৺
  17. DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ

    ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ͋ΔνʔϜͷϝϯόʔͷؔ৺
  18. DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ

    ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ͋ΔνʔϜͷϝϯόʔͷؔ৺
  19. DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ

    ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ϝϯόʔD ͋ΔνʔϜͷϝϯόʔͷؔ৺
  20. DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ

    ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ϝϯόʔD ͋ΔνʔϜͷϝϯόʔͷؔ৺ ͜ͷνʔϜͷϓϩάϥϚ͸… ػೳΛ͍ͪૣ͘Ϣʔβʹಧ͚͍ͨ CSS͸ۤखҙ͕ࣝ͋ΓखΛग़ͮ͠Β͍ σβΠφ͕ͳΜͱ͔ͯ͘͠ΕΔͱߟ͑ ͍ͯΔ
  21. DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ

    ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ϝϯόʔD ͋ΔνʔϜͷϝϯόʔͷؔ৺ ͜ͷνʔϜͷσβΠφʹͱͬͯ… CSS͸දݱखஈͷ1ͭͰ͔͠ͳ͍ ੵۃతʹઃܭ͠Α͏ͱ͍͏ ಈػ͚͕ͮ೉͍͠
  22. CSS ؔ৺ͷٴ͹ͳ͍୩

  23. ʮؔ৺ͷ୩ʯͱ໊෇͚ͯΈΔ • ؔ৺ͷ֎ͷ͜ͱʹ͸ؾ͖ͮͮΒ͍ͨΊɺ୩͕࡞ΒΕ΍͍͢ • ؾ͍ͮͨͱͯ͠΋ɺৄ͘͠ͳ͍͠ɺଞͷৄ͍͠ϝϯόʔ͕͏· ͘΍ͬͯ͘ΕΔͱࢥͬͯ͠·͏ • ๣؍ऀޮՌͬΆ͍ूஂ৺ཧ΋͋Γͦ͏ https://flic.kr/p/f7yxnc

  24. ʮؔ৺ͷ୩ʯΛͲ͏৐Γӽ͑Δ͔

  25. ୩ʹڮΛ͔͚ΒΕͨΒ • ৄ͍͠஌͕ࣝͳͯ͘΋ɺແҙࣝʹٕज़తෛ࠴Λ࡞Γࠐ·ͳ͍Α ͏ͳߏ଄ʢʹڮʣΛ࡞Δ • ͨͩ͠ɺ΍ΕΔ͜ͱ͸ݶఆతʢ͋͘·ͰڮͳͷͰʣ

  26. ࠓճ঺հ͢Δڮ • CSSઃܭํ๏࿦ • ੍໿ • ͪΐ͍଍͠Ϋϥε

  27. CSSઃܭํ๏࿦ͷಋೖ

  28. CSSઃܭํ๏࿦ͱ͸ • ઌਓ͕ͨͪߟ͑ͨϕετϓϥΫςΟεू • OOCSS, BEM, SUIT CSS, SMACSS, MCSS,

    RSCSS, ECSS, ITCSS, FLOCSS, FLOU, ... • υΩϡϝϯτ΍఩ֶΛΞ΢τιʔεͰ͖Δ • ଟ͘ͷಋೖࣄྫ͕͋Γɺ৘ใ͕खʹೖΕ΍͍͢
  29. CSSઃܭํ๏࿦ͷσϝϦοτ • ϓϩμΫτʹϚον͠ͳ͍͜ͱ͕͋Δ • ϧʔϧ͕ෳࡶͩͱཧղ͕͍ͨ͠ɺผղऍ͕ੜ·ΕΔ͜ͱ͕͋Δ • ϧʔϧΛ͍֮͑ͯͳ͍ɺਁಁ͠ͳ͍ • ํ๏࿦ʹै͏͜ͱࣗମ͕໨తʹͳͬͯ͠·͍͕ͪ

  30. CSSઃܭํ๏࿦Λಋೖ͢΂͖͔ • ํ๏࿦ͷߟ͑ํ΍ղܾ͠Α͏ͱ͍ͯ͠Δ໰୊ΛɺνʔϜͰೲಘ ্ͨ͠ͰಋೖͰ͖ΔͳΒ࠷ྑ • ΧελϚΠζ͢ΔɺΤοηϯε͚ͩಋೖ͢Δɺͱ͍͏બ୒ࢶ΋ ͋Δ • →͜Ε͔Β঺հ͢Δʮ੍໿ʯͱʮͪΐ͍଍͠ʯ͸ࢲͷܦݧ্ ͷ͓͢͢ΊΤοηϯε

  31. ੍໿ͷಋೖ

  32. CSSʹ੍໿Λಋೖ͢Δཧ༝ • CSSͷ࢓༷͸γϯϓϧͳ͚ͩʹɺॻ͖ํʹΑͬͯ͸Ͳ͜·Ͱ΋ ෳࡶʹͳΓಘΔɻͦͷ੍ޚ͸ॻ͖खʹҕͶΒΕΔ • ੍໿Λಋೖ͢Δ͜ͱͰɺࣦഊͮ͠Β͍ߏ଄Λ࡞Δ • ͜͜Ͱ͸ޮՌతͳ3ͭͷ੍໿Λ঺հ

  33. ੍໿1: Ϋϥεͷ໋໊نଇ • CSS͸ηϨΫλͰࢦఆͨ͠ͱ͓Γʹద༻͞ΕΔͷͰɺΫϥεͷ໋໊͕ ඇৗʹॏཁ • ·ͨɺείʔϓͱ͍͏ߟ͑ํ͕ଘࡏ͠ͳ͍ͷͰɺڝ߹͕ൃੜ͠΍͍͢ • ҰҙͰɺ಺༰ͷཧղ͠΍͍͢΋ͷ͕๬·͍͠ •

    ͜ΕΒʹண໨ͨ͠ํ๏࿦ʹ͸ BEM ΍ SUIT CSS, ECSS ͳͲ͕͋Δ
  34. BEM https://en.bem.info/ • ίϯϙʔωϯτʢಠཱͨ͠෦඼୯ҐʣΛجຊͱͨ͠ઃܭࢦ਑ɻ ΫϥεΛ Block, Element, Modifier ͔Β૊ΈཱͯΑ͏ͱ͍͏΋ͷ •

    BEMࣗମ͸໋໊نଇΛڧ੍͠ͳ͍͕ɺMindBEMdingͳͲͷ໋໊ نଇ͕ྑ͘ར༻͞ΕΔ .search-form__button--disabled Block Element Modifier
  35. BEMΛར༻ͨ͠Ϋϥεͷ໋໊ • BEMΛར༻͢Ε͹είʔϓΛΤϛϡϨʔτ͢Δ͜ͱ͕Ͱ͖Δ • ୭͕ઃܭͯ͠΋ҰҙͰΘ͔Γ΍͘͢ɺিಥͷগͳ͍Ϋϥε໊ʹ ͳΔʢ͸ͣʣ • Ϋϥε໊͕৑௕ʹͳΔɺ __ ,

    -- ͳͲͷ׳Εͳ͍ه߸͕͋Δɺͱ ͍͏఺͸੍໿ͷτϨʔυΦϑͱͯ͠ड͚ೖΕΔඞཁ͕͋Δ
  36. ੍໿2: ৄࡉ౓ΛͳΔ΂͘ಉ͡ʹอͭ • ৄࡉ౓ʹແ༻ͳେখ͕͋Δͱɺҙਤͤ͵ڝ߹͕ൃੜ͠΍͍͢ • ͳ͔ͥࢦఆͨ͠ελΠϧ͕൓ө͞Εͳ͍ • → !important ͷొ৔

    • ৄࡉ౓ͷେখ͸ҙਤతʹઃܭ͢΂͖…͕ͩɺʮؔ৺ͷ୩ʯ͕͋ ΔதͰͦΕ͸ϋʔυϧ͕ߴ͍
  37. ৄࡉ౓ͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933; }

    } ※Sassه๏Ͱ͢ɻҎ߱ͷίʔυ͸͢΂ͯಉ༷Ͱ͢ <nav> <ul class="links"> <li></li> <li></li> <li class="pickup"></li> </ul> </nav>
  38. ৄࡉ౓ͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933; }

    } <nav> <ul class="links"> <li></li> <li></li> <li class="pickup"></li> </ul> </nav> <div id="menu"> <ul class="links"> <li></li> <li></li> <li class="pickup"></li> </ul> </div> ϝχϡʔͰ΋ ࢖͑Δͳ
  39. ৄࡉ౓ͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933; }

    } #menu { .links { font-size: 1rem; color: #333; } } <nav> <ul class="links"> <li></li> <li></li> <li class="pickup"></li> </ul> </nav> <div id="menu"> <ul class="links"> <li></li> <li></li> <li class="pickup"></li> </ul> </div> ϝχϡʔ͸ ͪΐͬͱݟͨ໨ม͑Α͏ ʢৄࡉ౓ߴʣ
  40. ৄࡉ౓ͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933 !important;

    } } #menu { .links { font-size: 1rem; color: #333; } } <nav> <ul class="links"> <li></li> <li></li> <li class="pickup"></li> </ul> </nav> <div id="menu"> <ul class="links"> <li></li> <li></li> <li class="pickup"></li> </ul> </div> ͳΜ͔ ελΠϧ͋ͨΒͳ͍ ͠ !important ͠ͱ͜
  41. ৄࡉ౓ͷҙਤͤ͵มಈΛ๷੍͙໿ • ࢠଙηϨΫλΛ࢖༻͠ͳ͍ʢ্ঢΛ๷͙ʣ • IDηϨΫλΛ࢖༻͠ͳ͍ʢ্ঢΛ๷͙ʣ • ཁૉηϨΫλΛ࢖༻͠ͳ͍ʢ௿ԼΛ๷͙ʣ • ΋ͪΖΜCSSͷදݱ͸ͦͷ෼੍ݶ͞ΕΔ

  42. ࢠଙηϨΫλΛ࢖Θͳ͍ ڧ੍͍ݶͳͷͰɺྫ֎ͱͯ͠ڐ༰͢ΔέʔεΛఆٛ͢Δ͜ͱ΋͋Δ /* Bad */ #menu { .links { font-size:

    1rem; color: #333; .sub-links { font-size: 0.8rem; } } } /* Good */ .menu-links { color: #333; } .menu-links-main { font-size: 1rem; } .menu-links-sub { font-size: 0.8rem; }
  43. ੍໿3: ϨΠΞ΢τͱݟͨ໨Λ෼཭͢Δ • ϨΠΞ΢τͱݟͨ໨͕ಉ͡Ϋϥεʹఆٛ͞Ε͍ͯΔͱɺ࠶ར༻ ͷϋʔυϧ্্͕͕ͬͯॻ͖΍ॏෳఆٛ͞Ε͕ͪ • ϨΠΞ΢τΛผͷΫϥεʹ੾Γग़͓ͯ͘͠ͱɺ࠶ར༻͠΍͍͢ • ίϯϙʔωϯτͷॊೈͳϨΠΞ΢τ͕ՄೳʹͳΔ

  44. ϨΠΞ΢τͱݟͨ໨ͷ෼཭ͷྫ ࢠηϨΫλ͸ৄࡉ౓Λ্͛Δ͕ɺൣғΛݶఆత͢ΔͨΊʹ׆༻Ͱ ͖Δʢࢀߟྫ: RSCSSʣ /* ϨΠΞ΢τ (prefix: -l) */ .l-comments

    { > .comment { margin-top: 8px; } > .comment + .comment { margin-left: 4px; } } /* ݟͨ໨ */ .comment { display: block; border: 1px solid #aaa; }
  45. ϨΠΞ΢τͱݟͨ໨Λ෼཭͢ΔσϝϦοτ • ίϯϙʔωϯτͷڽू౓ͷ໘ͰτϨʔυΦϑ͕͋Δ • ࡉ͔͘෼཭͗͢͠Δͱཁૉ͔Βಉ࣌ʹґଘ͢ΔΫϥε͕૿͑Δ ͠ɺ࢖͍ํ΋೉͘͠ͳΔ • ඞਢͱ͸ͤͣɺϨΠΞ΢τ૚Λઃ͚ͯ෼཭Λਪ঑͢Δͷ΋ख • ࢀߟྫ:

    SMACSS, MCSS, ITCSS, FLOCSS, FLOU
  46. ͪΐ͍଍͠Ϋϥεͷಋೖ

  47. ͪΐ͍଍͠Ϋϥε • Ұൠతʹ͸ Utility ͱݺ͹ΕΔ΋ͷͰɺ൚༻తͳϔϧύʔΫϥε • CSSϑϨʔϜϫʔΫͰ΋ఆ͍ٛͯ͠Δ͜ͱ͕͋Δ
 (Bootstrap 4, UIKit,

    Tailwind CSS, Foundation 6, ...) <div class="margin-bottom-3 text-right">Hello</span> <div class="margin-bottom-3 text-center">World</span>
  48. ͪΐ͍଍͠ͷྑ͞ • จ຺΍ϨΠΞ΢τ͔Βݟͨ໨Λ෼཭͠΍͘͢ͳΔ • ཁૉͷίΞͳελΠϧʹूதͯ͠ߟ͑Δ͜ͱ͕Ͱ͖Δ • CSSͷ஌ࣝʹΑΒͣฏ౳ʹελΠϧΛ౰ͯΔ͜ͱ͕Ͱ͖Δ • ͪΐͬͱͨ͜͠ͱͰσβΠϯج४ʹԊ͍ͬͯΔ͔σβΠφʹ֬ ೝͯ͠΋Β͏ඞཁ͕ͳ͘ͳΔ

  49. ԿΛͪΐ͍଍͢΂͖͔ σβΠϯج४ʹଈͨ͠Ϋϥε • Spacing (margin, padding) • Typography (font-size, line-

    height) • Color variations ݟͨ໨ͷ෼཭Λิॿ͢ΔΫϥε • Flexbox • Float • Display
  50. ͪΐ͍଍͗͢͠͠ʹ͸ؾΛ͚ͭΔ • HTML͔ΒCSS΁ͷґଘ͕૿େɺີ݁߹ʹͳΓCSSͷมߋʹΑΔӨڹ ͕େ͖͘ͳΔ • ͪΐ͍Ͱ͸ͳ͍ͳΒͪΌΜͱΫϥεԽ͢Δ • ࠷େͪΐ͍଍͠਺ͷ໨҆ΛܾΊΔͳͲ͕༗ޮ • ۃ୺ͳྫʢδϣʔΫʣ:

    https://github.com/marmelab/universal.css <span class="display-block background-blue font-arial font- color-white solid-blue-border padding-20"></span>
  51. ͪΐ͍଍͠Ϋϥε͸γϯϓϧʹอͭ • ޿ൣғͰ࢖ΘΕΔΫϥεͳͷͰɺมԽͮ͠Β͍಺༰ʹ͢Δ • มԽͯ͠΋ͦͷӨڹ͕ҙਤతͰ͋Δ͜ͱΛอͭ • ࢠଙηϨΫλͳͲͱ૊Έ߹Θ্ͤͨॻ͖͸ආ͚Δɻ࡞༻͕༧ଌ ͮ͠Β͘ͳΔ

  52. ڮͷݶք

  53. ڮ͕ڊେʹͳͬͯ͘Δ • ϧʔϧ͸ෳࡶʹ • ͪΐ͍଍͠Ϋϥε͸ଟ༷Խ • ڮ͕ద੾ʹ࢖ΘΕ͍ͯΔ͔ͷνΣοΫͷෛ୲ • ҙਤͱҧ͏࢖ΘΕํΛͨ͠ͱ͖ͷࠞཚ •

    ڮࣗମͷϝϯςφϯείετ͕େ͖͘ͳͬͯ͘Δ
  54. ؔ৺ͷ୩͸૬มΘΒͣଘࡏ͢Δ • ࠜຊతʹ͸ղܾ͍ͯ͠ͳ͍ • ڮ͸͔ͨ͠ʹޮՌతɻͨͩɺ΋ͱ΋ͱ͋ͬͨෛ࠴Λɺརࢠͷ௿ ͍ෛ࠴ʹ෇͚ସ͚͑ͨͩͱ΋͍͑Δ • ڮΛඞཁे෼ͳେ͖͞ʹอͭͨΊʹɺ୩ࣗମʹରॲ͍ͨ͠

  55. ୩ΛຒΊΔ • ϝϯόʔͷؔ৺Λ޿͛ɺνʔϜશһͰCSSΛอक͢ΔจԽΛࠜ ෇͔ͤΔ • ֶशίετΛड͚ೖΕɺଐਓԽͤͣʹઃܭ΍ϨϏϡʔ͕Ͱ͖Δ Α͏ʹͳΔ • Ұਓ͡Όͳͯ͘νʔϜͱͯ͠ͷ׆ಈ

  56. ͦΕͧΕͷಛ௃ ղܾՄೳͳ໰୊ ࣮ߦɾܧଓͷ༰қ͞ ڮΛ͔͚Δ ݶఆత ؆୯
 Ͱ͖Δ͜ͱ͔Β͸͡ΊΒΕΔ ୩ΛຒΊΔ ࠜຊత ೉͍͠

    ͙͢ʹ݁Ռ͸ग़ͳ͍
  57. ͦΕͧΕͷಛ௃ • ୩ΛຒΊΔํ๏͸ཧ૝త͕ͩɺ୩͕େ͖͍νʔϜ΄Ͳ࣮ߦ͕೉ ͍͠ • ·ͣ͸ڮΛ͔͚ɺฒߦͯ͠ঃʑʹ୩ΛຒΊΔྲྀΕ͕ݱ࣮త ղܾՄೳͳ໰୊ ࣮ߦɾܧଓͷ༰қ͞ ڮΛ͔͚Δ ݶఆత

    ؆୯
 Ͱ͖Δ͜ͱ͔Β ୩ΛຒΊΔ ࠜຊత ೉͍͠ ͙͢ʹ݁Ռ͸ग़ͳ͍
  58. Ͳͷॱ൪ͰऔΓ૊Ή͔

  59. ͱ͋Δ։ൃνʔϜ • CSSͷٕज़తෛ࠴ʹΑͬͯ։ൃεϐʔυ͕௿Լ • CSSʹৄ͍͠ϝϯόʔ͕͍Δ͕ɺଐਓԽ͍ͯ͠Δঢ়ଶ

  60. ϨϏϡʔ͓ئ͍͠·͢ʂ ͱ͋Δ։ൃνʔϜ • ଐਓԽʹΑΓෛՙ͕ूத͠ɺϘτϧωοΫʹ ͜͜ௐ੔͍ͯͩ͘͠͞ʂ ίʔσΟϯάཔΈ·͢ʂ

  61. ظݶ͕͋Δ͔Β Ұ୴ೖΕͯ͠·͓͏ ͱ͋Δ։ൃνʔϜ • ͦͷϝϯόʔ͕΍Γ͖ΕͣʹऔΓ͜΅͢Α͏ʹͳΔͱɺ͞Βʹ ෛ࠴͕ੵ·Ε͍ͯ͘ෛͷϧʔϓ ࣗ෼Ͱ΍ͬͯΈΔ͔ ͪΐͬͱ·ͬͯ…

  62. Ͳ͏औΓ૊Ί͹Α͍ͩΖ͏͔ • ϑϩϯτΤϯυΤϯδχΞΛޏ͏ʁ • Ұ࣌తʹෛ୲͸ܰݮ͞Εͦ͏ • ௕ظతʹ͸ͦͷϝϯόʔʹෛ୲͕ूதͯ͠ϘτϧωοΫ͕Ҡಈ ͢Δ͚ͩʹͳΓͦ͏

  63. Ͳ͏औΓ૊Ί͹Α͍ͩΖ͏͔ • ·ͣ͸ෛͷϧʔϓΛࢭΊͯɺແࡦʹෛ࠴Λ૿΍͞ͳ͍Α͏ʹ͠ ͍ͨ • ͦͯ͠ෛ࠴Λฦ͍͚ͯ͠ΔΑ͏ʹ͍ͨ͠

  64. ·ͣɺখ͘͞ڮΛ͔͚Δ • ͪΐ͍଍͠ΫϥεΛಋೖɻʮUtilityʯͱ෼ྨ • ࢖͍࢝Ί΍͘͢ɺ௚઀తͳޮՌ͕ग़΍͍͢ • ෛ࠴ͷ૿ՃΛ஗͘Ͱ͖Δ • ͪΐͬͱͨ͠ґཔ͕ݮΓɺৄ͍͠ϝϯόʔͷෛ୲͕ܰ͘ͳΔ •

    طଘͷίʔυͷ੾Γ཭͠ʹ࢖͑Δ
  65. ڮΛ࢖ͬͯ΋Β͏ • ڮΛ͔͚ͯ΋஌ΒΕͳ͚Ε͹ҙຯ͕ͳ͍ • ελΠϧΨΠυΛ࡞੒ͯ͠प஌ • ελΠϧΨΠυδΣωϨʔλΛར༻ • Astrum, Hologram,

    Fractal, SC5 ͳͲ
  66. Astrum http://astrum.nodividestudio.com/

  67. ελΠϧΨΠυʹॻ͘͜ͱ • ఆٛ͞Ε͍ͯΔ Utility ͱɺ࢖༻ྫɺ஫ҙ఺ • ελΠϧΨΠυͷߋ৽ͷ࢓ํ

  68. ϧʔϧͷ࡞੒ • ৽͍͠ΫϥεΛ࡞Δͱ͖ͷํ਑ • ͲΜͳํ๏࿦ɺ੍໿Λ࠾༻͢Δ͔ͷ߹ҙΛ࡞Δ • ͜Ε΋ελΠϧΨΠυ΍WikiͳͲʹهࡌͯ͠໨ʹ෇͖΍͍͢Α ͏ʹ͓ͯ͘͠

  69. ৽͍͠ը໘Ͱ͸ ʮ໎Θͣ࢖͑Δ Utilityʯͱ ʮࣦഊΛ๷͙ϧʔϧʯ Ͱ҆શʹ࣮૷͍͚ͯ͠Δ

  70. ෛ࠴ͷෛͷϧʔϓ͔Βൈ͚ग़ͤͨ͸ͣ • ͱ͸͍͑ɺطଘͷͱ͜Ζ͕յΕ΍͍͢ͷ͸ͦͷ··… • ৽͍͠ϧʔϧͷਁಁ΋્֐͢Δ • طଘίʔυΛϦϑΝΫλϦϯάͯ͠ɺྑ͍ߏ଄ʹ͍࣋ͬͯ͘

  71. ϦϑΝΫλϦϯάΛ࢝ΊΔલʹ • ෛ࠴Λ࣋ͭΫϥε͸޿ൣғʹɺ࣌ʹ͸্ॻ͖͞Εͭͭ࢖ΘΕͯ ͍Δ • ஔ͖׵͑ͨ݁Ռɺҙਤͤ͵Өڹ͕ͳ͍͔Λ͔֬ΊΔͷ͸Ұۤ࿑

  72. ϏδϡΞϧϦάϨογϣϯςετ • ݟͨ໨ͷࣗಈςετ • εΫϦʔϯγϣοτͷࠩ෼Λग़ྗɺҙਤͤ͵มߋ͕ͳ͍͜ͱΛ ֬ೝ͢Δ • ςετπʔϧ͕ར༻Մೳ • BackstopJS,

    REG-SUIT
  73. BackstopJS Rails + BackstopJS ͷखલຯḩͷղઆهࣄ http://upinetree.hatenablog.com/entry/2018/05/13/231951

  74. ஍ಓͳϦϑΝΫλϦϯάͷ͸͡·Γ • ޮՌ͕ग़΍͍͢ͱ͜Ζɺ໰୊͕େ͖͍ͱ͜ΖΛ༏ઌͯ͠ߦ͏ • ಉ͡಺༰ɾ໨తͳͷʹҧ͏Ϋϥεʹͳ͍ͬͯΔ΋ͷΛڞ௨Խ • ҧ͏໨తͷΫϥεͳͷʹ্ॻ͖ɾڞ௨Խ͍ͯ͠Δ΋ͷΛ෼཭ • ࡉ͔͍ௐ੔Λ͗͢͠Δͱؾ͕ԕ͘ͳΔɻҰ୴ஔ͍͓ͯ͘

  75. ϦϑΝΫλϦϯά࡞ۀͷதͰͷൃݟ • ΑΓ൚༻తͳߏ଄͕ݟ͔ͭΔ͸ͣ • ͨͱ͑͹άϦουγεςϜͷΑ͏ͳϨΠΞ΢τΫϥε͕୅ද֨ • ͦΕΒΛΫϥεԽͯ͠࠶ར༻Մೳʹ͢Δ

  76. ͨͩ͠ɺա౓ͳDRY͸໨ࢦ͞ͳ͍ • ࢖ΘΕํ͕ҧ͏ͳΒɺॏෳఆٛͨ͠΄͏͕໰୊ʹͳΓͮΒ͍ • mixin ΋ಉ༷Ͱɺந৅Խͷࡍ͸े෼ݕ౼͢Δ

  77. ٳܜ΋େࣄ ☕ • CSSͷϦϑΝΫλϦϯά͸஍ຯ͕ͩɺ୯७࡞ۀͰ͸ͳ͍ • શମͷߏ଄Λ೺Ѳ͠ͳ͕Βߦ͏ɺͱͯ΋ؾΛ࢖͏࡞ۀ • ͜ͷஈ֊Ͱ͸ෛͷϧʔϓ͔Βൈ͚ग़͍ͤͯΔͷͰɺண࣮ʹߦ͏

  78. ஍ಓͰటष͍͚Ͳɺଓ͚Δ • ͲΜͲΜ͖Ε͍ʹɺಈ͖΍͘͢ͳͬͯ͘Δ • ը໘Λ৮ΔաఔͰγεςϜશମͷཧղ͕ਂ·Δ • νʔϜΈΜͳͰ΍Δ͜ͱ͕Ͱ͖ΔͱΑΓྑ͍ • ؔ৺Λ޿͛ɺ୩ΛຒΊ͍ͯ͘ػձ͕࡞ΕΔ

  79. ·ͱΊ

  80. ·ͱΊ • CSSͷٕज़తෛ࠴ͷࠜݯ͸ʮؔ৺ͷ୩ʯ • ؔ৺ͷ୩ʹʮઃܭํ๏࿦ʯʮ੍໿ʯʮͪΐ͍଍͠Ϋϥεʯͷڮ Λ͔͚Δ • ڮʹ͸ݶք͕͋Δɻ୩ΛຒΊΔ׆ಈ΋େࣄ • ಓͷΓ͸௕͍͚Ͳɺখ͘͞͸͡ΊΔ͜ͱ͸͙͢ʹͰ͖Δ

  81. ͓·͚

  82. ڐ༰͢ΔࢠଙηϨΫλͷྫ: Blockʹดͨ͡ఆٛ /* Good */ .carousel { font-size: 1rem; .home

    & { font-size: 2rem; } } .carousel ͷৄࡉ౓ͷڧऑ͕ Block ͷ {} ಺ʹด͍ͯ͡ΔͷͰɺӨ ڹൣғΛ༧ଌ͠΍͍͢ /* Bad */ .carousel { font-size: 1rem; } .home { .carousel { font-size: 2rem; } } <div class="home"> <div class="carousel"></div> </div>