5 ms·

For layout/design, there’s open props [1]. I like the MDN for quick reference but the actual HTML spec is actually quite well written and has lots of useful ex

For layout/design, there’s open props [1]. I like the MDN for quick reference but the actual HTML spec is actually quite well written and has lots of useful examples [2]. [1]: https://open-props.style/ https://open-props.style/ [2]: https://html.spec.whatwg.org/ https://html.spec.whatwg.org/

chrismorgan 4y ago
I don’t like Open Props on technical grounds: it’s pointlessly inefficient, largely an abuse of Custom Properties, to my mind, shipping a completely superfluous layer of indirection to every client, rather than flattening almost all of the properties at compile time as could and should be done. If you’re using something like Sass, you’d use variables for this sort of thing except where you do want to change values dynamically (e.g. different values in light/dark mode). Using Custom Properties for everything is just wasteful if you’re not going to have anything subsequently using the definitions themselves. As an example, on their site, they’re sending about 68/12KB gzipped of styles. Some are already unused and could be removed by straightforward dead code removal. Inlining variables that are set only once and removing their definitions (which incidentally encompasses that dead code removal) reduces it to 40/8KB which will both transfer and evaluate faster. (A further 20% of the styles are also unused and possibly sanely removable.)
sdze 4y ago
Number 1 lags when scrolling on a 2018 MacBook Pro. Not a good advertisement of a product.
- everythingabili 4y ago
  [2] crashed Chrome 3 times. Mac Monterey.
- shadeslayer_ 4y ago
  Lags while scrolling on a 2021 MBP as well.
- aaaaarg 4y ago
  hmmm it's good in my 12+ year old laptop in firefox.
- i_am_proteus 4y ago
  Fine on a 2015 Thinkpad running Firefox on Fedora. A product is poorly-advertised indeed, but which product?
- ExtremisAndy 4y ago
  Yeah, I have to wonder if something else is going on with your machine/browser. Runs absolutely perfectly on my 2015 MacBook Pro.
  - sdze 4y ago
    I bet you don't use the Safari Browser. I checked again with Firefox on Mac and I didn't notice any performance issues.

chrismorgan 4y ago

I don’t like Open Props on technical grounds: it’s pointlessly inefficient, largely an abuse of Custom Properties, to my mind, shipping a completely superfluous layer of indirection to every client, rather than flattening almost all of the properties at compile time as could and should be done. If you’re using something like Sass, you’d use variables for this sort of thing except where you do want to change values dynamically (e.g. different values in light/dark mode). Using Custom Properties for everything is just wasteful if you’re not going to have anything subsequently using the definitions themselves. As an example, on their site, they’re sending about 68/12KB gzipped of styles. Some are already unused and could be removed by straightforward dead code removal. Inlining variables that are set only once and removing their definitions (which incidentally encompasses that dead code removal) reduces it to 40/8KB which will both transfer and evaluate faster. (A further 20% of the styles are also unused and possibly sanely removable.)

sdze 4y ago

Number 1 lags when scrolling on a 2018 MacBook Pro. Not a good advertisement of a product.

everythingabili 4y ago
[2] crashed Chrome 3 times. Mac Monterey.
shadeslayer_ 4y ago
Lags while scrolling on a 2021 MBP as well.
aaaaarg 4y ago
hmmm it's good in my 12+ year old laptop in firefox.
i_am_proteus 4y ago
Fine on a 2015 Thinkpad running Firefox on Fedora. A product is poorly-advertised indeed, but which product?
ExtremisAndy 4y ago
Yeah, I have to wonder if something else is going on with your machine/browser. Runs absolutely perfectly on my 2015 MacBook Pro.
- sdze 4y ago
  I bet you don't use the Safari Browser. I checked again with Firefox on Mac and I didn't notice any performance issues.