Josh Comeau - Secret Mechanisms of CSS

CSS can sometimes feel like a very inconsistent language. Why is this snippet I've used countless times suddenly behaving differently?!
It turns out, there's a lot going on under the hood. CSS is a collection of complex layout algorithms, with all sorts of hidden mechanisms and implicit behaviours. When we take the time to learn how CSS works, the language starts to make a lot more sense, and the unpleasant surprises become much less common.
In this talk, we'll dig into common misunderstandings about CSS, and see if we can fill in some gaps in our mental model of the language.
-------------------------------------
If you love CSS, have a look at the CSS Café - Online Meetup:
www.meetup.com/de-DE/CSS-Cafe​
/ css__cafe​
// For more CSS tricks and tips visit our blog.
Layout with CSS: 9elements.com/blog/the-devils...
Gradient angels in CSS: 9elements.com/blog/gradient-a...
CSS border radius: 9elements.com/blog/css-border...
+++ About Josh Comeau +++
• Started building for the web in ~2008, have worked at organizations like Khan Academy, DigitalOcean, Gatsby Inc., Unsplash
• Runs a blog, joshwcomeau.com, which teaches a bunch of CSS/JS/React stuff in an interactive format
• Left my job last year to start my own business, creating online courses for frontend software developers.
-------------------------------------
// Follow 9elements for more digital content.
Instagram: / ​
Twitter: / 9elements​
Blog: 9elements.com/blog​
LinkedIn: / 9elements-agency

[@_mzkr_]

This guy has communication sorted!!! The fundamentals are so important and He made understanding these seem effortless.
I have been using CSS for years and yet this video had so many lightbulb moments for me.
Mega props to Josh!

[@melissabridi5131]

now that i've progressed beyond the basic CSS stuff, this was super helpful to demystify some of the things I use but get sometimes unpredictable results. great talk!

[@yesbenio]

Thanks for this Josh. I've been building sites and web apps for over 20 years, and have developed an intuitive understanding of CSS and the browser algorithms which interpret and render the code we write, which you describe at the beginning of this talk. It was really great to hear and see your insights into what's actually happening 'under the hood'. Even after all this time I still learned a few bits and pieces, especially around Flexbox. Your visualisation of justify-content and align-items and how they work on the browser's model of axises was especially helpful. Also, those insights into position and stacking contexts helped clarify what I'd already assumed and intuitively understood.
So, thanks again, great video.

[@alanmurray4011]

Josh is a joy to listen to and learn from.

[@bnortman68]

Thanks for the fantastic presentation. I've learned a ton!!!! Josh, great job...

[@MrRobotUy]

This is awesome! Thank you so much to share this tips with us for free! 😍😍

[@languafe4111]

Very interesting and enjoyable talk, thanks for sharing!

[@dpwoficial]

Very enlightening! 🤩

[@allthatyouare]

This is a great refresher, even after doing css-for-js 😅

[@edwingarcia5043]

Super cool talk

[@Dipenparmar12]

Great information 😉 josh.

[@antoineweb1]

shorthand properties such as flex cause consistent, proven, unnecessary confusion for most developers, as even Josh Comeau faced that problem. It has literally more downsides than good sides and should be considered malpractice. CSS is the only language encouraging obscure naming patterns for the sake of brevity.

[@gilgamesh981]

Have you seen perl

[@hellothere8547]

Informative!

[@codeaperture]

Josh is great 💯

[@Dipenparmar12]

Confused but amazing digging. 😶

[@icantexplainmyfeetjuliecon3522]

I run a WP website using a new theme. i want to progress and was ready to register with WP SHOUT, they didn't recommend i do it without knowledge of css or php but where would i start with that?

[@arshad1781]

Nice

[@burntcustard]

Great talk! It's nice to see someone like myself, who could ramble about CSS all day given the chance.
My only nit-picks would be a) That there are loads more properties that can create new stacking contexts. It would be hard to remember every single one of them, but it's good to be aware that there are more. And b) it sounded like you might have a little confusion over "0" - as in, 0px vs 0% doesn't matter, the unit is even "optional" and is likely to be minified away. The way I like to think of it is "0 apples is the exact same as 0 oranges". Of course you might want to specify units to (potentially) make code clearer, e.g. if you were going to transition to 50%, you might want to write the initial value as 0% for consistency. Perhaps something to add to the next talk of the same theme in the unlikely event its new to you ;D

[@ebben23]

I thought width is outward(children to parent) and height is inward(parent to children) according to josh, but when html, body 100% is given an example, he iterate it as children to parent? that confused me