Naturally, developers spend a lot of time writing code. How many times have you asked yourself how to write your code more efficiently and elegantly than you usually do? Have you looked for different ways as how to increase your speed of coding and, at the same time, not to lose its quality?
I want to let you in on my little secret on you how you can write your HTML/CSS code much faster.
A lot of different code editors/ IDEs have support for Emmet. Emmet is a plugin for editors/ IDEs which greatly improves HTML & CSS workflow.
Personally, I prefer using the PHPStorm IDE as it includes a lot of other cool features that would be interesting for web developers.
Let’s Dive In
Here, I’ve created a new HTML l file. Now I want to generate a typical HTML5 structure. Just type “!” and press “tab”:
As a result, you will see the following nicely formatted document structure without having to write it from scratch:
Nice, isn’t it? Emmet has just generated this HTML5 structure for us. Usually we need some basic HTML elements like header, content, or footer. So, let’s type this code and press “tab”:
You will get the following nested structure:
What if you want to generate menu that contains five elements, and each of them has a link inside?
It's a breeze if you use Emmet:
Result:
Besides, Emmet provides amazing support within CSS styles. Using Emmet, you can write your CSS code much faster. I am going to show you several examples of how you can use Emmet in some common situations.
Let's try Border-radius with Emmet:
Result:
Here's how you'd do a Border shadow:
Result:
Let's try adding Opacity for Internet Explorer:
Result:
As you can see, we can write HTML and CSS much more efficiently with Emmet's abbreviations allowing you to take out the repetitiveness of writing HTML or CSS from scratch.
What tips or tricks do you have up your sleeve that makes you happier or more productive as a developer?
About the Author
More Content by Vova Kovalenko
