Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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使って一発間にいれると幸せになれる気がします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした