Yes, absolutely logical and coherent. I’m not saying it’ll be so to someone that knows nothing about CSS, but rather to someone that generally understands CSS, because these solutions I discuss are straightforward and built upon well-known CSS fundamentals; they’re not complex in any way. The only part that is arguably not quite so logical, coherent and obvious is display:inline-block in order to limit the width, but even that I reckon is fairly obvious, that you’ll need that or to contain the element in certain styles of flexbox or grid.

Not everything is straightforward, but the things I was talking of are. (Incidentally on the matter of performance on animating box shadows, that’s actually not fundamental; Firefox has proper GPU rendering of it all, via the WebRender project, so that advice is irrelevant and actually (negligibly) slightly harmful in Firefox; it’s just that Chromium and WebKit haven’t caught up.)