Shorthand vs longhand stats

[LeaVerou]

Popular shorthands, e.g. transition, background, font, animation. Are the numbers maybe low due to the fact that the order of the values is not that easy to remember without checking the documentation?

(by @catalinred)

[LeaVerou]

I actually think comparing usage of longhand vs shorthand for all shorthands would give us a lot of good insight in terms of what makes a good shorthand.

[Crissov]

Should this be put in relation to the CSS being minified? #25 (I donʼt know whether common minifiers are sophisticated enough to generate shorthands where possible.)

[LeaVerou]

I highly doubt any minifiers do that, but even if they did, the primary interest of this measurement is not related to minfication.

[LeaVerou]

Whatever JS we write, we will need some input on what the shorthands are. I wrote this script so we don't need to manually maintain such a list, we can just copy the object generated: https://codepen.io/leaverou/pen/gOPEJxz?editors=0010

[LeaVerou]

So, in terms of an analysis algorithm:

• We traverse the AST, noting properties that are shorthands or longhands (note that some can be both)
• We count usage of each.
• We should also count cases when a longhand was used in the same rule as its shorthand, both before (which is a mistake, as it is ignored), and after (which is a useful pattern for DRY code).

It would also be interesting to note when longhands are used in cases a shorthand would have been more appropriate, e.g. due to lack of knowledge about its arguments, and which shorthands are the least utilized. However, since a shorthand resets all of its longhands to initial except those explicitly set, we can only be certain that a shorthand should have been used when all longhands are provided, otherwise it's likely that the longhands were used to avoid this kind of resetting. However, in most cases this will not be the case, since not all longhands are relevant. So I suppose we can only infer this by counting usage.

[LeaVerou]

Just pushed JS for this.

It counts:

• Shorthands used (total by property)
• Longhands used (total and by property)
• Shorthands used before their longhand in the same rule
• Longhands used before their shorthands in the same rule
• Number of values for shorthands (only if the value is "simple", to avoid errors)

Sample output for Smashing Magazine's CSS:

{
	"margin": {
		"1": 119,
		"2": 147,
		"3": 29,
		"4": 47
	},
	"overflow": {
		"1": 62
	},
	"border-bottom": {
		"1": 9,
		"2": 1,
		"3": 24
	},
	"text-decoration": {
		"1": 50,
		"2": 1
	},
	"border-style": {
		"1": 5
	},
	"padding": {
		"1": 164,
		"2": 213,
		"3": 20,
		"4": 68
	},
	"outline": {
		"1": 15,
		"2": 1,
		"3": 9
	},
	"border": {
		"1": 41,
		"3": 47
	},
	"animation": {
		"1": 1,
		"2": 2,
		"3": 17,
		"4": 4,
		"5": 1
	},
	"flex": {
		"1": 12,
		"3": 6
	},
	"background": {
		"1": 132,
		"2": 69
	},
	"border-radius": {
		"1": 167,
		"4": 26
	},
	"border-top": {
		"3": 5
	},
	"grid-row": {
		"1": 1,
		"2": 1
	},
	"transition": {
		"1": 2,
		"2": 4,
		"3": 165
	},
	"font-variant": {
		"1": 29
	},
	"background-position": {
		"1": 1,
		"2": 75,
		"3": 39,
		"4": 3
	},
	"background-repeat": {
		"1": 91
	},
	"list-style": {
		"1": 28
	},
	"border-left": {
		"1": 4,
		"3": 9
	},
	"grid-column": {
		"1": 2,
		"2": 4
	},
	"border-right": {
		"1": 1,
		"3": 7
	},
	"border-color": {
		"1": 29
	},
	"border-width": {
		"1": 4,
		"4": 1
	},
	"font": {
		"4": 2
	},
	"columns": {
		"1": 1
	},
	"grid-gap": {
		"1": 2,
		"2": 1
	}
}