Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

kou
June 16, 2018

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

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

kou

June 16, 2018
Tweet

More Decks by kou

Other Decks in Programming

Transcript

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

    アルファベット順、自分の指定した順番など 3. ダブルクォーテーション/シングルクォーテーションの変換 a. “Meiryo UI” to ‘Meiryo UI’ 4. などなど
  3. { "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'); });
  4. .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; } } } } }
  5. Stylelintがすること 1. インデント、コードスタイルの統一 a. CSScombはあくまでプロパティの順番変更がメインの仕事 b. CSScombだと空行の数などまでチェックできない c. CSScombよりも細かいコードスタイルをチェックできる 2.

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