Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
きれいなCSSを書くためのTools
kou
June 16, 2018
Programming
0
310
きれいなCSSを書くためのTools
きれいなCSSを書くためのツールの紹介です。
kou
June 16, 2018
Tweet
Share
More Decks by kou
See All by kou
Angular Webアプリケーションの最新設計手法.pdf
koumatsumot0
7
9k
NgRx v7
koumatsumot0
1
400
NgRxについて考えたこと
koumatsumot0
0
180
AngularアプリケーションにおけるCSS設計手法
koumatsumot0
8
4.4k
Other Decks in Programming
See All in Programming
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
120
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
2
270
僕が考えた超最強のKMMアプリの作り方
spbaya0141
0
170
Enumを自動で網羅的にテストしてみた
estie
0
1.2k
あなたと 「|」 したい・・・
track3jyo
PRO
2
1k
Rallyで支えるバージョン追従
pakio
0
180
低レイヤーから始める GUI
fadis
18
9.1k
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
150
dbtでアトリビューション分析
hiro_koba_jp
0
140
新卒2年目がデータ分析API開発に挑戦【Stapy#88】/data-science-api-begginer
matsuik
0
330
はてなリモートインターンシップ2022 インフラ 講義資料
hatena
4
2.1k
Ruby Pattern Matching
bkuhlmann
0
600
Featured
See All Featured
The Invisible Customer
myddelton
113
12k
A Tale of Four Properties
chriscoyier
149
21k
The Pragmatic Product Professional
lauravandoore
21
3.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.5k
What’s in a name? Adding method to the madness
productmarketing
12
1.9k
Atom: Resistance is Futile
akmur
256
24k
Bash Introduction
62gerente
601
210k
Documentation Writing (for coders)
carmenintech
51
2.9k
Music & Morning Musume
bryan
36
4.6k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
Transcript
きれいなCSSを書くためのTools Meguro.css #1
@kou 株式会社bitbank
今日話すこと 1. きれいなCSSとはなにか 2. きれいなCSSを書くためのTools紹介
きれいなCSSとは
きれいなCSSとは 1. コードの見た目が統一されている a. インデントや空行 b. コメントの形式 2. コードの書き方が統一されている a.
命名規則 b. レイアウト手法 c. 数値や単位
.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; } }
できるだけコードはきれいに書こう! 1. 見通しの悪いコードはバグのもとになる 2. 複雑なセレクタ条件などで書かれたコードは変更し辛い 3. 書く時間よりも読む時間の方が圧倒的に長い
現実は 1. コードを書くのがエンジニアだけじゃない 2. エンジニアの中でもコーディングのスキル差がある 3. 手っ取り早くコピペで終わらす場合も多々ある 4. 無駄な上書きや間違ったコードがあってもなんとなく動いてしまう
自動的な整形、Lintツールが必要!
None
CSScomb
CSScombがすること 1. インデントの自動整形 a. スペース/タブの統一 b. コロンの後のスペース、セミコロン後の改行の有無など 2. プロパティの並び替え a.
アルファベット順、自分の指定した順番など 3. ダブルクォーテーション/シングルクォーテーションの変換 a. “Meiryo UI” to ‘Meiryo UI’ 4. などなど
{ "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'); });
.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; } } } } }
Stylelint
Stylelintがすること 1. インデント、コードスタイルの統一 a. CSScombはあくまでプロパティの順番変更がメインの仕事 b. CSScombだと空行の数などまでチェックできない c. CSScombよりも細かいコードスタイルをチェックできる 2.
単位や色指定の方法を統一 a. pxなどの単位で指定できるものを制限 3. 自分のルールをプラグインとして作れる a. かなり自由に作れる b. セレクタの多重ネストを禁止する、名前の規則など
{ "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
.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; } }
CSSComb & Stylelintを使うことで • 雑に書いても、コードを自動的に修正してくれるので楽になる • 誰が書いてもある程度規則的な、見通しのいいコードになる
さらに出来れば • CIに統合して、レビュー負荷を下げる • prettireがscssで使えるようになれば導入?
ありがとうございました!