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

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

kou
June 16, 2018

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

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

kou

June 16, 2018
Tweet

More Decks by kou

Other Decks in Programming

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