Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shorthand vs longhand stats #10

Open
LeaVerou opened this issue Jul 10, 2020 · 6 comments
Open

Shorthand vs longhand stats #10

LeaVerou opened this issue Jul 10, 2020 · 6 comments
Assignees
Labels
Has algorithm (1/3) Has JS (2/3) Has SQL (3/3) proposed stat Section: Meta

Comments

@LeaVerou
Copy link
Owner

LeaVerou commented Jul 10, 2020

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 LeaVerou added the proposed stat label Jul 10, 2020
@LeaVerou
Copy link
Owner Author

LeaVerou commented Jul 17, 2020

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.

@LeaVerou LeaVerou changed the title Shorthand stats Shorthand vs longhand stats Jul 17, 2020
@Crissov
Copy link

Crissov commented Jul 21, 2020

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
Copy link
Owner Author

LeaVerou commented Jul 21, 2020

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

@LeaVerou
Copy link
Owner Author

LeaVerou commented Jul 25, 2020

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 LeaVerou added ⚠️ Needs algorithm ⚠️ Needs JS ⚠️ Needs SQL labels Aug 4, 2020
@LeaVerou
Copy link
Owner Author

LeaVerou commented Aug 11, 2020

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 LeaVerou self-assigned this Aug 11, 2020
@LeaVerou LeaVerou added the Has algorithm (1/3) label Aug 11, 2020
@LeaVerou LeaVerou mentioned this issue Aug 22, 2020
@LeaVerou LeaVerou added this to Has algorithm in Almanac 2020 Aug 22, 2020
LeaVerou added a commit that referenced this issue Sep 18, 2020
@LeaVerou
Copy link
Owner Author

LeaVerou commented Sep 18, 2020

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
	}
}

@LeaVerou LeaVerou added Has JS (2/3) and removed ⚠️ Needs JS labels Sep 20, 2020
@LeaVerou LeaVerou moved this from Has algorithm to Has JS in Almanac 2020 Sep 20, 2020
@rviscomi rviscomi added Has SQL (3/3) and removed ⚠️ Needs SQL labels Oct 24, 2020
@rviscomi rviscomi moved this from Has JS to Has SQL in Almanac 2020 Oct 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Has algorithm (1/3) Has JS (2/3) Has SQL (3/3) proposed stat Section: Meta
Projects
Development

No branches or pull requests

3 participants