CSSI: CSS Investigation

Slide 1

Slide 1 text

CSSI: CSS Investigation CSS؝٦سٖؽُ٦ך➬倯侄ִתׅ by Yuya Saito @ Rich Media 2014.11.08 #cssؔآ؟ٝ

Slide 2

Slide 2 text

Yuya Saito UX Engineer @ RichMedia

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Beneﬁts of an Audit ؝٦سٖؽُ٦ךⵃ挿

Slide 5

Slide 5 text

Reduce File Sizes ؿ؋؎ٕ؟؎ؤך簭㼭

Slide 6

Slide 6 text

#perfmatters

Slide 7

Slide 7 text

؝٦سك٦أָ㣐ֹֽ׸ל㣐ְֹקוծ غָؚ欰׫⳿ׁ׸׷堣⠓כ㟓ִ׷կ

Slide 8

Slide 8 text

Ensure Consistency with Guidelines ؖ؎سٓ؎ٝח״׷♧顐䚍ך然⥂

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Document Document Document

Slide 11

Slide 11 text

“ — Raymond Chen, Developer at Windows ؝٦سכ剅ֻ堣⠓״׶铣׬堣⠓ך倯ָ㖇⦜涸ח㢳ְկ ׌ַ׵ֿ׉ծ ׃׏ַ׶ה鎘歗ׅ׷ץֹ׌կ

Slide 12

Slide 12 text

Standardize Your Code ؝٦سك٦أך垥彊⻉

Slide 13

Slide 13 text

“ — Nicolas Gallagher ו׸׌ֽ㢳ֻך➂ָ؝٦سك٦أח顀柃׃גְ׋ה׃ג׮ծ ➂ָ؝٦س׾剅ְ׋״ֲח剅ֻֿהկ

Slide 14

Slide 14 text

➂꟦כծ ػة٦ٝ钠陎׾遤ֲךָ䖤䠐

Slide 15

Slide 15 text

ず䠐ך♳ךأة؎ٕ٥ٕ٦ٕ

Slide 16

Slide 16 text

Increase Performance ػؿؓ٦وٝأぢ♳

Slide 17

Slide 17 text

Reduce HTTP Request

Slide 18

Slide 18 text

劤殢؟٦غדוך״ֲח $44ָㄎן⳿ׁ׸גְ׷ךַ

Slide 19

Slide 19 text

Minify + Concatenation, etc. Build Process

Slide 20

Slide 20 text

؝٦سٖؽُ٦ך倯岀 How to Audit CSS

Slide 21

Slide 21 text

䗰圓ִ Preparation

Slide 22

Slide 22 text

倜׋ז؝٦س׾鷄⸇׃׋׶ 㢌刿׃׋׶׃זְկ

Slide 23

Slide 23 text

剅ֹ鴥׿דְְךכ ؝ًٝزך׫կ

Slide 24

Slide 24 text

ًٝذشٝأ䚍ך넝ְ 繟׃ְ؝٦سك٦أ׾ 䩛חⰅ׸׷ֿהկ

Slide 25

Slide 25 text

׌ֽדכזֻծ ؝ٓنٖ٦ءّٝ׃װְׅ橆㞮׾ 䭯ג׷ֿהկ

Slide 26

Slide 26 text

غؚ׾䤄׿ד➂׾䤄ת׆

Slide 27

Slide 27 text

ر؍ؙٖزٔؿ؋؎ٕ圓鸡 (File System) Architecture

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

㢌刿׾遤ֲֶהׅ׷ꥷחծ וךؿ؋؎ٕח鎸鶢ׅ׸ל ְְךַ

Slide 30

Slide 30 text

$44ָؿ؋؎ٕ׃ַזְ

Slide 31

Slide 31 text

؝ًٝز׾ⵃ欽׃ג 鎸鶢㜥䨽׾ⴓⶴ׃גֶֻկ

Slide 32

Slide 32 text

؝٦سك٦أⰋ⡤ך䪾䳢 Inventory

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

StyleStats by Koji Ishimoto github.com/t32k/stylestats

Slide 35

Slide 35 text

CSS Dig by Tom Genoni github.com/tomgenoni/cssdig

Slide 36

Slide 36 text

Grep Your Styles TM

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

؝٦سك٦أךؙؔٔذ؍ثؑحؙ Linting CSS

Slide 39

Slide 39 text

CSSLint by Nicole Sullivan github.com/CSSLint/csslint

Slide 40

Slide 40 text

csslint file1.css file2.css

Slide 41

Slide 41 text

Ⰻ⡤䠬׾䪾䳢ׅ׷׋׭ח -JOU׾遤ֲկ

Slide 42

Slide 42 text

ة؎هؚٓؿ؍ה葿 The Worst Oﬀender: Typography and Color

Slide 43

Slide 43 text

Typography

Slide 44

Slide 44 text

Type-o-matic by Nicole Sullivan github.com/stubbornella/type-o-matic

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

ل٦آקוثؑحؙ׃גծ ػة٦ٝ׾䱱׷կ

Slide 47

Slide 47 text

CSS Colorguard by Alex Sexton github.com/SlexAxton/css-colorguard

Slide 48

Slide 48 text

CIEDE2000 algorithm

Slide 49

Slide 49 text

فٔؿ؍حؙأך鋅湫׃ You Might Not Need Those Preﬁx Anymore!

Slide 50

Slide 50 text

Autopreﬁxer by PostCSS github.com/postcss/autopreﬁxer

Slide 51

Slide 51 text

caniuse.com

Slide 52

Slide 52 text

劢⢪欽הꅾ醱ך涪鋅 Find Unused / Duplicated

Slide 53

Slide 53 text

uCSS by Opera github.com/operasoftware/ucss

Slide 54

Slide 54 text

UnCSS by Giacomo Martino github.com/giakki/uncss

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

؝٦سٖؽُ٦ך⾱⵱ Principle of Audit

Slide 57

Slide 57 text

The Design Principle رؠ؎ٝ⾱⵱

Slide 58

Slide 58 text

Simple is Beautiful

Slide 59

Slide 59 text

荈ⴓָ剅ְ׋׮ךד׮ծ ׉ֲדזֻג׮ծ 䝤ְ؝٦س׾嗚濼דֹ׷ 湡׾균ֲկ

Slide 60

Slide 60 text

Separation of Concerns ꟼ䗰ךⴓꨄ

Slide 61

Slide 61 text

“ — Wikipedia فؚٗٓي׾堣腉꬗חְֶג〳腉זꣲ׶ꅾ醱ָזְծ 醱侧ך堣圓ח僇然חⴓⶴׅ׷ֿה׾ְֲկ ֿֿדְֲչꟼ䗰 ꟼ䗰✲ պהכծ فؚٗٓيך֮׷堣腉װ䮶׷莸ְծ湡涸ךֿהד֮׷կ

Slide 62

Slide 62 text

CSS HTML JavaScript

Slide 63

Slide 63 text

OOCSS

Slide 64

Slide 64 text

Separate Structure and Skin

Slide 65

Slide 65 text

Structure

Slide 66

Slide 66 text

Skin

Slide 67

Slide 67 text

Separate Container and Content

Slide 68

Slide 68 text

Same Module

Slide 69

Slide 69 text

Single Responsibility Principle ⽃♧顑⟣ך⾱⵱

Slide 70

Slide 70 text

“ — Robert C. Martin ؙٓأח㢌刿ָ饯ֿ׷椚歋כծ ♧אד֮׷ץֹկ

Slide 71

Slide 71 text

䌢ח㢌⻉׾実׭׵׸׷$44ך 顑⹡ח㼎׃ג׮㹋ꥷ⚺纏涸ז 滠㖑挿׾鋅ְ׌׃װֻׅז׷կ

Slide 72

Slide 72 text

2 㢌刿ך椚歋ָא֮׷㜥さծ ׉ךؙٓأכאחⴓⶴׅץֹկ אך㢌刿ָאךؙٓأח ת׋ָ׷ז׵ծ ׉ךؙٓأכאח窟さׅץֹկ

Slide 73

Slide 73 text

“ — Me ְְ ؙٓأせָ䙼ְאְ׋׵ծ ➬✲ךכ穄׻׏גְ׷կ

Slide 74

Slide 74 text

Principle of Least Knowledge 剑㼭濼陎ך⾱⵱

Slide 75

Slide 75 text

“ — Wikipedia ⟣䠐ךؔـآؙؑزָ荈ⴓ⟃㢩؟ـ؝ٝه٦طٝزろ׬ ך圓鸡װفٗػذ؍ח㼎׃ג䭯׏גְ׷⟎㹀׾ 剑㼭ꣲחׅץֹד֮׷կ

Slide 76

Slide 76 text

SMACSS by Jonathan Snook smacss.com

Slide 77

Slide 77 text

2 1. Category 2. Depth of Applicability

Slide 78

Slide 78 text

#sidebar div { border: 1px solid #333; } #sidebar div h3 { margin-top: 5px; } #sidebar div ul { margin-bottom: 5px; }

Slide 79

Slide 79 text

〳腉זꣲ׶)5.-ך圓鸡ח ⣛㶷׃זְ״ֲח鎸鶢ׅ׷կ

Slide 80

Slide 80 text

CSS Code Smells 䝤ְ؝٦سךחְֶ

Slide 81

Slide 81 text

Harry Roberts A.K.A CSS Wizardly

Slide 82

Slide 82 text

Code smells in CSS by Harry Roberts csswizardry.com/2012/11/code-smells-in-css

Slide 83

Slide 83 text

Code smells in CSS by Me article.enja.io/articles/code-smells-in-css.html

Slide 84

Slide 84 text

Undoing Styles أة؎ٕךٔإحز

Slide 85

Slide 85 text

ٕ٦ٕإحزכ䌢ח竰䪫ך׫׾遤ֲץֹדծ ⟃⵸ך׮ךח鷄⸇ׅ׷ץֹד֮׶ծ ٔإحز׾ׅ׷ץֹדכזְկ

Slide 86

Slide 86 text

Magic Numbers وآحؙشٝغ٦

Slide 87

Slide 87 text

وآحؙشٝغ٦הכծ椚歋׮זֻ չ⹛⡲ׅ׷ַ׵պהְֲ׌ֽד⢪׻׸גְ׷⦼կ

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Qualiﬁed selectors ⵖꣲך䓼ְإؙٖة

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

إؙٖةכ〳腉זꣲ׶剑㼭ꣲח姺׭׷ץֹկ

Slide 92

Slide 92 text

Documentation 椚䚍׾⥂א׋׭ך繎ꆙ湍

Slide 93

Slide 93 text

“ — The Boy Scout Rule 荈ⴓךְ׋㜥䨽כծ׉ֿ׾⳿ג遤ֻהֹծ 勻׋儗״׶׮ֹ׸ְח׃זֽ׸לז׵זְկ

Slide 94

Slide 94 text

؝٦سك٦أ׾椚鍑ׅ׷׋׭חծ سًُؗٝز׾剅ֻ״ֲחׅ׷կ

Slide 95

Slide 95 text

In Closing 穄׻׶ח

Slide 96

Slide 96 text

Bret Victor The Future of Programming @DBX Conference 2013

Slide 97

Slide 97 text

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