Using abbreviations for long CSS properties in VS Code
So, I just learned about this neat little trick in VS Code where you can use abbreviations for long CSS properties and it will automatically expand them into their full form. This is a built-in feature in VS Code and you don’t need to install any extension for this.
It’s essentially a part of Emmet which is a plugin for many popular text editors which greatly improves HTML & CSS workflow.
For instance, if you type df and hit Tab, it will expand into display: flex;.
Similarly, if you type aic and hit Tab, it will expand into align-items: center;.
It works for a lot of CSS properties. You “just” need to be a little more specific in case you don’t get your desired result.
Here’s a video of it in action.
I think this is pretty handy since it saves you a lot of keystrokes and time.
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
