Are we over-engineering with modern CSS?

Key Takeaways

So, this was the starting code. A wrapper. And this is the code that I said we could turn it into using modern CSS. And this is what got everyone so mad at me. We're in like a pretty knowledgeable audience, so you might look at it and immediately know what it does. A lot of you might be looking at it going, "I can figure out what that's going to do." And other people are very confused right now looking at it. Uh and that's kind of normal. It's It's weird, right? min(100% - 4,60ch) Strange. So, was I providing a solution complicated in a way that provided no extra value? Imagine you're a junior developer. First independent task you get at your job is oh, we need a wrapper. Uh we already have a wrapper. We need a modifier on there. You just need to make it 200 pixels wider to fit this new design that the designers just handed off to us. Can you go do that for us? You're full of confidence. It's the easiest thing in the world. Of course, you can do that. Fire up VS Code, get into the code base, go look for the wrapper, and you find this. And all of that confidence is immediately drained as you have no idea what you're looking at. So, yeah, I guess they were right. I overcomplicated a familiar pattern, made it harder to read with no extra value. Came very close to taking the video down. But there was something about it that I liked in that video, so I didn't pull the trigger right away. I said, "Maybe I should do a follow-up video to that as a long-form." Shorts, it's hard to go into context. But I want to put a bit of a modern twist on the idea of a wrapper or container, that type of thing. Uh so, I started with this. It sort of took that idea of some modern CSS. I can include the logical properties in there, explain what those are to people. Uh and I can do this fun thing with the custom property where it's using a fallback in sort of a way that people might not be too familiar with, but it's not going to be so much that people will get mad at me. And my idea with this is you could do easy modifiers. And that was the twist I had on how the the wrapper or container would work is that instead of it being like fixed, you know, 900 pixels, 1200 pixels, you could just modify it and make it in an easy to read way. Default max width minus 60 pixels plus 120 pixels or whatever. Don't know if it was a good idea, but I had fun playing around with it. And I was like, maybe this would be a really nice middle ground to sort of find somewhere I could teach some fun stuff with it. It should be good enough. I prepared the whole script for that video. I never recorded it though because there was something nagging me a little bit. And I was like, >> [sighs] >> if I'm going to reinvent something, I should probably actually reinvent it. And if they're accusing me of over-engineering when I write two lines of CSS, um let's try and show them what over-engineering actually is. Uh so, this is sort of the same thing as the other side. It keeps going.