私、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

browserl.ist で対象にするブラウザ、国別ブラウザシェアの情報取得し、その情報に基づきベンダープレフィックスを付与してくれます。

つぶやき
ぶっちゃけ今のブラウザならベンダープレフィックス無くても全然動くし。なんて思うぐらい平和ですけど、androidに初期搭載されているブラウザはIEよりもやっかいなのでは？

主にエディターとして上記を利用していると思いますが、CSSでエラー吐くことが無いので恐らく無秩序で世紀末なCSSを書いてると思うんですよね。

dottiyanen.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書いてる最中のよくわからない何かを書いた瞬間に警告でてくるのでありがたみ。

コード整形であればエディター標準搭載、あるいはエディターの整形プラグインがあります。
インデントを揃えることぐらいしかできませんでした。

前述のstylelintは設定ファイルを用意する必要があります。
その設定ファイルを参照して、コードを整形してくれます。
また、設定ファイルがなくてもstylefmtが独自に持つルールで整形してくれます。

これが↓

dottiyanen.css

body {
  padding: 1.0px;
  line-height: 0.8;
  margin: 0;
}

.dottiyanen {
    margin: 0px;
    padding: 1px;
    line-height: .8;
}

これになる↓

dottiyanen.css

body {
  padding: 1px;
  line-height: 0.8;
  margin: 0;
}

.dottiyanen {
  margin: 0;
  padding: 1px;
  line-height: 0.8;
}

つぶやき
これを手動でしてたら目がチカチカするし、疲れるし細かいしだるい。
でも、プロパティの順序も一貫性ほしい。
margin: 0;があちこちあるの気になる。

これ、きもちい。
最高です。

これが↓

dottiyanen.css

body {
  padding: 1px;
  line-height: 0.8;
  margin: 0;
}

.dottiyanen {
  margin: 0;
  padding: 1px;
  line-height: 0.8;
}

これになる↓

dottiyanen.css

body {
  margin: 0;
  padding: 1px;
  line-height: 0.8;
}

.dottiyanen {
  margin: 0;
  padding: 1px;
  line-height: 0.8;
}

各エディターよりPostCSS Sorting使えるプラグインはすでに配布されていますので興味ある方はご検討ください。

つぶやき
ありがとうPostCSS Sorting.こいつが居なかったらCSS書きたくない。

ろくなことつぶやかないtwitter: @codbe9i
7割privateなrepoで、ろくなものがないgithub: sr1994lu