4 ms·

What if you have that width and aspect-ratio defined and in "galaxy far, far away" someone will define height for that element? What about good old principle o

What if you have that width and aspect-ratio defined and in "galaxy far, far away" someone will define height for that element? What about good old principle of least astonishment? Not for us anymore? That's the problem - instead of two properties that define box dimensions you now have now who knows how many props changing dimensions Why the hell property named align(sic!) `align-items: stretch;` shall change box dimensions? And what to do with width/height then?

AprilArcus 5y ago
Don't expose your CSS classes to spooky action at a distance. Use a build system or CSS in JS library to hash your class names and keep them private. It's a terrible shame that CSS relies so heavily on globals (I'm looking at you, `@keyframes`), but as programmers we should all recognize them when we see it and avoid them by any means possible.
- franga2000 5y ago
  > Use a build system or CSS in JS library to hash your class names and keep them private. Please don't. Human-readable and rarely changing class names are one of the few things keeping customization on the Web still possible. Just add an application name class selector to the beginning of each style block (perhaps as part of your build so you can do it for dependencies too) and put those classes on your body. For bonus points, put those classes as deep in the tree as reasonable and you have yourself scoped styles - all with zero JS and compiler fuckery. I've used this method to mix Bootstrap versions on one page as well as two completely different CSS frameworks. Obviously not something you want to do, but you might need to once in a while.
lelandfe 5y ago
> instead of two properties that define box dimensions you now have now who knows how many props changing dimensions For border-box block elements, height and width are still absolutes (notwithstanding min-/max- values of the same). Protesting other box models is absolutely doable: just don't use 'em. Principle of least astonishment accomplished.

AprilArcus 5y ago

Don't expose your CSS classes to spooky action at a distance. Use a build system or CSS in JS library to hash your class names and keep them private. It's a terrible shame that CSS relies so heavily on globals (I'm looking at you, `@keyframes`), but as programmers we should all recognize them when we see it and avoid them by any means possible.

franga2000 5y ago
> Use a build system or CSS in JS library to hash your class names and keep them private. Please don't. Human-readable and rarely changing class names are one of the few things keeping customization on the Web still possible. Just add an application name class selector to the beginning of each style block (perhaps as part of your build so you can do it for dependencies too) and put those classes on your body. For bonus points, put those classes as deep in the tree as reasonable and you have yourself scoped styles - all with zero JS and compiler fuckery. I've used this method to mix Bootstrap versions on one page as well as two completely different CSS frameworks. Obviously not something you want to do, but you might need to once in a while.

lelandfe 5y ago

> instead of two properties that define box dimensions you now have now who knows how many props changing dimensions For border-box block elements, height and width are still absolutes (notwithstanding min-/max- values of the same). Protesting other box models is absolutely doable: just don't use 'em. Principle of least astonishment accomplished.