43
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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でインストール

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

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

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

//npmjs.org/install.sh | sh

そして、確認

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?