The most important principle for current technologies is #1, “Don’t change any properties besides opacity or transform!”
Hopefully everyone will start copying the approach Servo uses in its WebRender engine which is basically treating the browser rendering as though it were a game, using the GPU for rendering everything; therefore guidelines like this become obsolete.
This applies to a slightly lesser extent with #2, “Hide content in plain sight.” #3 is also obsolete in Servo, as is #7, mostly.
Even if everything were GPU based, this would still be a good suggestion no? The biggest reason I see to use "transform: translateX(n)" over "left: n" is the transform doesn't make a call to reflow the content around it (unless that's what you're going for). Even with GPU acceleration, transform will still be more performant than standard positioning/sizing.
I've always followed this rule: Use transform unless you need reflows, then use top/left/height/width.
The thing is, reflow is not why using left is slow. If the element is position: absolute, you don't reflow the whole page anyway.
CSS transform is used because render is slow. With Servo-like GPU acceleration, render is not slow. Your suggestion would not be a good suggestion because using transform would be an unnecessary premature optimization then.
Slight nit: Opacity can still matter, in modern games they're usually kicked to a different, more expensive render pass. However that doesn't really impact UIs as things aren't rendered front to back but in layer order.
Although opacity can have some gnarly fill implications if you go crazy with it.
Overall though, yeah web stuff falls well behind more modern UI renderers like HWUI on Android and the like.
Do browsers kick position: fixed element animations over to the GPU? If not, does that mean it's worth putting them at 0,0 and using transform for their real coordinates?
Hopefully everyone will start copying the approach Servo uses in its WebRender engine which is basically treating the browser rendering as though it were a game, using the GPU for rendering everything; therefore guidelines like this become obsolete.
This applies to a slightly lesser extent with #2, “Hide content in plain sight.” #3 is also obsolete in Servo, as is #7, mostly.