私、web開発学科の３年生！プーチンが来日するからwikipedia見てたら、私とプーチンの誕生日一緒だったの。PostCSSで謎CSSからみんなを守りたい！ハイスクール・フリート第一巻、6月22日発売！
WARNING: 各所でつぶやきます。
What is PostCSS ?
端的にいうとPostCSS.parts にあるように、PostCSSというコアなツールを利用してCSSをアレコレするものです。
アレコレするとは言えども役に立たなければ何もないわけでありますが、
すでにこのPostCSSを使っている企業として Alibaba, facebook, GitHub, Google, WordPress, Wikipedia, JetBrains, 淘宝网 があります。
便利な何かがあることは期待できるでしょう。
HAL生で手に取りやすいもの以下4点の紹介です
-
Autoprefixer
-
stylelint
-
stylefmt
-
PostCSS Sorting
Autoprefixer
browserl.ist で対象にするブラウザ、国別ブラウザシェアの情報取得し、その情報に基づきベンダープレフィックスを付与してくれます。
つぶやき
ぶっちゃけ今のブラウザならベンダープレフィックス無くても全然動くし。なんて思うぐらい平和ですけど、androidに初期搭載されているブラウザはIEよりもやっかいなのでは？
stylelint
主にエディターとして上記を利用していると思いますが、CSSでエラー吐くことが無いので恐らく無秩序で世紀末なCSSを書いてると思うんですよね。
body {
margin: 0;
padding: 1.0px;
line-height: 0.8;
}
.dottiyanen {
margin: 0px;
padding: 1px;
line-height: .8;
}
このようなCSSファイルは脳トレとして、とても優秀なものであることは間違いありませんが、皆が脳トレ好きとは限りません。
stylelintはCSSコーディングにルールを与えて、ルール違反であれば警告メッセージを表示してくれるものです。
公式にdemoページあります
各エディターよりstylelint使えるプラグインはすでに配布されていますので興味ある方はご検討ください。
つぶやき
他人に「なんでこんなんなってんの？」って怒られるより遥か前、疲れてるときにCSS書いてる最中のよくわからない何かを書いた瞬間に警告でてくるのでありがたみ。
stylefmt
コード整形であればエディター標準搭載、あるいはエディターの整形プラグインがあります。
インデントを揃えることぐらいしかできませんでした。
前述のstylelintは設定ファイルを用意する必要があります。
その設定ファイルを参照して、コードを整形してくれます。
また、設定ファイルがなくてもstylefmtが独自に持つルールで整形してくれます。
これが↓
body {
padding: 1.0px;
line-height: 0.8;
margin: 0;
}
.dottiyanen {
margin: 0px;
padding: 1px;
line-height: .8;
}
これになる↓
body {
padding: 1px;
line-height: 0.8;
margin: 0;
}
.dottiyanen {
margin: 0;
padding: 1px;
line-height: 0.8;
}
つぶやき
これを手動でしてたら目がチカチカするし、疲れるし細かいしだるい。
でも、プロパティの順序も一貫性ほしい。
margin: 0;があちこちあるの気になる。
PostCSS Sorting
これ、きもちい。
最高です。
これが↓
body {
padding: 1px;
line-height: 0.8;
margin: 0;
}
.dottiyanen {
margin: 0;
padding: 1px;
line-height: 0.8;
}
これになる↓
body {
margin: 0;
padding: 1px;
line-height: 0.8;
}
.dottiyanen {
margin: 0;
padding: 1px;
line-height: 0.8;
}
各エディターよりPostCSS Sorting使えるプラグインはすでに配布されていますので興味ある方はご検討ください。
つぶやき
ありがとうPostCSS Sorting.こいつが居なかったらCSS書きたくない。
さんきゅーPostCSS
ろくなことつぶやかないtwitter: @codbe9i
7割privateなrepoで、ろくなものがないgithub: sr1994lu