After a twitter conversation with @_TemperTemper I have decided to cover off some of the CSS support for Emmet as I understand I have not covered this already for a few reasons.
To begin with I never quite realised how simple Emmet would make my coding with CSS, mostly as I have became so used to using the tooltips I can type in 2 or 3 characters and still end up with the CSS I want for instance if I typed in “pad” and pressed enter I’d end up with Padding:; which is what I wanted, but I’ve became used to Emmet and it makes it so much easier now.
How it works
Similar to the HTML structure for Emmet you type in your shorthand declaration, press ‘tab’ and your css will be the end results.
For example, if you type in the following:
c#B00B13 db m10 p10
You will end up with the following code:
color: #B00B13; display: block; margin: 10px; padding: 10px;
In most cases the shorthand abbreviations for the CSS support are what you would expect them to be, p=padding, m=margin, db=display:block; fz10=font-size:10px; so on and so on.
Being more specific
Instead of just sticking to the absolute basic values of the code such as doing padding as an entire block element with 1 value you can mix it up a little and apply 4 different values of padding for the 4 different sides in 1 declaration or you could do the following:
pt10 pr10 pb10 pl10 p10-20-30-40
This will result in:
padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; padding: 10px 20px 30px 40px;
I’m aware the above isn’t exact correct CSS, but only an example so please don’t turn up outside my house with pitchforks and torches at 3am.
In most cases when you insert a blank value you will be given px as a default outputted result, for instance p10 will result in padding: 10px; but you can also change this to anything you wish by putting in the required value.
For instance you can input p10em to receive p10em or even p10wtf to receive padding: 10em; and padding: 10wtf;
The only items I am aware of that do not have a default value already assigned to them are z-index, line-height, opacity and font-weight which will only insert the number you have set.
The dark side ( !important )
Not that I am encouraging this in any way, but it is possible to do so with Emmet and who knows, maybe some day you’ll need it but you can include the !important code by applying a ! to the end of any declaration you make, such as p10! will result in padding: 10px !important;
Most commonly used values
I did start putting together a list of some of the most commonly used CSS snippets in Emmet but in my research online I found this detailed list which if honest is much better and more in depth than anything I would have done.