Meet Emmet
When learning a new skill, I think it’s imperative to understand the basics.
When I started developing for the web, the first concept I became friendly with was HTML. I learned that each opening tag had a closing one too, tags are nested within tags — going several layers deep, and that completing and closing these tags can be a minor hindrance on precious coding time.
There comes a point where one should consider if there’s a way to more seamlessly work the basics into their workflow.
This is where Emmet comes in.
Emmet is a plugin for text editors (I enjoy Sublime Text) that speeds up the writing of HTML and CSS.
Here’s an example of Emmet’s basic functioning…
A p tag contains text for a paragraph. When you type 'p' into your text editor then hit tab, Emmet turns that into...
Emmet adds the brackets, creates opening and closing tags, and puts your cursor right in between them, so you can immediately start writing that paragraph.
And it gets better! I really like using Emmet for creating lists.
Take this line of seemingly garbled mess [ul.cool-list>li.cool-list__item*5>a] for example – press tab and...
I think that’s pretty neat (the code and the GIF).
Let’s go through that ‘Emmet equation’ step-by-step, and see exactly what it is that we’re telling Emmet to do.
ul
Create an unordered list
.cool-list
With a class of 'cool-list'
>li.cool-list__item*5
And inside that list (>), please insert five (*5) list items (<li>) with a class of 'cool-list__item' [PS - check out that BEM syntax].
>a
Inside those list items, insert 'a' tags (links).
These Emmet equations may seem like something difficult to create, but once you start practicing, it becomes second nature.
You can create entire page structures really quickly if you plan out your layout and decide which elements to use. I usually don’t use Emmet to do that, but instead use it to create the basics, and snippets of code. Emmet works with CSS too!
Just as a related side-bit — there are some Emmet-esque equations that work in Terminal (that [often] black-hole-of-a-screen that people are usually afraid to type in — though it’s not that scary).
You can build an entire folder structure right in terminal, instead of right-clicking to create all those folders.
mkdir -p coolProject/{src/{scss,js,images},build,randomFolder}
Entering this command into Terminal creates a parent directory/folder that has ‘src’, ‘build’ and ‘randomFolder’ folder within it. Within the ‘src’ folder are folders called ‘scss’, ‘js’ and ‘images’. One line of code for all those folders.
Whenever I do a fresh install of Sublime Text, or am on another coder’s computer who doesn’t have Emmet — Emmet’s the first thing I install.
Working with Emmet is like having someone who finishes your (code) sentences. It's amazing. Thanks, Emmet.
I’d love to hear if any of you have Emmet equations that you think are essential and amazing, or even about other workflow tools for coding (or anything).
