emmetがすごく便利です。
mtと入力してタブを押してmargin-topと出てくるだけでも便利。メモ帳でガリガリCSSを書いていくスキルはとても重要ですが、emmetはコーディングというよりも、何か少しずつ手続きを重ねてウェブサイトを作っていくような感覚がしますね。
一生懸命キーボードを叩いた回数より、思考して少ない打鍵数で完成にたどり着く過程に、贅肉を削ぎ落とす（リーンな）格好良さを感じます。
タグ打ちを短縮できるツールで、昔からzen-cordingという名であったそうです。
自分が実際使い始めたのは、今年に入ってから。
フルフルで活用しているわけではないものの、原稿ありきのマークアップでないときには、コーディング時間の短縮と、キーボードを叩く回数が減るだけ、省エネになります。1日で叩ける回数は決まっている、なんてことをいう方もいますし、叩く回数を減らすというのは意外と重要かもしれません。
公式サイト
Emmet — the essential toolkit for web-developers
emmet.io
さてemmetの記法ですが、例えば下記です。
nav>ul>li
と書いてタブを押すと、下記のように変換してくれます。
<nav> <ul> <li></li> </ul> </nav>
そのぐらいなら、別のツール使えばいいじゃん、て思う方も多いと思います。わざわざ導入しないで使い慣れたツール使えばいいじゃん、と。
おっしゃる通りでございます。使い慣れたツールとコマンドを利用するのが効率的です。
便利な使い方を上げるとすれば、テンプレート（HTMLの雛形）やフォーマット、CSSモジュールの作成など、HTMLのタグ打ちを先行で行える場面でしょうか。
飽きてきたらすっかり使うこと自体忘れてしまうかもしれませんが、しばらく意識的に利用してみようと思います。
ちなみに、Adobeさんに詳しい記事があります。
https://blogs.adobe.com/creativestation/web-learning-emmet-why-emmet
blogs.adobe.com
コメント