CSSI: CSS Investigation

32f242f75b63e7174b493446de54a6b8?s=47 Yuya Saito
November 08, 2014

CSSI: CSS Investigation

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

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

November 08, 2014
Tweet

Transcript

  1. CSSI: CSS Investigation CSS؝٦سٖؽُ٦ך➬倯侄ִתׅ by Yuya Saito @ Rich Media

    2014.11.08 #cssؔآ؟ٝ
  2. Yuya Saito UX Engineer @ RichMedia

  3. None
  4. Benefits of an Audit ؝٦سٖؽُ٦ךⵃ挿

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

  6. #perfmatters

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

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

  9. None
  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

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

  30. $44ָؿ؋؎ٕ׃ַזְ

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

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

  33. None
  34. StyleStats by Koji Ishimoto github.com/t32k/stylestats

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

  36. Grep Your Styles TM

  37. None
  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

  45. None
  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

  55. None
  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