Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSの技術的負債との向き合い方 / How to Deal with Technical D...

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

Takuya Matsumoto

March 22, 2019
Tweet

More Decks by Takuya Matsumoto

Other Decks in Programming

Transcript

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

    Matsumoto @upinetree Rails Developer Meetup 2019 Day 1 2019.03.22
  2. νʔϜ։ൃͰؔ৺Λ࣋ͭ΂͖ࣄฑ͸ͨ͘͞Μ DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε

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

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

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

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

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

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

    ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ϝϯόʔD ͋ΔνʔϜͷϝϯόʔͷؔ৺ ͜ͷνʔϜͷσβΠφʹͱͬͯ… CSS͸දݱखஈͷ1ͭͰ͔͠ͳ͍ ੵۃతʹઃܭ͠Α͏ͱ͍͏ ಈػ͚͕ͮ೉͍͠
  9. CSSઃܭํ๏࿦ͱ͸ • ઌਓ͕ͨͪߟ͑ͨϕετϓϥΫςΟεू • OOCSS, BEM, SUIT CSS, SMACSS, MCSS,

    RSCSS, ECSS, ITCSS, FLOCSS, FLOU, ... • υΩϡϝϯτ΍఩ֶΛΞ΢τιʔεͰ͖Δ • ଟ͘ͷಋೖࣄྫ͕͋Γɺ৘ใ͕खʹೖΕ΍͍͢
  10. BEM https://en.bem.info/ • ίϯϙʔωϯτʢಠཱͨ͠෦඼୯ҐʣΛجຊͱͨ͠ઃܭࢦ਑ɻ ΫϥεΛ Block, Element, Modifier ͔Β૊ΈཱͯΑ͏ͱ͍͏΋ͷ •

    BEMࣗମ͸໋໊نଇΛڧ੍͠ͳ͍͕ɺMindBEMdingͳͲͷ໋໊ نଇ͕ྑ͘ར༻͞ΕΔ .search-form__button--disabled Block Element Modifier
  11. ৄࡉ౓ͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933; }

    } ※Sassه๏Ͱ͢ɻҎ߱ͷίʔυ͸͢΂ͯಉ༷Ͱ͢ <nav> <ul class="links"> <li></li> <li></li> <li class="pickup"></li> </ul> </nav>
  12. ৄࡉ౓ͷ্ॻ͖߹ઓ .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> ϝχϡʔͰ΋ ࢖͑Δͳ
  13. ৄࡉ౓ͷ্ॻ͖߹ઓ .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> ϝχϡʔ͸ ͪΐͬͱݟͨ໨ม͑Α͏ ʢৄࡉ౓ߴʣ
  14. ৄࡉ౓ͷ্ॻ͖߹ઓ .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 ͠ͱ͜
  15. ࢠଙηϨΫλΛ࢖Θͳ͍ ڧ੍͍ݶͳͷͰɺྫ֎ͱͯ͠ڐ༰͢ΔέʔεΛఆٛ͢Δ͜ͱ΋͋Δ /* 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; }
  16. ϨΠΞ΢τͱݟͨ໨ͷ෼཭ͷྫ ࢠηϨΫλ͸ৄࡉ౓Λ্͛Δ͕ɺൣғΛݶఆత͢ΔͨΊʹ׆༻Ͱ ͖Δʢࢀߟྫ: RSCSSʣ /* ϨΠΞ΢τ (prefix: -l) */ .l-comments

    { > .comment { margin-top: 8px; } > .comment + .comment { margin-left: 4px; } } /* ݟͨ໨ */ .comment { display: block; border: 1px solid #aaa; }
  17. ͪΐ͍଍͠Ϋϥε • Ұൠతʹ͸ 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>
  18. ԿΛͪΐ͍଍͢΂͖͔ σβΠϯج४ʹଈͨ͠Ϋϥε • Spacing (margin, padding) • Typography (font-size, line-

    height) • Color variations ݟͨ໨ͷ෼཭Λิॿ͢ΔΫϥε • Flexbox • Float • Display
  19. ڐ༰͢ΔࢠଙηϨΫλͷྫ: 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>