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

Transcript

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

2. @kou 株式会社bitbank

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

4. きれいなCSSとは

5. きれいなCSSとは 1. コードの見た目が統一されている a. インデントや空行 b. コメントの形式 2. コードの書き方が統一されている a.

   命名規則 b. レイアウト手法 c. 数値や単位

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; } }

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

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

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

10. None

11. CSScomb

12. CSScombがすること 1. インデントの自動整形 a. スペース/タブの統一 b. コロンの後のスペース、セミコロン後の改行の有無など 2. プロパティの並び替え a.

    アルファベット順、自分の指定した順番など 3. ダブルクォーテーション/シングルクォーテーションの変換 a. “Meiryo UI” to ‘Meiryo UI’ 4. などなど

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'); });

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; } } } } }

15. Stylelint

16. Stylelintがすること 1. インデント、コードスタイルの統一 a. CSScombはあくまでプロパティの順番変更がメインの仕事 b. CSScombだと空行の数などまでチェックできない c. CSScombよりも細かいコードスタイルをチェックできる 2.

    単位や色指定の方法を統一 a. pxなどの単位で指定できるものを制限 3. 自分のルールをプラグインとして作れる a. かなり自由に作れる b. セレクタの多重ネストを禁止する、名前の規則など

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

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; } }

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

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

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