You can use Emmet with CSS!
ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- My video on Emmet for HTML: • Use Emmet to up your H...
Emmet is awesome, and I use it for my HTML all the time. When I put up my Emmet video, a lot of commenters mentioned that we can use it for CSS too. I've known about it, but I haven't used it a ton... but the more I play with it, the more I like it!
The only drawback is there are a lot of properties to remember new shortcuts for!
Emmet's cheatsheet... use find for what you're looking for, there is a lot 😅 docs.emmet.io/...
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowel...
---
Help support my channel
👨🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
My CSS Professor has blessed me yet again.
Kevin Powell is a high quality sub for sure.
at 3:00 you can shorten it to "m0-a" it will translate to "margin: 0 auto;" as well 👍🏼
Cool!
@@Steel0079 Ctrl + movement keys
I love this, didn't know it existed for CSS as well
You really do churn out a lot of useful content at a rapid pace. Always good.
Thanks, glad you're enjoying it all!
@@KevinPowell At 5:45, you moved the cursor instantly to the start of the word "black", before deleting "#". It didn't look like it was a mouse movement. Is there a shortcut for doing that?
@@Steel0079 if you hold ctrl and use arrow keys, the cursor moves a word (or token) at a time. So ctrl + left arrow is what he did to get to the start of the word. This works with backspace and delete too, so to delete a word press ctrl + backspace.
at 6:07 that's called trigger suggest and in vscode you can press ctrl+space (or command+space in mac) to bring it up without having to hit backspace
it's not only for emmet snippets it also works for just about anything with intellisense
Every time I hear Emmet, I think of Dr. Emmet Brown a.k.a. Doc from Back to the Future!
jajaj me too
And thanks to reading that, I probably will too 😅
I believe thats who its named after
"GREAT SCOTT!!"😯
Wow, I think of Emmet, the firearm guy from Gta SA, lmaoo
Hands down Emmet has changed this game since it came , i remember using it on sublimetext and never going back since.
As usual great content, keep it up.
Hey...
I'm from Bangladesh right now I am learning JavaScript...
my Facebook Nigerian friend is learning css. I suggested him to follow your channel for CSS. You are the CSS king.
Thanks for sharing 😊
Welcome
As a hand coded I have been using it mainly for table setups for data. Now I will use it more often for standard styles. Thanks soo much!
Already using emmet on css, the multiple line trick and the shortcut for fxd:c are new for me 😲 Soooo coool 🤩 Thanks
This is awesome! I did not now about this, and the cheat sheet is included!
Thank you again Kevin for continually providing the web dev community with premium content!
Never knew the "+" was there to combine multiple properties. Always did them one at a time. Thank you Kevin❤
Same. Ironically, it takes longer to connect them all. Each property would need its own tab/enter keystroke, but with combining, we need to press “shift” and “+”, plus the final tab/enter.
I didn't know about this. So happy to wach your video. I'm gonna try to include it from now (because sometimes the hand already is moving automatically when typing css). Thank you Kevin
Bro, You changed my life!! I've been used the intellisence to type the props faster for so long, but now it comes to my mind to use it like that. Thank you! Keep going
this will definitely speed up my work flow. thanks Kevin 🎉
When I saw you do that first m0, Kevin, I had to immediately stop the video, pop open VSCode, and try it. And then scream: "OMG! IT'S BEEN HERE THE WHOLE TIME!!!!" So... thanks for the epiphany! I'll definitely be using this.
I HAVE to start using emmet now, I never thought it would have this much power!
I am starting on this journey at 48 years old, totally a newbie. This little shorcuts are wonderful for me! Thanks so much!
Awesome :) I got many here. I was not thinking about Emmet but was already using it for many css properties. Now will play around it and have lots of fun. Cheers. Thanks Kevin.
I didn't know it existed for CSS as well! I'm gonna give it a try. Thanks again!
Thanks, if it wasn't because of this video it wouldn't have clicked...been using Emmet by accident whilst coding SCSS with basic stuff like m0 or p0 but I never got to make the connection.
This opens up a load of possibilities.
This blew my mind. Don't ever stop making these videos!
I never even considered that Emmett might work with CSS. Going to try it out tonight. Thanks!
I am in web development from last 4 years and I don't know about it even I watch many tutorials work a lot on projects with css. Its Amazing
I haven't seen Emmet with css but now ... I'm gonna User it !
Didn't know about this but is so cool! Thanks again Kevin!!
Glad you liked the video 😃
I didn't know this was possible, this is so useful
Thanks Kevin Sir it was a informative tutorial it has taken my css to next level
Jeez!!!! I didn't know that. Thank you. Super excited
No, i haven't used it yet but I sure will from now on! Thank you so much, I think your videos and your responsive course has been the main reason I got good, or better and more comfortable with css (and scss).
I have started using emmet from now onwards a lot!!
Each video of your channel is a gem...
I have used it a little on CSS, but I did not know you could combine them. Another helpful and awesome video!
Glad you enjoyed it
I?ve been using it but not in combination with the plus sign. That is just awesome. As always Thanks million for your work Kevin!
Magic! Thanks alot, cheers from Norway!
I'm definitely going to start using Emmet for both CSS ans HTML!
Wow, this is awesome and will sure save me time. Didn't know emmet works with css even though I've been using some kind of shorthand without knowing the full potentials.
I am using VSCode for quite some time now and I never realized the integration of Emmet and its potential. Thank you for pointing that out!
Glad you liked the video 😃
This is so cool. I will start using this right away in my CSS styling. Thanks, Kevin. You're awesome :)
Wow. Love this and will start using immediately. Thank you
I used only m0, p0, & bgc before your video but now I will try this all emment
Wonderful KP, Thanks for your kind work. 👍
This is something you dont find in other Ytubers.
Great. Didn't know about it. Another level up on my skills 🥰. Thanks Kevin!
Glad you liked the video 😃
I didn't know there was emmet for CSS. I'm gonna start using it now! Thank you Kevin! I love your content!
I've been using emmet with CSS but I guess not efficiently. Thanks for making this video, now I can use it efficiently
Thanks, glad you enjoyed it :D
I didn't know of this, wow this really speeds up css. Thanks a love Kevin
Wow thanks much, I've been thinking about it for sometime now.
only now finding this, awesome resource!! The only thing that grinds my gears a little is separating out properties isnt with a semicolon HAHA but i can live with the plus sign ❤
Never knew about this! Looks wonderful! Thanks for sharing! A cheat sheet would be awesome!
MORE THAN AWESOME! As usual I should add :) Thank you soooo much Kevin! I really Love Your tutorials!
I'm falling in love with it too and your content! Thanks a million!
You are AWESOME as usual Kev.
Keep it up man. 👏
Thank you so much, I didn't know about this, and I'll start using it right now 🌹
There is something new you get to learn on this channel ❤️
Hai kevin u always come with new strategy in css. Thanks
This is gold! Thank you very much Kevin!
I love all your videos and I've improved alot since I found this channel!
That's interesting! I only used it for html. Thanks for the tip 👍😀
Glad you enjoyed it and welcome aboard!
I have actually used some of these without even thinking about that it was Emmet doing its magic!
Same thoughts here, I was no thinking about Emmet but using it for many css properties :)
@@mohan9285, exactly! There's one place where I miss Emmet badly, and that is when writing HTML in template/object literals (whatever you prefer to call them) in JS.
It simply doesn't work in VS Code, and I can't figure out why ...!
That is so awesome! Wish there were something like that for SMIL - which I still prefer over CSS for its versatility, but oh boy is it superfluous.
VScode was already ok with "fuzzy" writing.
For exemple :
"mgn" / "margn" / ""marg"… for margin
"pddin" for padding
"pdnrg" was doing padding right
So when I write very quickly on CSS I don't take to much attention about the exact wording… It's faster than learning exact emmet, but sometime VSCode doesn't understand my very weird writing :p
Yeah, I totally agree. The only thing that drives me bananas with the VS Code auto-complete with CSS is it adds the semi-colon. Which, yup, I get, but then it would be great it if worked like quotes where, when it adds the closing quote, if you pushed the key for it, it jumps to the other side... with the semi-colon it just adds a second one :\
@@KevinPowell yesssss that is sooooo annoying lol, I thought it was just me
I do this. If its two word. I use marbot = margin-bottom. padbot = padding bot. I just use keyword.
@@KevinPowell same frustration about automatic semicolon
@@KevinPowell I assign cmd + spacebar for the 'right' key using an app on my mac to make it easier getting around semi-colons and stuff. Because I hate using the arrow keys on a macbook
😲😲 Oh My Code !
I begin to undestand more and more why You are THE KING OF CSS.
im definitely gonna use emmet for usual codes
Wow, it's totally amazing and super fast.
Really good!
I've used it before but not for multiple properties, that will be helpful
Huh. Never thought of it for CSS. D'oh. I am all over this.
Just amazing! Thank you so much... I loved that video.
The king, very useful
👍
This is life changing for me, thanks!
Le Dieu du CSS frappe encore. Merci de nous avoir envoyé Kevin Powell. 🕊️🕊️
Been using emmett for single properties, was not aware of the + feature.
I knew we have emmet in HTML but not in CSS, that's awesome!
You are literally carrying me in CSS. I am such a better CSS writer because of your videos! Thank you!
Exactly what I wanted! Thanks!
I thought I was clever to get margin: 0 auto by doing m0 ← space auto until I saw this. Thanks, Kevin!
Not tried so far css, interesting, i wil start using it
This is my first ever comment. You are wonderful. It increased my speed of coding html and css
I use it from past one year... But dont use for multiple lines... And my current ranking in cssbattle is 32 😀
Thanks to you and Kyle for inspiring us...
Really glad to know
I use it, but in a learn as I go hit and miss kind of way, thanks for making emmet for css more opaque for me Kevin :heart:
Thanks so much!
Great stuff, thank you!
CAnt stop learning, you are just the best at making me learn.
As like as all your videos, Informative and useful.
Was totally unaware emmet was available for CSS - don't know how. Cheers for the heads up
wow, nice to know this! m10-a works as well :)
Awesome man, thanks!!
i love it , thank you so much
I didn't knew that I can use Emmet for CSS. Well thanks for the video. Now I can write CSS 2x faster
thanks for great content Kevin!
You're welcome 😊
amazing stuff as usual!!
Thanks ☺️
kevin's mom whenever he makes her mad: hey kevin, say specificity, or else i'll beat you up
Ahjeez. Here comes a whole new absurd syntax for me to learn. I know it's optional, but like HTML-Emmet, damn that's way faster.
Interesting stuff, as always
This is really really cool. But more often then not you don't really know all of the properties you want for a declaration. You gradually build up to it.
But other than that, single property short cuts are amazing!
Till Now, I didn't know that emmet existed for CSS
I had no idea!
These are super awesome. Thanks a lot. May The Almighty bless you.
ty man, it's very useful for me
Something new and useful before 8am. Cool!