CSSI: CSS Investigation

コードレビューはしていますか?
CSSは言うまでもなく、エンドユーザにもっとも近い言語です。それゆえ、変更も多く『壊れやすい』言語です。
しかし、定常的にレビューを実施することで『壊れにくい』状態をキープすることができます。
コードレビューは決して特別なスキルを必要としません。
本セッションでは、明日からすぐ実践できるコードレビューへのアプローチと手法について紹介します。

Transcript

1. CSSI: CSS Investigation CSS؝٦سٖؽُ٦ך➬倯侄ִתׅ by Yuya Saito @ Rich Media 2014.11.08 #cssؔآ؟ٝ
2. Yuya Saito UX Engineer @ RichMedia
4. Benefits of an Audit ؝٦سٖؽُ٦ךⵃ挿
5. Reduce File Sizes ؿ؋؎ٕ؟؎ؤך簭㼭
6. #perfmatters
7. ؝٦سك٦أָ㣐ֹֽ׸ל㣐ְֹקוծ
   غָؚ欰׫⳿ׁ׸׷堣⠓כ㟓ִ׷կ
8. Ensure Consistency with Guidelines ؖ؎سٓ؎ٝח״׷♧顐䚍ך然⥂
10. Document Document Document
11. “ — Raymond Chen, Developer at Windows ؝٦سכ剅ֻ堣⠓״׶铣׬堣⠓ך倯ָ㖇⦜涸ח㢳ְկ
    ׌ַ׵ֿ׉ծ ׃׏ַ׶ה鎘歗ׅ׷ץֹ׌կ
12. Standardize Your Code ؝٦سك٦أך垥彊⻉
13. “ — Nicolas Gallagher ו׸׌ֽ㢳ֻך➂ָ؝٦سك٦أח顀柃׃גְ׋ה׃ג׮ծ
    ➂ָ؝٦س׾剅ְ׋״ֲח剅ֻֿהկ
14. ➂꟦כծ
    ػة٦ٝ钠陎׾遤ֲךָ䖤䠐
15. ず䠐ך♳ךأة؎ٕ٥ٕ٦ٕ
16. Increase Performance ػؿؓ٦وٝأぢ♳
17. Reduce HTTP Request
18. 劤殢؟٦غדוך״ֲח
    $44ָㄎן⳿ׁ׸גְ׷ךַ
19. Minify + Concatenation, etc. Build Process
20. ؝٦سٖؽُ٦ך倯岀 How to Audit CSS
21. 䗰圓ִ Preparation
22. 倜׋ז؝٦س׾鷄⸇׃׋׶
    㢌刿׃׋׶׃זְկ
23. 剅ֹ鴥׿דְְךכ
    ؝ًٝزך׫կ
24. ًٝذشٝأ䚍ך넝ְ
    繟׃ְ؝٦سك٦أ׾
    䩛חⰅ׸׷ֿהկ
25. ׌ֽדכזֻծ
    ؝ٓنٖ٦ءّٝ׃װְׅ橆㞮׾
    䭯ג׷ֿהկ
26. غؚ׾䤄׿ד➂׾䤄ת׆
27. ر؍ؙٖزٔؿ؋؎ٕ圓鸡 (File System) Architecture
29. 㢌刿׾遤ֲֶהׅ׷ꥷחծ
    וךؿ؋؎ٕח鎸鶢ׅ׸ל
    ְְךַ
30. $44ָؿ؋؎ٕ׃ַזְ
31. ؝ًٝز׾ⵃ欽׃ג
    鎸鶢㜥䨽׾ⴓⶴ׃גֶֻկ
32. ؝٦سك٦أⰋ⡤ך䪾䳢 Inventory
34. StyleStats by Koji Ishimoto github.com/t32k/stylestats
35. CSS Dig by Tom Genoni github.com/tomgenoni/cssdig
36. Grep Your Styles TM
38. ؝٦سك٦أךؙؔٔذ؍ثؑحؙ Linting CSS
39. CSSLint by Nicole Sullivan github.com/CSSLint/csslint
40. csslint file1.css file2.css
41. Ⰻ⡤䠬׾䪾䳢ׅ׷׋׭ח
    -JOU׾遤ֲկ
42. ة؎هؚٓؿ؍ה葿 The Worst Offender: Typography and Color
43. Typography
44. Type-o-matic by Nicole Sullivan github.com/stubbornella/type-o-matic
46. ل٦آקוثؑحؙ׃גծ
    ػة٦ٝ׾䱱׷կ
47. CSS Colorguard by Alex Sexton github.com/SlexAxton/css-colorguard
48. CIEDE2000 algorithm
49. فٔؿ؍حؙأך鋅湫׃ You Might Not Need Those Prefix Anymore!
50. Autoprefixer by PostCSS github.com/postcss/autoprefixer
51. caniuse.com
52. 劢⢪欽הꅾ醱ך涪鋅 Find Unused / Duplicated
53. uCSS by Opera github.com/operasoftware/ucss
54. UnCSS by Giacomo Martino github.com/giakki/uncss
56. ؝٦سٖؽُ٦ך⾱⵱ Principle of Audit
57. The Design Principle رؠ؎ٝ⾱⵱
58. Simple is Beautiful
59. 荈ⴓָ剅ְ׋׮ךד׮ծ
    ׉ֲדזֻג׮ծ
    䝤ְ؝٦س׾嗚濼דֹ׷
    湡׾균ֲկ
60. Separation of Concerns ꟼ䗰ךⴓꨄ
61. “ — Wikipedia فؚٗٓي׾堣腉꬗חְֶג〳腉זꣲ׶ꅾ醱ָזְծ
    醱侧ך堣圓ח僇然חⴓⶴׅ׷ֿה׾ְֲկ
    ֿֿדְֲչꟼ䗰 ꟼ䗰✲ պהכծ
    فؚٗٓيך֮׷堣腉װ䮶׷莸ְծ湡涸ךֿהד֮׷կ
62. CSS HTML JavaScript
63. OOCSS
64. Separate Structure and Skin
65. Structure
66. Skin
67. Separate Container and Content
68. Same Module
69. Single Responsibility Principle ⽃♧顑⟣ך⾱⵱
70. “ — Robert C. Martin ؙٓأח㢌刿ָ饯ֿ׷椚歋כծ
    ♧אד֮׷ץֹկ
71. 䌢ח㢌⻉׾実׭׵׸׷$44ך
    顑⹡ח㼎׃ג׮㹋ꥷ⚺纏涸ז
    滠㖑挿׾鋅ְ׌׃װֻׅז׷կ
72. 2 㢌刿ך椚歋ָא֮׷㜥さծ
    ׉ךؙٓأכאחⴓⶴׅץֹկ
    אך㢌刿ָאךؙٓأח
    ת׋ָ׷ז׵ծ
    ׉ךؙٓأכאח窟さׅץֹկ
73. “ — Me ְְ ؙٓأせָ䙼ְאְ׋׵ծ
    ➬✲ךכ穄׻׏גְ׷կ
74. Principle of Least Knowledge 剑㼭濼陎ך⾱⵱
75. “ — Wikipedia ⟣䠐ךؔـآؙؑزָ荈ⴓ⟃㢩؟ـ؝ٝه٦طٝزろ׬ ך圓鸡װفٗػذ؍ח㼎׃ג䭯׏גְ׷⟎㹀׾
    剑㼭ꣲחׅץֹד֮׷կ
76. SMACSS by Jonathan Snook smacss.com
77. 2 1. Category 2. Depth of Applicability
78. #sidebar div { border: 1px solid #333; } #sidebar div h3 { margin-top: 5px; } #sidebar div ul { margin-bottom: 5px; }
79. 〳腉זꣲ׶)5.-ך圓鸡ח
    ⣛㶷׃זְ״ֲח鎸鶢ׅ׷կ
80. CSS Code Smells 䝤ְ؝٦سךחְֶ
81. Harry Roberts A.K.A CSS Wizardly
82. Code smells in CSS by Harry Roberts csswizardry.com/2012/11/code-smells-in-css
83. Code smells in CSS by Me article.enja.io/articles/code-smells-in-css.html
84. Undoing Styles أة؎ٕךٔإحز
85. ٕ٦ٕإحزכ䌢ח竰䪫ך׫׾遤ֲץֹדծ
    ⟃⵸ך׮ךח鷄⸇ׅ׷ץֹד֮׶ծ
    ٔإحز׾ׅ׷ץֹדכזְկ
86. Magic Numbers وآحؙشٝغ٦
87. وآحؙشٝغ٦הכծ椚歋׮זֻ չ⹛⡲ׅ׷ַ׵պהְֲ׌ֽד⢪׻׸גְ׷⦼կ
88. .site-nav { [ελΠϧ] } .site-nav > li:hover .dropdown { position: absolute; top: 37px; /*ϚδοΫφϯόʔ*/ left: 0; }
89. Qualified selectors ⵖꣲך䓼ְإؙٖة
90. ul.nav {...} a.button {...} div.header {...}
91. إؙٖةכ〳腉זꣲ׶剑㼭ꣲח姺׭׷ץֹկ
92. Documentation 椚䚍׾⥂א׋׭ך繎ꆙ湍
93. “ — The Boy Scout Rule 荈ⴓךְ׋㜥䨽כծ׉ֿ׾⳿ג遤ֻהֹծ
    勻׋儗״׶׮ֹ׸ְח׃זֽ׸לז׵זְկ
94. ؝٦سك٦أ׾椚鍑ׅ׷׋׭חծ
    سًُؗٝز׾剅ֻ״ֲחׅ׷կ
95. In Closing 穄׻׶ח
96. Bret Victor The Future of Programming @DBX Conference 2013
97. “ — Bret Victor The most dangerous thought you can have as a creative person is to think you know what you're doing.
98. 㼰׃׆אד׮滠㹋חկ
99. Thank You! Follow Me @ cssradar