CSSの記述を高速化する、Emmet (Zen-Coding)

Emmetは、Zen-Codingの次期バージョンの名前です。
Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。
私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。

Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの記述がより使いやすくなったので、紹介します。

Zen-Codingから使える

CSSの展開は、ほとんどのZen-Codingから使えます。
Emmetではさらに使いやすくなりましたが、Emmetは現在開発中のため、不安定な部分があります。不安な方は、Zen-Codingをおすすめします。
プロパティに、ショートコードが用意されており、+でつないで展開(Expand Abbreviation)する形になります。

h1 {
  fl:l+d:i+c /* ひとつ、ひとつ展開 */
}
nav {
  cl:l+ov:h+bg+ /* ひとつ、ひとつ展開 */
}

展開後

h1 {
  float: left;
  display: inline;
  color: #000;
}
nav {
  clear: left;
  overflow: hidden;
  background: #fff url() 0 0 no-repeat;
}
d:i
display: inline;
ov:h
overflow: hidden;
bg+
background: #fff url() 0 0 no-repeat;

基本的なプロパティの入力は、長いものもありますが、1～3文字程度。
入力する量が圧倒的に減るので、ショートコードを覚えれば記述スピードが速くなります。

CSSのショートコード

Zen-Codingの次期バージョンEmmetで、使用できるCSSのショートコードは470以上用意されています。
これだけ多いと、丸暗記は難しいので、よく使いそうなものをピックアップします。

Emmetで、使用できるCSSのショートコードは500以上用意されています。
これだけ多いと丸暗記は難しいです。

基本

d
display: ;
w
width: ;
h
height: ;
m
margin: ;
p
padding: ;
ta
text-align: ;
fl
float: ;
cl
clear: ;
bg
background: ;
bd
border: ;
f
font: ;
fw
font-weight: ;
fz
font-size: ;
c
color: ;
pos
position: ;
t
top: ;
r
right: ;
b
bottom: ;
l
left: ;

margin-topや、border-colorなどを使いたい場合は、以下のようになります。

mt
margin-top: ;
mb
margin-bottom: ;
pl
padding-left: ;
bdl
border-left: ;
bdb
border-bottom: ;
bdc
border-color: ;
bgi
background-image: url();

また、数値以外の値を入れるプロパティは、:(コロン)で区切る方法や、 +(プラス)を使用する方法もあります。

:(コロン)で区切って、決められた文字を入力すると、autoやinline-blockなどの値も簡単に出せます。
また+(プラス)はプロパティごとをつなげる意味もありますが、backgroundやborderで使用すると、省略形で値を出すことができます。

:(コロン)

m:a
margin: auto;
d:i
display: inline;
d:b
display: block;
d:ib
display: inline-block;
fl:l
float: left;
fl:r
float: right;
cl:l
clear: left;
cl:r
clear: right;
cl:b
clear: both;
ta:l
text-align: left;
ta:c
text-align: center;
fw:n
font-weight: normal;
fw:b
font-weight: bold;
pos:r
position: relative;
pos:a
position: absolute;

+(プラス)

bg+
background:#FFF url() 0 0 no-repeat;
bd+
border: 1px solid #000;
bdl+
border-left: 1px solid #000;
bdb+
border-bottom: 1px solid #000;
f+
font: 1em Arial,sans-serif;

以下は、Emmetから採用された記述方法です。

m10
margin: 10px;
m10-5-0
margin: 10px 5px 0;
m-10--5
margin: -10px -5px;
m10-auto
margin: 10px auto;
w100p
width: 100%;
h50e
height: 50em;
(bg+)+c
background: #FFF url() 0 0 no-repeat;
color: #000;

プロパティのショートコードの後ろに、数値を設定することで、その数値をpxの単位をつけて展開してくれます。
px以外の単位を付けたい場合は、10pや10eを指定することによって、それぞれ%、emの単位で展開されます。
なお、小数点で数値を設定した場合は、自動的にemに変換されます。

プロパティのショートコードやルールが複雑に見えますが、使ってみると単純です。
1サイトをEmmetかZen-Codingで制作してみると、覚えられると思います。

よく使いそうな一覧

全てではありませんが、先ほど紹介したものも含めて、よく使いそうなショートコードをピックアップしました。
Emmetのショートコードなので、Zen-Codingでは一部使用できないものもあります。

@ Rules

@i
@import url();
@m
@media print {
}
@f
@font-face {
font-family:;
src:url();
}

Box

d
display: ;
d:n
display:none;
d:b
display:block;
d:i
display:inline;
d:ib
display:inline-block;
d:li
display:list-item;
d:tb
display:table;
d:tbclg
display:table-column-group;
d:tbhg
display:table-header-group;
d:tbfg
display:table-footer-group;
d:tbr
display:table-row;
d:tbrg
display:table-row-group;
d:tbc
display:table-cell;
w
width: ;
maw
max-width: ;
maw:n
max-width:none;
miw
min-width: ;
h
height: ;
mah
max-height: ;
mah:n
max-height:none;
mih
min-height: ;
bxz
box-sizing: ;
bxz:cb
box-sizing:content-box;
bxz:bb
box-sizing:border-box;
m
margin: ;
mt
margin-top: ;
mr
margin-right: ;
mb
margin-bottom: ;
ml
margin-left: ;
p
padding: ;
pt
padding-top: ;
pr
padding-right: ;
pb
padding-bottom: ;
pl
padding-left: ;
fl
float: ;
fl:n
float:none;
fl:l
float:left;
fl:r
float:right;
cl
clear: ;
cl:n
clear:none;
cl:l
clear:left;
cl:r
clear:right;
cl:b
clear:both;
pos
position: ;
pos:s
position:static;
pos:a
position:absolute;
pos:r
position:relative;
pos:f
position:fixed;
t
top: ;
r
right: ;
b
bottom: ;
l
left: ;
z
z-index: ;
v
visibility: ;
v:v
visibility:visible;
v:h
visibility:hidden;
ov
overflow: ;
ov:v
overflow:visible;
ov:h
overflow:hidden;
ov:s
overflow:scroll;
ov:a
overflow:auto;
ovx
overflow-x: ;
ovx:v
overflow-x:visible;
ovx:h
overflow-x:hidden;
ovx:s
overflow-x:scroll;
ovx:a
overflow-x:auto;
ovy
overflow-y: ;
ovy:v
overflow-y:visible;
ovy:h
overflow-y:hidden;
ovy:s
overflow-y:scroll;
ovy:a
overflow-y:auto;
zoo
zoom:1;

Border

bd
border: ;
bd+
border: 1px solid #000;
bd:n
border:none;
bdc
border-color: #000;
bds
border-style: ;
bds:n
border-style:none;
bds:dt
border-style:dotted;
bds:ds
border-style:dashed;
bds:s
border-style:solid;
bdw
border-width: ;
bdcl:c
border-collapse:collapse;
bdcl:s
border-collapse:separate;
bdrs
border-radius: ;
bdi
border-image:url( );

Background

bg
background: ;
bg+
background: #fff url() 0 0 no-repeat;
bg:n
background:none;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=x.png',sizingMethod='crop');
bgc
background-color: #fff;
bgi
background-image:url( );
bgi:n
background-image:none;
bgr
background-repeat: ;
bgr:n
background-repeat:no-repeat;
bgr:x
background-repeat:repeat-x;
bgr:y
background-repeat:repeat-y;
bga
background-attachment: ;
bga:f
background-attachment:fixed;
bga:s
background-attachment:scroll;
bgp
background-position: 0 0;
bgz
background-size: ;
bgz:a
background-size:auto;
bgz:ct
background-size:contain;
bgz:cv
background-size:cover;

Content Type

ct
content: ;
ct:a
content:attr( );
ct:c
content:counter( );
ct:cs
content:counters( );
lis
list-style: ;
lis:n
list-style:none;
lisp
list-style-position: ;
lisp:i
list-style-position:inside;
lisp:o
list-style-position:outside;
list
list-style-type: ;
list:n
list-style-type:none;
list:d
list-style-type:disc;
list:c
list-style-type:circle;
list:s
list-style-type:square;
list:dc
list-style-type:decimal;
list:dclz
list-style-type:decimal-leading-zero;
list:lr
list-style-type:lower-roman;
list:ur
list-style-type:upper-roman;
lisi
list-style-image: ;
lisi:n
list-style-image:none;

Text

ta
text-align: ;
ta:l
text-align:left;
ta:c
text-align:center;
ta:r
text-align:right;
va
vertical-align: ;
va:t
vertical-align:top;
va:m
vertical-align:middle;
va:bl
vertical-align:baseline;
va:b
vertical-align:bottom;
td
text-decoration: ;
td:n
text-decoration:none;
td:u
text-decoration:underline;
td:o
text-decoration:overline;
td:l
text-decoration:line-through;
ti
text-indent: ;
ti:-
text-indent:-9999px;
lh
line-height: ;
lts
letter-spacing: ;
f
font: ;
f+
font: 1em Arial,sans-serif;
fw
font-weight: ;
fw:n
font-weight:normal;
fw:b
font-weight:bold;
fw:br
font-weight:bolder;
fs
font-style: ;
fs:n
font-style:normal;
fs:i
font-style:italic;
fz
font-size: ;
ff
font-family: ;
ff:s
font-family:serif;
ff:ss
font-family:sans-serif;
ff:m
font-family:monospace;
c
color: #000;

Visual

op
opacity: ;
op:ie
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
op:ms
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
cur
cursor: ;
cur:a
cursor:auto;
cur:d
cursor:default;
cur:c
cursor:crosshair;
cur:ha
cursor:hand;
cur:he
cursor:help;
cur:m
cursor:move;
cur:p
cursor:pointer;

追記: Fuzzy search

Emmetから、Fuzzy searchという機能が加わりました。
この機能はCSSを「短縮形っぽく」書いて展開すると、その形式に似たプロパティ、または値が展開されます。

.foo {
  fl
  fll
  flol
  flr
}

/* 展開 */
.foo {
  float: left;
  float: left;
  float: left;
  float: right;
}

ノリでかけば、それっぽく展開してくれるので、CSSをEmmetで使用する敷居が低くなりました。
「Dreamweaverの補完機能と何が違うの？」と思われる方も少なくないでしょう。
慣れもある程度必要ですが、実際にやってみるとDwの補完機能よりもスピーディーにCSSを入力できるようになります。

接頭辞について

Emmetから、接頭辞(ベンダープレフィックス)を容易に付けれるようになりました。
-(マイナス)を使用することで、一気に接頭辞を付けることができます。

bdrs8

/* -(マイナス)を付けたもの */
-bdrs8

/* 展開後 */
border-radius: 8px;

/* -(マイナス)を付けたもの */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

展開した接頭辞付きの値を変えたい場合は、一箇所を変更します。

-webkit-border-radius: 4px 24px;　/* 一箇所変更 */
-moz-border-radius: 8px;
border-radius: 8px;

Zen-Coding ver0.7からある、Reflect Valueを実行すれば、プロパティの値を同じにできます。

-webkit-border-radius: 4px 24px;
-moz-border-radius: 4px 24px;
border-radius: 4px 24px;

接頭辞を簡単に付けれるのは魅力的ですが、値を変えるたびにReflect Valueを実行するのは面倒です。
SassやLess, Stylusなどのメタ言語の方が使い勝手が良いかもしれません。

SCSS

@mixin bdrs($bdrsValue: 8px){
  -webkit-border-radius: $bdrsValue;
  // -moz-border-radius: $bdrsValue;  これもいらないし。
  border-radius: $bdrsValue;
} 

div {
@include bdrs;
span {
@include bdrs(4px 24px);
}
}


/* コンパイル後のCSS */
div {
-webkit-border-radius: 8px;
border-radius: 8px;
}
div span {
-webkit-border-radius: 4px 24px;
border-radius: 4px 24px;
}

Sass, Less(メタ言語) と Emmet(Zen-Coding) のどちらを使えばいいのか？

Sassなどのメタ言語とEmmetは、役割が違います。
制作環境によって選択できない場合もあると思いますが、自由に制作できるのであれば、両方使ってみるといいかもしれません。

オススメは、Emmetのsnippets.jsonに、@includeなどをショートコードとして記述しておくことです。(下記例での、| [Vertical bar]は、展開後のカーソル位置)

@if
@if {\n\t|\n}
@e
@else {\n\t|\n}
@in
@include |
@ex
@extend |
@mx
@mixin {\n\t|\n}
@fn
@function {\n\t|\n}
@r
@return |

分かりやすい形でショートコードを追加しておいて、Sassなどを使うと快適になります。

関連サイト
Emmet.io