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

RailsDM 2019
https://railsdm.github.io/#session-upinetree

ふりかえり
http://upinetree.hatenablog.com/entry/2019/03/27/233842

English version
https://speakerdeck.com/upinetree/how-to-deal-with-technical-debt-of-css

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>