Make Sense of Box-Sizing in CSS (and avoid this major mistake!)

[@youferret]

Great lesson Dmitry. I wonder how many coders were wishing they had seen this earlier.

[@dmtrmrv]

Yeah, true. I definitely made this for my younger, junior self.

[@pappapez]

Thanks! This is insanely important stuff. And you explain it so well. You almost make css make sense!

[@dmtrmrv]

Thank you : ) I swear it does! Well, most of the times.

[@romanperera]

that "OMG" reaction to the text-input's width was absolutely epic! 😎✌

[@dmtrmrv]

Well, that was genuinely how I felt when I first started learning CSS, lol!

[@romanperera]

@@dmtrmrv so true, i still get surprised with how some styles work, even after im 100% sure its correct 😅 then, i find my own idiotic mistake 😁

[@ZakBazzinga]

so helpful thx king 👑

[@dmtrmrv]

Glad the video was helpful!

[@MissEAG]

Hi, I have been really enjoying your teaching style and look forward to your new videos. I have recently been learning about partials folders in Sass and learned about creating variables in a colors folder for example. I realize that isn't what you've done here as you've listed colours at the top under the :root tag?... not sure.. maybe in a future video could you talk about when to use this list of colours that you have listed in double hyphens vs using partials folders and using $black = #000000, with the dollar symbol, for example. Maybe I'm missing something fundamental, not sure, I will also look it up. Thanks!

[@dmtrmrv]

Hi @MissEAG! Thanks for your kind words and for watching the videos! You're right; I don't use separate files to store variables in my demos and stick to vanilla CSS rather than Sass. My main goal is to focus on a specific topic or pattern that can be applied across various contexts-CSS, Sass, CSS-in-JS, and so on-rather than on the tooling itself. In real-life projects, it often depends on the project, but I would likely put variables into a separate file, which is generally considered a best practice. Regarding Sass, I stopped using it a few years ago as CSS began to rapidly evolve. We now have features like variables, nesting, and other enhancements, so I personally don't see the need for Sass since it adds another tool and dependency. I prefer to keep my projects as dependency-free as possible (but with as many as necessary). However, I understand some engineers still use Sass, and if it works well for the project and the team, that's perfectly fine. Perhaps a CSS vs. Sass video is something to consider for the future.

[@Tesfamichael.G]

Nice lesson!

[@dmtrmrv]

Glad you enjoyed it!

[@onelook1870]

How to make font-family inherit for form elements if it is set in body?

[@dmtrmrv]

Hey @onelook1870, thanks for your comment! I'm not sure I fully understand the question. The video doesn't cover that, but I'll happily look at your code if you happen to have it on CodePen or Github.

[@onelook1870]

Form input field doesn't inherit font family set to body. We have to set again. body { font-family: "Poppins", sans-serif; } We have to set it again for form fields.

[@cuemaster-]

@@onelook1870 That seems to be right, but let's wait for Dmitry confirmation. Thanks for the input (no pun intended). 🙂

[@douvogiannisgeorge]

as always explain for humans ;) cant wait for more!

[@dmtrmrv]

Thank you! Glad to hear the explanation was easy to understand!