科目記号: SDを始める前に知っておきたかったCSSについて、お気持ち表明

![ppp.jpg](https://qiita-image-store.s3.amazonaws.com/0/115845/ad8cd85e-9e37-c729-2c16-f9aa96a881dc.jpeg)

私、web開発学科の３年生！プーチンが来日するからwikipedia見てたら、私とプーチンの誕生日一緒だったの。PostCSSで謎CSSからみんなを守りたい！ハイスクール・フリート第一巻、6月22日発売！

~~WARNING: 各所でつぶやきます。~~

# What is PostCSS ?

![postcss.jpg](https://qiita-image-store.s3.amazonaws.com/0/115845/e8b7e927-b8fa-92eb-3114-6b885954950b.jpeg)

端的にいうと[PostCSS.parts](//postcss.parts) にあるように、PostCSSというコアなツールを利用してCSSをアレコレするものです。

アレコレするとは言えども役に立たなければ何もないわけでありますが、
すでにこのPostCSSを使っている企業として [Alibaba](//www.alibaba.com), facebook, GitHub, Google, WordPress, Wikipedia, [JetBrains](//www.jetbrains.com), [淘宝网](//world.taobao.com) があります。

便利な何かがあることは期待できるでしょう。

HAL生で手に取りやすいもの以下4点の紹介です

- __Autoprefixer__

- __stylelint__

- __stylefmt__

- __PostCSS Sorting__

## __Autoprefixer__

![687474703a2f2f706f73746373732e6769746875622e696f2f6175746f70726566697865722f6c6f676f2e737667.jpg](https://qiita-image-store.s3.amazonaws.com/0/115845/b87de245-fb4e-c2e3-ce02-de144cca3bbc.jpeg)


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


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

## __stylelint__

![2016-12-03_19-04-51.jpg](https://qiita-image-store.s3.amazonaws.com/0/115845/ac53053d-427e-4f60-92b6-89cfb28f9739.jpeg)

- [Atom](//atom.io)

- [Sublime Text](//www.sublimetext.com)

- [Visual Studio Code](//code.visualstudio.com)

主にエディターとして上記を利用していると思いますが、CSSでエラー吐くことが無いので恐らく無秩序で世紀末な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.io/demo)あります

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


*つぶやき*
他人に「なんでこんなんなってんの？」って怒られるより遥か前、疲れてるときにCSS書いてる最中のよくわからない何かを書いた瞬間に警告でてくるのでありがたみ。

## __stylefmt__

![687474703a2f2f6d6f7269736869747465722e6769746875622e696f2f7374796c65666d742d6c6f676f2e737667.jpg](https://qiita-image-store.s3.amazonaws.com/0/115845/0b264e7e-6bf9-049a-c836-be814e1c50a4.jpeg)

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

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


これが↓

```css:dottiyanen.css
body {
  padding: 1.0px;
  line-height: 0.8;
  margin: 0;
}

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

これになる↓

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

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

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

## __PostCSS Sorting__

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

これが↓

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

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

これになる↓

```css: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書きたくない。


# さんきゅーPostCSS

ろくなことつぶやかないtwitter: [@codbe9i](//twitter.com/codbe9i)
7割privateなrepoで、ろくなものがないgithub: [sr1994lu](//github.com/sr1994lu)