Modern CSS is magic

A look at using the min() function and a logical property for our margin to create a nice, simple container.

#Shorts

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[connoremerick]

“We can simplify that”

*complicates that*

[mateusvahl]

Still like the padding, I find it more explicit and easy to debug.

[KevsBitsOfDesign]

Each to their own. I actually think the longer version has a much bigger advantage for very little cost but it's always good to see what can be done. Thanks for the videos.

[mdoerkse]

CSS is basically like learning the right phrases for magical incantations.

[ivanjermakov]

The first solution was more intuitive and easier to read, there was no hidden behavior that you should know about. Shorter code does not mean it's more readable.

[michaelkilbane]

The two examples don't do the same thing. The first has a 1rem padding on the interior of the element while the second has an effective 1rem margin on the outside.

[Mikasks]

I’d scream my lungs out if I see this shit in production.

[artursvancans]

So we reduce the code by 2 lines and reduce website compatibility with older browsers by 50%?

[dyto]

That's not a simplification. That's obfuscation. Harder to read and understand for other devs.

[TheRavenCoder]

You should always prefer readability over brevity.

No matter whether it is a corporate project or an open source project, you can't assume you'll be the only one to read your code, and your successors will thank you if you're code is easy to read and this easy to maintain.

For production code, optimizers and minifiers will almost always do better than a human, and should be part of your CI/CD pipeline.

[sammy]

Ngl I wouldn't call this simplifying, the first i can easily read and understand, the second is much more complex (and not that much shorter)

[acorgiwithacrown]

So, it went from 4 lines of clear and readable code to 2 lines of more obscure code?
Modern CSS may be magic but its also going in the complete opposite direction of modern coding standards.
Except JS, they're heading in the same direction.

[OliveDoctor]

At the beginning, everybody just told me "Go ahead and learn HTML and CSS, you should start learning them before anything because it's easier". But damn, I have a hard time fully understanding and using CSS on my projects. I guess I have a closed mind to the way CSS works. It really holds me back on stuff that should be simple

[SOLVANSMARTSOLUTIONS]

With you on YouTube, I already feel like I'm a master of CSS. Now I'm in love with CSS. Sure you wanted that

[mrjack]

I would probably punt a developer out of a window if i saw that in a pull request.

[seananderson]

Something I learned in high school.
While it can be fun and challenging to do more with less code.
Often less code means more confusion.
This would have been novel in the older days, and maybe it just wasn't a good example.
But to me, I would rather have more code if it was easier to maintain.

[lukaswithakay]

That was a very unfortunate pause after “come”

[emmm_]

I really enjoy implementing the things I learn from your channel in my work, margin-line is MARVELOUS

[nomadshiba]

i like to make padding smaller more and more as the screen gets smaller
with clamp

[kjul.]

I like the first version more. I look at it and understand what is going on in a second, the second one is harder to read and debug imho.