Sizing model JS

[rviscomi]

Progress on #8

Looking for early feedback to see if I'm using the utils correctly.

[LeaVerou]

Yay, let's get this ball rolling!

• So for what you're doing here, countDeclarations() would be a better helper, as it returns a total count. Their only difference is that countProperties() returns an object literal of properties to counts, and countDeclarations() just returns a total count. I should rename one or both to make this clearer, suggestions welcome. Maybe countTotalDeclarations() and countDeclarations()? Or countDeclarations() and countDeclarationsByProperty()?
• If you're just matching by equality you don't need regexes, any test can also be a string, which is faster too, and more accurate, since this matches any part of the value. Unless you were aiming to also match prefixes too? In which case, we'd need a more specific regex, like /^-(o|moz|webkit|ms)-box-sizing$/. In general, whenever possible use ^ and $ anchors for regexes, as it's faster.

[LeaVerou]

Alright, I renamed countProperties to countDeclarationsByProperty to make the distinction more clear.

[rviscomi]

SGTM. Could you also update https://projects.verou.me/rework-utils/ with the new function?

[LeaVerou]

Done!

[LeaVerou]

Since you only care about 1 count, countDeclarations() is more appropriate here. countDeclarationsByProperty() is for when you're interested in the breakdown per different property. Does that help?

[rviscomi]

Ah ok yes that makes more sense.

[LeaVerou]

I would format the object literal in multiple lines, but that's super minor.

[rviscomi]

FWIW I borrowed the code from 34-named-grid-lines.js which had it all on one line. 😉

[LeaVerou]

Probably because it's shorter, though it would still benefit from some more liberal whitespace :)