きれいなCSSを書くためのTools

きれいなCSSを書くためのツールの紹介です。

Transcript

1. きれいなCSSを書くためのTools
   Meguro.css #1
   

   View Slide

2. @kou
   株式会社bitbank
   

   View Slide

3. 今日話すこと
   1. きれいなCSSとはなにか
   2. きれいなCSSを書くためのTools紹介
   

   View Slide

4. きれいなCSSとは
   

   View Slide

5. きれいなCSSとは
   1. コードの見た目が統一されている
   a. インデントや空行
   b. コメントの形式
   2. コードの書き方が統一されている
   a. 命名規則
   b. レイアウト手法
   c. 数値や単位
   

   View Slide

6. .wrapper{
   ul{
   margin: 0;
   padding: 0;
   li{
   margin-left: 10px;
   list-style-type: decimal;
   font-family: "Helvetica Neue";
   width: 400px;
   padding: 14px 0;
   text-align: center;
   display: block;
   border-radius: 5px;
   ol {
   color: #9a9A9a;
   padding-left: 0.5em;
   li {
   list-style-type: circle;
   }
   }
   }
   }
   .user-list {
   margin: 0;
   padding: 0;
   .user-list-item {
   border-radius: 5px;
   display: block;
   font-family: 'Helvetica Neue';
   list-style-type: decimal;
   margin-left: 10px;
   padding: 14px 0;
   text-align: center;
   width: 400px;
   }
   }
   .friend-list {
   color: #9a9a9a;
   padding-left: 5px;
   .friend-list-item {
   list-style-type: circle;
   }
   }
   

   View Slide

7. できるだけコードはきれいに書こう！
   1. 見通しの悪いコードはバグのもとになる
   2. 複雑なセレクタ条件などで書かれたコードは変更し辛い
   3. 書く時間よりも読む時間の方が圧倒的に長い
   

   View Slide

8. 現実は
   1. コードを書くのがエンジニアだけじゃない
   2. エンジニアの中でもコーディングのスキル差がある
   3. 手っ取り早くコピペで終わらす場合も多々ある
   4. 無駄な上書きや間違ったコードがあってもなんとなく動いてしまう
   

   View Slide

9. 自動的な整形、Lintツールが必要！
   

   View Slide

10. View Slide

11. CSScomb
    

    View Slide

12. CSScombがすること
    1. インデントの自動整形
    a. スペース/タブの統一
    b. コロンの後のスペース、セミコロン後の改行の有無など
    2. プロパティの並び替え
    a. アルファベット順、自分の指定した順番など
    3. ダブルクォーテーション/シングルクォーテーションの変換
    a. “Meiryo UI” to ‘Meiryo UI’
    4. などなど
    

    View Slide

13. {
    "always-semicolon": true,
    "block-indent": " ",
    "color-case": "lower",
    "color-shorthand": false,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": true,
    "quotes": "single",
    "remove-empty-rulesets": true,
    "space-after-colon": " ",
    "space-after-combinator": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": "\n",
    "space-before-closing-brace": "\n",
    "space-before-colon": "",
    "space-before-combinator": " ",
    "space-before-opening-brace": " ",
    "space-before-selector-delimiter": "",
    "strip-spaces": true,
    "unitless-zero": true,
    "vendor-prefix-align": false,
    "sort-order": [...]
    }
    const Comb = require('csscomb');
    gulp.task('csscomb', () => {
    const config = require('.csscomb.json');
    const comb = new Comb(config);
    return comb.processDirectory('src');
    });
    

    View Slide

14. .wrapper{
    ul{
    margin: 0;
    padding: 0;
    li{
    margin-left: 10px;
    list-style-type: decimal;
    font-family: "Helvetica Neue";
    width: 400px;
    padding: 14px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
    ol {
    color: #9a9A9a;
    padding-left: 0.5em;
    li {
    list-style-type: circle;
    }
    }
    }
    }
    .wrapper {
    ul {
    margin: 0;
    padding: 0;
    li {
    border-radius: 5px;
    display: block;
    font-family: 'Helvetica Neue';
    list-style-type: decimal;
    margin-left: 10px;
    padding: 14px 0;
    text-align: center;
    width: 400px;
    ol {
    color: #9a9a9a;
    padding-left: 0.5em;
    li {
    list-style-type: circle;
    }
    }
    }
    }
    }
    

    View Slide

15. Stylelint
    

    View Slide

16. Stylelintがすること
    1. インデント、コードスタイルの統一
    a. CSScombはあくまでプロパティの順番変更がメインの仕事
    b. CSScombだと空行の数などまでチェックできない
    c. CSScombよりも細かいコードスタイルをチェックできる
    2. 単位や色指定の方法を統一
    a. pxなどの単位で指定できるものを制限
    3. 自分のルールをプラグインとして作れる
    a. かなり自由に作れる
    b. セレクタの多重ネストを禁止する、名前の規則など
    

    View Slide

17. {
    "block-no-empty": true,
    "color-hex-case": "lower",
    "color-no-invalid-hex": true,
    "declaration-colon-space-after":"always",
    "indentation": 2,
    "length-zero-no-unit": true,
    "max-line-length": 140,
    "max-empty-lines": 1,
    "max-nesting-depth": 1,
    "no-eol-whitespace": true,
    "no-missing-end-of-source-newline": true,
    "number-leading-zero": "always",
    "number-no-trailing-zeros": true,
    "rule-empty-line-before": [
    "always",
    {
    "except": ["first-nested"],
    "ignore": ["after-comment"]
    }
    ],
    ...
    }
    stylelint 'src/**/*.scss' \
    --config stylelint-config.json \
    --syntax scss
    stylelint 'src/**/*.scss' \
    --config stylelint-config.json \
    --syntax scss \
    --fix
    

    View Slide

18. .wrapper {
    ul {
    margin: 0;
    padding: 0;
    li {
    border-radius: 5px;
    display: block;
    font-family: 'Helvetica Neue';
    list-style-type: decimal;
    margin-left: 10px;
    padding: 14px 0;
    text-align: center;
    width: 400px;
    ol {
    color: #9a9a9a;
    padding-left: 0.5em;
    li {
    list-style-type: circle;
    }
    }
    }
    }
    }
    .user-list {
    margin: 0;
    padding: 0;
    .user-list-item {
    border-radius: 5px;
    display: block;
    font-family: 'Helvetica Neue';
    list-style-type: decimal;
    margin-left: 10px;
    padding: 14px 0;
    text-align: center;
    width: 400px;
    }
    }
    .friend-list {
    color: #9a9a9a;
    padding-left: 5px;
    .friend-list-item {
    list-style-type: circle;
    }
    }
    

    View Slide

19. CSSComb & Stylelintを使うことで
    ● 雑に書いても、コードを自動的に修正してくれるので楽になる
    ● 誰が書いてもある程度規則的な、見通しのいいコードになる
    

    View Slide

20. さらに出来れば
    ● CIに統合して、レビュー負荷を下げる
    ● prettireがscssで使えるようになれば導入?
    

    View Slide

21. ありがとうございました！
    

    View Slide