$30 off During Our Annual Pro Sale. View Details »

CSSI: CSS Investigation

Yuya Saito
November 08, 2014

CSSI: CSS Investigation

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

Yuya Saito

November 08, 2014
Tweet

More Decks by Yuya Saito

Other Decks in Programming

Transcript

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

    View Slide

  2. Yuya Saito
    UX Engineer @ RichMedia

    View Slide

  3. View Slide

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

    View Slide

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

    View Slide

  6. #perfmatters

    View Slide

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

    View Slide

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

    View Slide

  9. View Slide

  10. Document
    Document
    Document

    View Slide


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

    View Slide

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

    View Slide


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

    View Slide

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

    View Slide

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

    View Slide

  16. Increase Performance
    ػؿؓ٦وٝأぢ♳

    View Slide

  17. Reduce HTTP Request

    View Slide

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

    View Slide

  19. Minify +
    Concatenation, etc.
    Build Process

    View Slide

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

    View Slide

  21. 䗰圓ִ
    Preparation

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. غؚ׾䤄׿ד➂׾䤄ת׆

    View Slide

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

    View Slide

  28. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. View Slide

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

    View Slide

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

    View Slide

  36. Grep Your Styles TM

    View Slide

  37. View Slide

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

    View Slide

  39. CSSLint
    by Nicole Sullivan
    github.com/CSSLint/csslint

    View Slide

  40. csslint file1.css file2.css

    View Slide

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

    View Slide

  42. ة؎هؚٓؿ؍ה葿
    The Worst Offender:
    Typography and Color

    View Slide

  43. Typography

    View Slide

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

    View Slide

  45. View Slide

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

    View Slide

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

    View Slide

  48. CIEDE2000 algorithm

    View Slide

  49. فٔؿ؍حؙأך鋅湫׃
    You Might Not Need
    Those Prefix Anymore!

    View Slide

  50. Autoprefixer
    by PostCSS
    github.com/postcss/autoprefixer

    View Slide

  51. caniuse.com

    View Slide

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

    View Slide

  53. uCSS
    by Opera
    github.com/operasoftware/ucss

    View Slide

  54. UnCSS
    by Giacomo Martino
    github.com/giakki/uncss

    View Slide

  55. View Slide

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

    View Slide

  57. The Design Principle
    رؠ؎ٝ⾱⵱

    View Slide

  58. Simple is Beautiful

    View Slide

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

    View Slide

  60. Separation of Concerns
    ꟼ䗰ךⴓꨄ

    View Slide


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

    View Slide

  62. CSS
    HTML
    JavaScript

    View Slide

  63. OOCSS

    View Slide

  64. Separate Structure and Skin

    View Slide

  65. Structure

    View Slide

  66. Skin

    View Slide

  67. Separate Container and Content

    View Slide

  68. Same Module

    View Slide

  69. Single Responsibility
    Principle
    ⽃♧顑⟣ך⾱⵱

    View Slide


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

    View Slide

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

    View Slide

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

    View Slide


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

    View Slide

  74. Principle of
    Least Knowledge
    剑㼭濼陎ך⾱⵱

    View Slide


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

    View Slide

  76. SMACSS
    by Jonathan Snook
    smacss.com

    View Slide

  77. 2
    1. Category
    2. Depth of Applicability

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  81. Harry Roberts
    A.K.A CSS Wizardly

    View Slide

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

    View Slide

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

    View Slide

  84. Undoing Styles
    أة؎ٕךٔإحز

    View Slide

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

    View Slide

  86. Magic Numbers
    وآحؙشٝغ٦

    View Slide

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

    View Slide

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

    View Slide

  89. Qualified selectors
    ⵖꣲך䓼ְإؙٖة

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide


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

    View Slide

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

    View Slide

  95. In Closing
    穄׻׶ח

    View Slide

  96. Bret Victor
    The Future of Programming
    @DBX Conference 2013

    View Slide


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

    View Slide

  98. 㼰׃׆אד׮滠㹋חկ

    View Slide

  99. Thank You!
    Follow Me @ cssradar

    View Slide