Slide 1

Slide 1 text

Refactoring CSS Refactoring CSS Yuya Saito at REMIXING

Slide 2

Slide 2 text

ιʔείʔυ͸ཧղ͠΍͘͢ ͳΒͳ͚Ε͹ͳΒͳ͍ɻ

Slide 3

Slide 3 text

selector { property: value; }

Slide 4

Slide 4 text

CSS is Simple

Slide 5

Slide 5 text

But CSS is Programming Language!

Slide 6

Slide 6 text

“The skills required to write good CSS code are by and large the same skills required to write good code in general.” — Lea Verou

Slide 7

Slide 7 text

ϏδϡΞϧɾϓϨθϯςʔγϣϯ ϨΠΞ΢τ ΠϯλϥΫγϣϯ+Ξχϝʔγϣϯ

Slide 8

Slide 8 text

໾ׂ͕ଟ্͍ʹɺڧ͍ґଘΛ࣋ͪɺ ݴޠͱܾͯͯ͠͠ڧྗͩͱ͸ݴ͍͕͍ͨɻ

Slide 9

Slide 9 text

$44Ͱ༏ΕͨίʔυΛॻ͘͜ͱ͸ ೉͍͜͠ͱɻ

Slide 10

Slide 10 text

ϢʔβମݧΛ޲্ͤ͞ΔͨΊʹ ࠷΋༏Εͨํ๏

Slide 11

Slide 11 text

Iteration

Slide 12

Slide 12 text

ϦϑΝΫλϦϯά͸ɺ ͦͷ༏ΕͨCSSΛॻͨ͘Ίʹ ඞཁෆՄܽͳϫʔΫϑϩʔɻ

Slide 13

Slide 13 text

Foundation Approach Agenda جૅ ఏҊ

Slide 14

Slide 14 text

Foundation Foundation جૅ

Slide 15

Slide 15 text

What is “Good” CSS?

Slide 16

Slide 16 text

Refactoring (noun): a change made to the internal structure of software to make it easier to understand and cheaper to modify without changing its observable behaviour.

Slide 17

Slide 17 text

Predictable (༧ଌ͠΍͍͢) Reusable (࠶ར༻͠΍͍͢) Maintainable (อक͠΍͍͢) Scalable (֦ு͠΍͍͢) The Goals of Good CSS Architecture by Philip Walton

Slide 18

Slide 18 text

ͭͷੑ࣭Λ$44Ͱຬͨ͢͜ͱ͸ ඇৗʹ೉͍͜͠ͱɻ

Slide 19

Slide 19 text

A Brief History of CSS Architecture

Slide 20

Slide 20 text

slideshare.net/hiloki/modern-cssarchitectureqcon

Slide 21

Slide 21 text

OOCSS by Nicole Sullivan Object Oriented CSS

Slide 22

Slide 22 text

github.com/stubbornella/oocss/wiki

Slide 23

Slide 23 text

SMACSS by Jonathan Snook Scalable and Modular Architecture for CSS

Slide 24

Slide 24 text

smacss.com

Slide 25

Slide 25 text

BEM by Yandex Block, Element, Modifier

Slide 26

Slide 26 text

bem.info

Slide 27

Slide 27 text

42 No Silver Bullet Again

Slide 28

Slide 28 text

ͦΕͧΕͷํ๏࿦ʹ͸ ͋ΔҰ؏ͨ͠ڞ௨߲͕ଘࡏ͢Δɻ

Slide 29

Slide 29 text

ύλʔϯΛͲͷΑ͏ʹ ൃݟ͠ɺ࣮૷͠ɺ໋໊͢Δͷ͔ɻ

Slide 30

Slide 30 text

Approach Approach ఏҊ

Slide 31

Slide 31 text

Just an Example

Slide 32

Slide 32 text

Bret Victor The Future of Programming @DBX Conference 2013

Slide 33

Slide 33 text

“The most dangerous thought you can have as a creative person is to think you know what you're doing.”

Slide 34

Slide 34 text

“Learn tools, and use tools, but don't accept tools. Always distrust them; always be alert for alternative ways of thinking. ” — Bret Victor

Slide 35

Slide 35 text

Style Guide / Pattern Library

Slide 36

Slide 36 text

github.com/styleguide/css

Slide 37

Slide 37 text

ݸʑͷUIύλʔϯ΍ϨΠΞ΢τΛ ࣗಈతʹ1ϖʔδʹू໿͢Δπʔϧɻ

Slide 38

Slide 38 text

Comment

Slide 39

Slide 39 text

warpspire.com/kss/

Slide 40

Slide 40 text

jacobrask.github.io/styledocco

Slide 41

Slide 41 text

trulia.github.io/hologram

Slide 42

Slide 42 text

Snippets

Slide 43

Slide 43 text

github.com/adactio/Pattern-Primer

Slide 44

Slide 44 text

pea.rs

Slide 45

Slide 45 text

A Lots More...

Slide 46

Slide 46 text

Document First

Slide 47

Slide 47 text

“ࣗ෼ͷ͍ͨ৔ॴ͸ɺͦ͜Λग़ͯߦ͘ͱ͖ɺ དྷͨ࣌ΑΓ΋͖Ε͍ʹ͠ͳ͚Ε͹ͳΒͳ͍ɻ” — The Boy Scout Rule

Slide 48

Slide 48 text

ϦϑΝΫλΛߦ͏ͨΊʹɺ υΩϡϝϯτΛॻ͘Α͏ʹ͢Δɻ

Slide 49

Slide 49 text

Code Smells in CSS

Slide 50

Slide 50 text

Harry Roberts A.K.A CSS Wizardly

Slide 51

Slide 51 text

csswizardry.com/2012/11/code-smells-in-css/

Slide 52

Slide 52 text

article.enja.io/articles/code-smells-in-css.html

Slide 53

Slide 53 text

Undoing styles ελΠϧͷϦηοτ

Slide 54

Slide 54 text

ϧʔϧηοτ͸ৗʹܧঝͷΈΛߦ͏΂͖Ͱɺ Ҏલͷ΋ͷʹ௥Ճ͢Δ΂͖Ͱ͋Γɺ ϦηοτΛ͢Δ΂͖Ͱ͸ͳ͍ɻ

Slide 55

Slide 55 text

Magic numbers ϚδοΫφϯόʔ

Slide 56

Slide 56 text

ϚδοΫφϯόʔͱ͸ɺཧ༝΋ͳ͘ ʮಈ࡞͢Δ͔Βʯͱ͍͏͚ͩͰ࢖ΘΕ͍ͯΔ஋ɻ

Slide 57

Slide 57 text

.site-nav { [ελΠϧ] } .site-nav > li:hover .dropdown { position: absolute; top: 37px; /*ϚδοΫφϯόʔ*/ left: 0; }

Slide 58

Slide 58 text

Qualified selectors ੍ݶͷڧ͍ηϨΫλ

Slide 59

Slide 59 text

ul.nav {...}! a.button {...}! div.header {...}

Slide 60

Slide 60 text

ηϨΫλ͸ՄೳͳݶΓ࠷খݶʹࢭΊΔ΂͖ɻ

Slide 61

Slide 61 text

Low-Hanging Fruit for CSS Refactoring

Slide 62

Slide 62 text

“Divide and conquer.”

Slide 63

Slide 63 text

Categorise CSS Rules in the Stylesheet $44ϧʔϧΛΧςΰϦԽ͢Δ

Slide 64

Slide 64 text

Base Layout Module State + Shame

Slide 65

Slide 65 text

csswizardry.com/2013/04/shame-css/

Slide 66

Slide 66 text

Shame Ͳ͜Ͱར༻͞Ε͍ͯΔ͔ Կނஏ͔͍ͣ͠ίʔυΛॻ͘Ӌ໨ʹ͔ؕͬͨ Shame͔Β୤͢ΔͨΊͷखॱ

Slide 67

Slide 67 text

Remove unused CSS ࢖༻͍ͯ͠ͳ͍ϧʔϧΛ࡟আ͢Δ

Slide 68

Slide 68 text

github.com/operasoftware/ucss

Slide 69

Slide 69 text

github.com/ai/autoprefixer

Slide 70

Slide 70 text

Rename Selectors ҙຯͷ఻ΘΓ΍͍͢ηϨΫλʹॻ͖׵͑Δ

Slide 71

Slide 71 text

CSSͷओ໾͸ϓϩύςΟͰ͸ͳ͘ɺηϨΫλɻ

Slide 72

Slide 72 text

͔͠͠ɺ໋໊͸։ൃऀʹͱͬͯ͸ ͍ͭͩͬͯ಄௧ͷλωͰ͢ɻ

Slide 73

Slide 73 text

ηϨΫλ͕࣋ͭ໨తɺ͋Δ͍͸ҙٛΛ શମΛ௨ͯ͠ৼΓฦͬͯɺ Կ౓Ͱ΋໋໊͠ͳ͓ͤΔΑ͏ͳ ϫʔΫϑϩʔΛ࣋ͭ͜ͱɻ

Slide 74

Slide 74 text

Create Media Object ϝσΟΞɾΦϒδΣΫτΛ׆༻͢Δ

Slide 75

Slide 75 text

Media Object

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

bit.ly/media-object-saves-100-code

Slide 78

Slide 78 text

Check Your CSS Health $44ͷݱঢ়ΛνΣοΫ͢Δ

Slide 79

Slide 79 text

େ఍͸͋·Γඒ͍͠ͱ͸ݴ͍͕͍ͨɺ ϨΨγʔͳίʔυϕʔεΛҾ͖ܧ͙ɻ

Slide 80

Slide 80 text

“Houston, we've had a problem.”

Slide 81

Slide 81 text

www.stylestats.org

Slide 82

Slide 82 text

html5experts.jp/t32k/5743/

Slide 83

Slide 83 text

Test in CSS

Slide 84

Slide 84 text

Linter / Unit test

Slide 85

Slide 85 text

Linter γϯλοΫεελΠϧνΣοΫ

Slide 86

Slide 86 text

JSHint / JSLint

Slide 87

Slide 87 text

csslint.net

Slide 88

Slide 88 text

github.com/causes/scss-lint

Slide 89

Slide 89 text

Unit test / End to End Test ϢχοτςετΤϯυτΡʔΤϯυςετ

Slide 90

Slide 90 text

։ൃ͕ܧଓ͞Ε͍ͯΔπʔϧ͸ ࢒೦ͳ͕Βଟ͘͸ͳ͍ɻ

Slide 91

Slide 91 text

Unit === Module / Component

Slide 92

Slide 92 text

εΫϦʔϯγϣοτΛൺֱ͢Δ͜ͱͰ ςετΛߦ͏ɻ

Slide 93

Slide 93 text

CSS Critic by Christoph Burgmer git.io/csscritic

Slide 94

Slide 94 text

CSS Critic HTMLϑΝΠϧ܈ʹରͯ͠ςετΛ࣮ߦ͢Δ FireFoxͰͷΈಈ࡞

Slide 95

Slide 95 text

PhantomCSS by Huddle git.io/nw85Hw

Slide 96

Slide 96 text

ಛఆͷDOMΛநग़ͯ͠ςετΛ࣮ߦ͢Δ WebkitͷϔουϨεϒϥ΢βͰͷΈಈ࡞ phantomCSS

Slide 97

Slide 97 text

ಛఆͷϒϥ΢βͰ͔͠ಈ࡞͠ͳ͍ɻ

Slide 98

Slide 98 text

Selenium

Slide 99

Slide 99 text

WebdriverCSS by WebdriverJS git.io/webdrivercss

Slide 100

Slide 100 text

WebdriverCSS phantomCSSͷSelenium൛ 4݄಄͔Βߋ৽͕ͳ͍………

Slide 101

Slide 101 text

Huxley by Facebook git.io/huxley

Slide 102

Slide 102 text

Huxley ςετΛίʔυͰهड़ͤͣɺ࣮ࡍͷΞΫγϣϯΛه࿥ (Կނ͔)FireFoxͰͷΈಈ࡞ 13೥11݄͔Βߋ৽͕ͳ͍………

Slide 103

Slide 103 text

SiteEffect by Timm Jensen siteeffect.io

Slide 104

Slide 104 text

SiteEffect ϑϧεΫϦʔϯγϣοτͰͷςετ ·ͩެ։લ

Slide 105

Slide 105 text

body { margin-top: 2px }

Slide 106

Slide 106 text

ۙ೔ެ։(Β͍͠)

Slide 107

Slide 107 text

Outro Outro ͓ΘΓʹ

Slide 108

Slide 108 text

$44Ͱ༏ΕͨίʔυΛॻ͘͜ͱ͸ ೉͍͜͠ͱɻ

Slide 109

Slide 109 text

Web Components

Slide 110

Slide 110 text

࢝Ί͔Β׬ᘳͳઃܭΛߦ͏͜ͱ͸Ͱ͖ͳ͍ɻ յΕͨͱ͖ʹ༐ؾΛ࣋ͬͯम෮Ͱ͖ΔઃܭΛ ໨ࢦ͢΂͖ɻ

Slide 111

Slide 111 text

࢝Ί͔Β׬ᘳͳઃܭΛߦ͏͜ͱ͸Ͱ͖ͳ͍ɻ յΕͨͱ͖ʹ༐ؾΛ࣋ͬͯम෮Ͱ͖ΔઃܭΛ ໨ࢦ͢΂͖ɻ

Slide 112

Slide 112 text

“খ͘͞ࡅ͍ͯɺҰͭͣͭղܾ͢Ε͹ɺ ղܾͰ͖ͳ͍໰୊͸ͳ͍ɻ” — Andrew Carnegie

Slide 113

Slide 113 text

Thank You! Thank You! Follow Me at cssradar