CSSコーディングを効率よくするおすすめプラグイン

CSSコーディングを効率よくする
おすすめプラグイン @Grunt
14年3月15日土曜日

自己紹介
2
田村章吾
屋号：ましじめ
フリーのマークアップエンジニア
山登りしてます。
ブログ書いてます。
http://tamshow.com/

自己紹介
3
田村章吾
屋号：ましじめ
フリーのマークアップエンジニア
山登りしてます。
ブログ書いてます。
http://tamshow.com/
水族館のサイトを作りたいです。

4
最近のCSSは複雑

5
最近どうやってCSS書いていますか？

6
プリプロセッサー

7

8

9
ポストプロセッサー

10
Minify

11
CSS LINT
Minify

12
CSS LINT
Autopreﬁxer
Minify

13
CSS LINT
Autopreﬁxer
MediaQueries
Minify

14
CSS LINT
Autopreﬁxer
MediaQueries
Minify
pngquant

15
CSS LINT
Autopreﬁxer
MediaQueries
Minify
pngquant
最近のCSSコーディングは
する事がいっぱい。

16
CSS LINT
Autopreﬁxer
MediaQueries
Minify
pngquant
面倒な作業は自動化しましょう

17
CSS LINT
Autopreﬁxer
MediaQueries
Minify
pngquant
Grunt

18
CSS LINT
Autopreﬁxer
MediaQueries
Minify
pngquant

19
プラグイン
おすすめプラグイン紹介

20
・CSSのスタイルガイドを作る
grunt-styleguide
１つ目！

21
http://jacobrask.github.io/styledocco/
Style Docco
サイトごとにスタイルガイドが作成出来る
grunt-styleguide

22
http://jacobrask.github.io/styledocco/
Style Docco
サイトごとにスタイルガイドが作成出来る
grunt-styleguide
Node.jsを使った、
スタイルガイドジェネレーター

23
grunt-styleguide

24
grunt-styleguide
CSSにマークダウンでコメントを記述

25
grunt-styleguide
コマンドを叩けばOK

26
grunt-styleguide
styledocco -n "Style Guide" css/style.css

27
grunt-styleguide

28
grunt-styleguide
でも、修正の度に作るのは
面倒くさいなぁ…（´・ω・｀）

29
grunt-styleguide
grunt-styleguide

30
grunt-styleguide
CSSを修正するだけで勝手に作成

31
grunt-styleguide

32
grunt-styleguide
こんな使い方してます

33
grunt-styleguide

34
grunt-styleguide
HTMLがちょっと分かる人は
更新してくれる (・∀・)♪

35
grunt-styleguide
あら、素敵！

36
・CSSファイル内のMediaQueriesをまとめる
grunt-combine-media-queries
２つ目！

37
・CSSファイル内のMediaQueriesをまとめる
メディアクエリの管理って面倒

38
パーツ単位で記述する

39
・@mediaを書く場所が近いので
何を書いたかすぐ分かる
・関連する箇所の修正が楽
・@mediaの記述が増える
・ファイルサイズを圧迫
いいところ (・∀・)♪
わるいところ (´；ω；｀)ﾌﾞﾜｯ

40
・@mediaを書く場所が近いので
何を書いたかすぐ分かる
・関連する箇所の修正が楽
・@mediaの記述が増える
・ファイルサイズを圧迫
管理しやすいけど、無駄がある

41
メディアクエリ単位で記述する

42
・1つのブレークポイントに対して@mediaが
1つなのでソースコードに無駄が少ない
・修正するときは@mediaの箇所を
行ったり来たりするので面倒
・何を書いたかわかりにくい

43
無駄は少ないけど管理しにくい

44
管理しやすく、無駄を無くしたい！

45

46
dev/layout.css（作業） css/layout.css（公開）

47
❶
❷ ❶
❷❶
❷

48
❶
❷ ❶
❷❶
❷
あら、素敵！

49
・ベンダープレフィックスを調整する
grunt-autopreﬁxer
３つ目！

50
grunt-autopreﬁxer

51
grunt-autopreﬁxer
Can I use...

52
grunt-autopreﬁxer
Can I use...
あ、-webkit-ってもう要らないの…
（´・ω・｀）

53
grunt-autopreﬁxer
Can I use...
Compass使ってるから大丈夫さ

54
grunt-autopreﬁxer
@include border-radius(5px);

55
grunt-autopreﬁxer

56
grunt-autopreﬁxer
あ…（´・ω・｀）

57
grunt-autopreﬁxer

58
grunt-autopreﬁxer
付けたり、消したり、面倒！

59
grunt-autopreﬁxer
grunt-autopreﬁxer

60
grunt-autopreﬁxer
Can I use...を基準に、ベンダープレフィックスを調整してくれる

61
grunt-autopreﬁxer

62
grunt-autopreﬁxer
あら、素敵！

63
その他
公開用のCSSを圧縮する
grunt-contrib-cssmin
grunt-contrib-concat
CSSの重複をチェックする
grunt-csscss
CSSLintをする
grunt-contrib-csslint
圧縮後のCSSにコメントを追加する

64
その他
grunt-csscss
CSSLintをする

65
その他
grunt-csscss
CSSLintをする

66
その他
grunt-csscss
CSSLintをする

67
その他
grunt-csscss
CSSLintをする

68
その他
修正した日を更新したり、その他テキストの置換をする
grunt-text-replace
Sassをコンパイルする
grunt-contrib-sass
Sassファイルの変更を監視する
grunt-contrib-watch
画像の圧縮をする
grunt-contrib-imagemin

69
その他
grunt-text-replace
grunt-contrib-sass
grunt-contrib-watch

70
その他
grunt-text-replace
grunt-contrib-sass
grunt-contrib-watch

71
その他
grunt-text-replace
grunt-contrib-sass
grunt-contrib-watch

72
その他
grunt-text-replace
grunt-contrib-sass
grunt-contrib-watch

73
その他
とっても便利！

ありがとうございました。

CSSコーディングを効率よくするおすすめプラグイン

More Related Content

Viewers also liked (20)

CSSコーディングを効率よくするおすすめプラグイン