Emmet & CSS

[00:00:00]
>> Mike North: You can also use Emmet in style sheets. So I'll show you what that looks like. All right, so let's say we've got some style body, and we can basically create an abbreviation that looks like this.
>> Mike North: Tab and it will be padding of ten pixels.
>> Mike North: So I cannot remember anywhere near all of the different style properties here in order to make this work for me.

[00:00:32]
So I rely on IntelliSense, which are these little autocompletes that it's showing us. And you can see here, we're being told. Okay, P10, this is what code is understanding at this moment, right, its understanding its padding and its ten pixels and we should expand it. We can add a P and we can see we've gotten 2% at that point.

[00:00:56]
Lets see if we can do this one. So that's color black. And you can hit tab and expand that out. So it works for CSS2.
>> Mike North: So the too many style combinations to remember, remember this is for repetitive stuff. And like it, this is not a mountain that you should try to climb and try to just memorize everything.

[00:01:24]
If it's repetitive enough, you will know it. For me margin and padding, that's a good place to start. M10, P10 something like that. You can even do something like P10!, don't use important now. Watch the SAS course for why you shouldn't use important. But, you probably do want to remember these, they're called value aliases.

[00:01:51]
And it's just an abbreviation for, think of it like your units almost. So we've got rem, this is not really an abbreviation, but px. Certain things like margin and padding they will assume pixels unless told otherwise. They're other value aliases, but these are, this is a good place to start.

[00:02:13]
>> Mike North: And from multi word properties just try the first letter of each word. Like line height LH that's probably line height. But IntelliSense is gonna tell you the right thing.
>> Mike North: There you go, it should probably be like that, or something like that. So it's designed to be intuitive.

[00:02:41]
Here's some examples, like I would definitely remember this one. I would probably use this all the time without the important. This,
>> Mike North: Depends how many cups of coffee I've had whether I remember this or not. This I would definitely remember. I had to do capacity all the time for animations and things like that.

[00:03:02]
So again, just pick up what you can pick up. And I probably retain 10% of this stuff but I still get a ton of mileage out of it. Even after l n years I still retain only the stuff that I need, rIght?
>> Mike North: All right, so as you start to use Emmet, first be aware that any new line or space that is regarded as sort of a stop in these Emmet expansions.

[00:03:31]
So if I were to do something like this,
>> Mike North: that's not going to expand. It needs to basically be spaceless and new lines are not allowed either. We will end up creating a custom shortcut. We're gonna make it placeholder image that will just be PH, so you can do PH tab.

[00:03:51]
And then you'll basically just need to say with the height of the placeholder in which those are the two blanks that will fill in. But it will build this whole image tag with the URL set properly all done for us. Big one here, just go for the small expansions.

[00:04:08]
I probably only go two layers deep. If I'm going three layers deep, I'm exceptionally perky that day, but two is probably what to shoot for. Even if you're just doing a div that has multiple classes on it, it's really nice to just be able to do .class, .class, .class tab.

[00:04:29]
So start there, don't fall into the trap of trying to make a perfect one shot thing. It's satisfying but there it's not saving you time, it's costing you time. And again just like the key bindings, start with the few and prepare in more as you go. Add more as you go.