LoginSignup
43
44

More than 5 years have passed since last update.

UnCSSの使い方〜効いてないCSSをサクッと綺麗にする方法〜

Posted at

UnCSSの使い方

UnCSS?うわぁ〜っと全力徹夜でCSSを書きマークアップは力づくで終えたが...
無駄な記述があったり、bootstrapとか色々いっぱい入ってるモノを使う物だけにスッキリしたい時に
使うと、効いてないCSSをザクッと消して綺麗にしてくれます。

1.環境構築
2.UnCSSの使い方
3.まとめ

環境構築

node.jsインストール済みなか方は次へ

node.jsをhomebrewでインストール

$ brew install node

インストール出来たかチェック

$ node -v

npmインストール済みなか方は次へ

npmとは、Node.js向けパッケージ管理ツールです。
Node.jsインストール時に同時にインストールされますが
昔はされませんでしたので

$ npm -v

でチェックして入ってない場合は
npmをcurl経由でインストール

$ curl http://npmjs.org/install.sh | sh

そして、確認

$ npm -v

UnCSSをインストール

$ nmp install -g uncss

UnCSSを使う

$ uncss チェックしたいhtmlのアドレス or ファイルのアドレス > 吐き出し先file名.css

使ってないCSSをガサッと消してスッキリしたCSSを吐き出してくれる。

uncssでは色々オプションんも用意されています。
オプションに関してはgithubのuncssレポジトリをチェック。

まとめ

テストで、htmlの方に記述のない要素をCSSに追記して
動作を確認してみたが、綺麗に削除してくれました。

githubのレポジトリにも書いてありましたがgrunt用やgulp用のuncssもあったので
SASSやLESSな人もgunt使って一発間にいれると幸せになれる気がします。

43
44
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
43
44