概要
PostCSSって何がすごいの？を初心者目線から解説していきます。
対象者
- CSSの知識がある
- PostCSSに興味がある方
##PostCSSとは
CSSプリプロセッサを使えば、すばやく、そして、楽にCSSコーディングが行える上、
メンテナンス性の高いCSSを設計することができます。
主にどのようなことができるかというと…
- 変数が使える
- 入れ子にできる
- 頻繁に使用する記述を使いまわせる
- プログラミング言語のように関数を定義できる
などなどメリットがたくさん。有名なところだとSass、Less、Stylusなどがあります。
今回はその中でもPostCSSに注目していきます。
###PostCSSとは
PostCSSとはAutoprefixerの生みの親であるロシアのAndrey Sitnik氏が開発したCSSプリプロセッサです。
変数やmixin、ネスト、次世代CSS等が使用でき、JavaScript製のプラグインでブラウザが認識できるCSSに変換します。
必要な機能の分だけプラグインをインストールして使えるため、他のCSSプリプロセッサよりも処理速度が早いことが特徴です。
プラグインの数は約200以上あるそうです。
Sassなどがパッケージ化されたノートPCだと例えると、PostCSSは自分仕様に色々とカスタマイズ可能なPCといえます。
###PostCSSの定番プラグイン
- autoprefixer
AutoprefixerはPostCSSのプラグインとして最も有名なものだと思います。
Can I Use のデータを利用し、サポートブラウザを指定することで、必要なベンダープリフィックスを自動で付与するツールです。
ベンダープリフィックス
.example {
display: flex;
user-select: none;
-webkit-border-radius: 3px;
border-radius: 3px;
}
↓
.example {
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 3px;
}
-
cssnano
CSSを圧縮してくれるプラグイン。 -
precss（プレックス、prefixed cssの略語。）
CSS内でSassのような文法が使える。 -
postcss-assets
画像などのアセットを管理できるプラグイン。
画像サイズを取ってきたり、インラインしてくれたりする。 -
stylelint
CSSのモダンlinterのプラグイン。
140ものルールに基づいたCSSのエラーをレポートします。
エラー内容解説
stylelintルール一覧
###PostCSSのメリット
- 他のプリプロセッサよりも処理速度が早い
- autoprefixerが使えること
- ネスト記述で記述量が少なく済む
.btn {
display: block;
padding: 10px;
margin-bottom: 5px;
span {
font-size: 1.2rem;
}
}
↓
.btn {
display: block;
padding: 10px;
margin-bottom: 5px;
}
.btn span {
font-size: 1.2rem;
}
ネストで書くことによって毎回.btnを先頭につける必要がなくなります。
大規模サイトだと作業効率も影響しますし、何よりグルーピングされて可読性が高くなるのもうれしいポイントです。
- 変数が使える
$main-color: #444;
.text {
color: $main-color
}
↓
.text {
color: #444;
}
このように基本的に変わらないような色や数値を変数として設定して呼び出すことができます。
後で修正が入った場合でも一括で修正が行えてとても便利です。
- 1つのファイルにまとめることができる
各パーツごとにファイルを作成し、@import を使って最終的に
複数のCSSファイルを読み込み１つのファイルとして出力することができます。
2. PostCSSの主な書き方
1. 変数として扱う
postcss-custom-propertiesをインストールすると、
変数定義ができるようになります。
下記の通り、:root内で定義可能です。
:root {
--mainColor: #59bb0c;
}
.Logo {
fill: var(--mainColor);
}
2. ネストでCSSを記述する
postcss-nestedをインストールすると、
ネストでの記述が可能になります。
.footer {
background-color: #fff;
text-align: center;
padding: 40px 0;
.logo {
width: 25px;
margin: 0 auto;
}
.footer-text {
font-size: 12px;
font-weight: normal;
a {
text-decoration: underline;
}
}
.copyright-text {
font-size: 12px;
font-weight: normal;
}
}
3. CSSファイルを複数に分割
postcss-importをインストールすると、
冗長なCSSファイルを複数に分割し
それぞれ読み込むことができるようになります。
@import "./base/_root.css";
@import "./base/_breakpoints.css";
@import "./base/_fonts.css";
@import "./base/_reset.css";
さいごに
Sassや他のCSSプリプロセッサを使った経験がある方なら少ない学習コストで挑戦できるのではないかなと思います。
どのCSSプリプロセッサを使おうかなと迷っている方は、ぜひPostCSSの導入をおすすめします。
またCSS経験者が初めて導入する際は、環境構築が大きなネックになってきますが
次回以降はPostCSS導入にあたっての環境構築の手順なども合わせて書いていきたいと思います。