Why is CSS Frustrating? | CSS-Tricks

I think that’s what’s happened with some programmers coming to CSS for the first time. They’ve heard it’s simple, so they assume it’s easy. But then when they try to use it, it doesn’t work. It must be the fault of the language, because they know that they are smart, and this is supposed to be easy. So they blame the language. They say it’s broken. And so they try to “fix” it by making it conform to a more programmatic way of thinking. … Instead, I reckon the biggest issue that engineers face — and the reason why they find it all so dang frustrating — is that CSS forces you to face the *webishness* of the web. Things require fallbacks. You need to take different devices into consideration, and all the different ways of seeing a website: mobile, desktop, no mouse, no keyboard, etc. Sure, you have to deal with that when writing JavaScript, too, but it’s easier to ignore. You can’t ignore the layout of your site being completely broken on a phone. … CSS is hard because its properties interact, often in unexpected ways. Because when you set one of them, you’re never just setting that one thing. That one thing combines and bounces off of and contradicts with a dozen other things, including default things that you never actually set yourself. One rule of thumb for mitigating this is, … what you really mean to say, instead of just adding properties until things look right. Try to get a feel for how the browser resolves layout and sizing, and make your changes and additions on top of that judiciously. Work with CSS, instead of against it. ”CSS is hard because its properties interact, often in unexpected ways.” This is the definition of complexity. Good languages limit the ease with which different aspects of state can interfere with each other. Excellent languages make it very difficult. CSS is hard because it’s too powerful and doesn’t limit side effects very well, making it nearly impossible to reason about. As someone who canreason about CSS, it really just comes down to a lot of trial and error. Constantly encountering new layout requirements, new content use cases, new device/platform scenarios and combinations, etc., helps you form a sort of mental model of the spirit and philosophy behind CSS in a way that makes it a lot more predictable and manageable. Using architectural guidelines and pre-processors certainly helps though.