昨今のWeb開発においてCSSはほかのプログラミング言語と変わらないくらい巨大化し、複雑になり、そしてメンテナンスが難しくなってきています。 CSSにもリファクタリングはやはり必要です。 本セッションではCSSにおけるリファクタリングへのアプローチにはどのようなものがあるかについて紹介します。
Refactoring CSSRefactoring CSSYuya Saito at REMIXING
View Slide
ιʔείʔυཧղ͘͢͠ͳΒͳ͚ΕͳΒͳ͍ɻ
selector {property: value;}
CSS is Simple
But CSS isProgramming Language!
“The skills required towrite good CSS code areby and large the sameskills required to writegood code in general.”— Lea Verou
ϏδϡΞϧɾϓϨθϯςʔγϣϯϨΠΞτΠϯλϥΫγϣϯ+Ξχϝʔγϣϯ
ׂ͕ଟ্͍ʹɺڧ͍ґଘΛ࣋ͪɺݴޠͱܾͯͯ͠͠ڧྗͩͱݴ͍͕͍ͨɻ
$44Ͱ༏ΕͨίʔυΛॻ͘͜ͱ͍͜͠ͱɻ
ϢʔβମݧΛ্ͤ͞ΔͨΊʹ࠷༏Εͨํ๏
Iteration
ϦϑΝΫλϦϯάɺͦͷ༏ΕͨCSSΛॻͨ͘ΊʹඞཁෆՄܽͳϫʔΫϑϩʔɻ
FoundationApproachAgendaجૅఏҊ
FoundationFoundationجૅ
What is “Good” CSS?
Refactoring (noun): a change made to the internalstructure of software to make it easier tounderstand and cheaper to modify withoutchanging its observable behaviour.
Predictable (༧ଌ͍͢͠)Reusable (࠶ར༻͍͢͠)Maintainable (อक͍͢͠)Scalable (֦ு͍͢͠)The Goals ofGood CSS Architectureby Philip Walton
ͭͷੑ࣭Λ$44Ͱຬͨ͢͜ͱඇৗʹ͍͜͠ͱɻ
A Brief History ofCSS Architecture
slideshare.net/hiloki/modern-cssarchitectureqcon
OOCSSby Nicole SullivanObject Oriented CSS
github.com/stubbornella/oocss/wiki
SMACSSby Jonathan SnookScalable and ModularArchitecture for CSS
smacss.com
BEMby YandexBlock, Element, Modifier
bem.info
42No Silver BulletAgain
ͦΕͧΕͷํ๏ʹ͋ΔҰ؏ͨ͠ڞ௨߲͕ଘࡏ͢Δɻ
ύλʔϯΛͲͷΑ͏ʹൃݟ͠ɺ࣮͠ɺ໋໊͢Δͷ͔ɻ
ApproachApproachఏҊ
Just an Example
Bret VictorThe Future of Programming@DBX Conference 2013
“The most dangerous thought you can have asa creative person is to think you know whatyou're doing.”
“Learn tools, and use tools,but don't accept tools.Always distrust them; always be alert foralternative ways of thinking. ”— Bret Victor
Style Guide / Pattern Library
github.com/styleguide/css
ݸʑͷUIύλʔϯϨΠΞτΛࣗಈతʹ1ϖʔδʹू͢Δπʔϧɻ
Comment
warpspire.com/kss/
jacobrask.github.io/styledocco
trulia.github.io/hologram
Snippets
github.com/adactio/Pattern-Primer
pea.rs
A Lots More...
Document First
“ࣗͷ͍ͨॴɺͦ͜Λग़ͯߦ͘ͱ͖ɺདྷͨ࣌ΑΓ͖Ε͍ʹ͠ͳ͚ΕͳΒͳ͍ɻ”— The Boy Scout Rule
ϦϑΝΫλΛߦ͏ͨΊʹɺυΩϡϝϯτΛॻ͘Α͏ʹ͢Δɻ
Code Smells in CSS
Harry RobertsA.K.A CSS Wizardly
csswizardry.com/2012/11/code-smells-in-css/
article.enja.io/articles/code-smells-in-css.html
Undoing stylesελΠϧͷϦηοτ
ϧʔϧηοτৗʹܧঝͷΈΛߦ͏͖ͰɺҎલͷͷʹՃ͢Δ͖Ͱ͋ΓɺϦηοτΛ͢Δ͖Ͱͳ͍ɻ
Magic numbersϚδοΫφϯόʔ
ϚδοΫφϯόʔͱɺཧ༝ͳ͘ʮಈ࡞͢Δ͔Βʯͱ͍͏͚ͩͰΘΕ͍ͯΔɻ
.site-nav { [ελΠϧ] }.site-nav > li:hover .dropdown {position: absolute;top: 37px; /*ϚδοΫφϯόʔ*/left: 0;}
Qualified selectors੍ݶͷڧ͍ηϨΫλ
ul.nav {...}!a.button {...}!div.header {...}
ηϨΫλՄೳͳݶΓ࠷খݶʹࢭΊΔ͖ɻ
Low-Hanging Fruitfor CSS Refactoring
“Divide and conquer.”
Categorise CSS Rules in the Stylesheet$44ϧʔϧΛΧςΰϦԽ͢Δ
BaseLayoutModuleState+ Shame
csswizardry.com/2013/04/shame-css/
ShameͲ͜Ͱར༻͞Ε͍ͯΔ͔Կނஏ͔͍ͣ͠ίʔυΛॻ͘Ӌʹ͔ؕͬͨShame͔Β͢ΔͨΊͷखॱ
Remove unused CSS༻͍ͯ͠ͳ͍ϧʔϧΛআ͢Δ
github.com/operasoftware/ucss
github.com/ai/autoprefixer
Rename SelectorsҙຯͷΘΓ͍͢ηϨΫλʹॻ͖͑Δ
CSSͷओϓϩύςΟͰͳ͘ɺηϨΫλɻ
͔͠͠ɺ໋໊։ൃऀʹͱ͍ͬͯͭͩͬͯ಄௧ͷλωͰ͢ɻ
ηϨΫλ͕࣋ͭతɺ͋Δ͍ҙٛΛશମΛ௨ͯ͠ৼΓฦͬͯɺԿͰ໋໊͠ͳ͓ͤΔΑ͏ͳϫʔΫϑϩʔΛ࣋ͭ͜ͱɻ
Create Media ObjectϝσΟΞɾΦϒδΣΫτΛ׆༻͢Δ
Media Object
bit.ly/media-object-saves-100-code
Check Your CSS Health$44ͷݱঢ়ΛνΣοΫ͢Δ
େ͋·Γඒ͍͠ͱݴ͍͕͍ͨɺϨΨγʔͳίʔυϕʔεΛҾ͖ܧ͙ɻ
“Houston, we've had a problem.”
www.stylestats.org
html5experts.jp/t32k/5743/
Test in CSS
Linter / Unit test
LinterγϯλοΫεελΠϧνΣοΫ
JSHint / JSLint
csslint.net
github.com/causes/scss-lint
Unit test / End to End TestϢχοτςετΤϯυτΡʔΤϯυςετ
։ൃ͕ܧଓ͞Ε͍ͯΔπʔϧ೦ͳ͕Βଟ͘ͳ͍ɻ
Unit === Module / Component
εΫϦʔϯγϣοτΛൺֱ͢Δ͜ͱͰςετΛߦ͏ɻ
CSS Criticby Christoph Burgmergit.io/csscritic
CSS CriticHTMLϑΝΠϧ܈ʹରͯ͠ςετΛ࣮ߦ͢ΔFireFoxͰͷΈಈ࡞
PhantomCSSby Huddlegit.io/nw85Hw
ಛఆͷDOMΛநग़ͯ͠ςετΛ࣮ߦ͢ΔWebkitͷϔουϨεϒϥβͰͷΈಈ࡞phantomCSS
ಛఆͷϒϥβͰ͔͠ಈ࡞͠ͳ͍ɻ
Selenium
WebdriverCSSby WebdriverJSgit.io/webdrivercss
WebdriverCSSphantomCSSͷSelenium൛4݄಄͔Βߋ৽͕ͳ͍………
Huxleyby Facebookgit.io/huxley
HuxleyςετΛίʔυͰهड़ͤͣɺ࣮ࡍͷΞΫγϣϯΛه(Կނ͔)FireFoxͰͷΈಈ࡞1311݄͔Βߋ৽͕ͳ͍………
SiteEffectby Timm Jensensiteeffect.io
SiteEffectϑϧεΫϦʔϯγϣοτͰͷςετ·ͩެ։લ
body { margin-top: 2px }
ۙެ։(Β͍͠)
OutroOutro͓ΘΓʹ
Web Components
࢝Ί͔ΒᘳͳઃܭΛߦ͏͜ͱͰ͖ͳ͍ɻյΕͨͱ͖ʹ༐ؾΛ࣋ͬͯम෮Ͱ͖ΔઃܭΛࢦ͖͢ɻ
“খ͘͞ࡅ͍ͯɺҰͭͣͭղܾ͢ΕɺղܾͰ͖ͳ͍ͳ͍ɻ”— Andrew Carnegie
Thank You!Thank You!Follow Me at cssradar