The motivations behind CSS are good. And the implementation is OK for the most part. But the "usually-trivial bits of data" are examples of it's failings. Let's

The motivations behind CSS are good. And the implementation is OK for the most part. But the "usually-trivial bits of data" are examples of it's failings. Let's talk examples: * You want to overlay a <div> to the bottom write of a container. You can use "position: absolute; bottom: 0; right: 0", but that puts it at the bottom of the page instead. You have to add "position: relative" to the container. Understanding why you'd need this property means understanding implementation details. Which defeats the purpose of being a declarative language. * You want to float a <aside> to the right of an <article> another. Just add "float: right", to the <aside> right? Whoops, that doesn't work. You'll need to add "overflow: hidden" to the <article> as well. Why should the overflow mode (which really should affect a node's contents) affect the layout of a sibling? * You have a <header> element which extends the width of a content column. You want it to stay fixed within the page so give it "position: fixed". Now all of a sudden it's forgotten how wide it should be and shrinks to the width of it's content. * You have a second <header> element with "width: 100%". You make it fixed too. Instead of retaining it's original width -- or shrinking like the other header -- it extends from its original position on the x-axis off the side of the screen so that it's 100% of the width of the page. Sure, you can learn all of these special rules, but that isn't really a productive use of your time. I work with React a lot, so the approach we use is to create generic layout components that can do all of this stuff in a consistent way.