 Hi there my friend and friends thank you so much for coming to watch yet another video but just in case you're new here my name is Kevin and here at my channel I help people fall in love with CSS and if I can't get them to fall in love with it I'm hoping to at least help them be a little bit less frustrated by it and if you clicked on this video there's a good chance that maybe you're a little bit frustrated with CSS and in general that's very normal because once people get past the very basics of it they run into some of the added complexity that comes along with it and it just becomes a bit of a roadblock they start to struggle with it they get frustrated with it so today I'm going to explore five different tips on how you can improve at CSS and get beyond those frustrations and maybe fall in love with it just a little bit so my very first tip is do not let CSS trick you into thinking that it is a simple language yes it's just a declarative language with property value pairs color white we get white text background black we get a black background that is nice and simple but that does not mean that CSS is actually a simple language once we get beyond those very basics and you know maybe you start feeling like a little bit of a hacker when you start using hex codes instead of named color keywords but when you actually go into the like the real world of like creating a layout and you're using a display flex or display grid that opens up a whole new complexity to how CSS actually works and that's because we're no longer dealing with single property value pairs but instead we're dealing with combinations of property value pairs and that is completely different for example when you do a display flex that opens up over a thousand possible combinations of property value pairs that you can use just to control how flex boxes are working and so like there's this hidden complexity behind the hood on how things are actually working so while it can seem really easy at first do not fall for that trick there is a lot of complexity and you should approach CSS knowing that it's not going to be easy and because it is not going to be easy and because it actually is maybe a lot more complex than you first thought that leads me to my second tip which is maybe go back over the fundamentals when we're first learning a new language whatever it is we're learning a lot of different things at once we're learning the syntax of the language with CSS in particular we're learning a ton of properties and a whole bunch of values that go with those properties we're learning about the units that we can use as well there's a lot of information coming at us just to be able to get things to work and then on top of that we're learning about things like the box model and specificity understanding how the cascade works there's a lot of other things that we're learning about but it's hard to absorb all of that information at once so what we usually do is we absorb the stuff that we really need to know I need to remember those properties and the values that go with them and that means I can sort of put these other things on the side or I can just come up with very generic rules like let's use a class selector for everything so I don't have to worry about specificity that doesn't mean that you shouldn't eventually go back and revisit what that is now the other problem with this is you might be going Kevin I know all of the fundamentals don't worry about it but yeah you'll probably be able to know that there is specificity and maybe some of the impacts of it or maybe you know what stacking contexts are and you understand that side of things a little bit but a lot of the time it's more terms that we're aware of we know there's a box model and we sort of know the bait you know it's margins and paddings and that's good enough right so we know all of these terms we see them or yeah I recognize that that's fine but we don't understand the greater implications of it whereas once you know those terms you've been writing CSS for a little while when you actually take a step backwards and you go back over some of those fundamental concepts so many things can fall into place because you might tell me you completely understand the box model and how margins work and all of that and then you run into a situation where there's collapsing margins and you have no idea what's actually going on or you get really frustrated with it and you're using hacky solutions like a one pixel padding type of thing to try and fix it rather than working with them or understanding how they're working and it results in a lot of little hacky code type things and I've been there I've done it I know and for me I rediscovered a lot of the fundamentals because I started teaching so I had to go over the very basics to teach those to my students and then I was like oh my goodness that makes so much more sense now I wish I'd done this five years ago and I really see a lot of people just gain so much understanding of the of how the language is actually working and all the different connections between different things that are there that they're just not aware of because they think they know what the fundamentals are because they covered them a long time ago and I'm not going to go and cover that but by going backwards you're not actually going backwards what you're doing is filling in knowledge gaps that you have and those knowledge gaps can really hold you back and actually knowing how powerful this is and having seen it for myself and having seen other students go through the same thing when I was helping them that was a big motivation for me to create my course CSS demystified the whole point of that course is for people who have been writing CSS for a little while but just haven't got past that they're feeling a little bit stuck or a little bit frustrated with it still and it's to go back over the fundamentals but not in the way you cover them as a beginner but covering them with the knowledge that you know what you're doing already and you can already write some CSS and more about understanding the impact of what those have on how we can write our CSS and then also covering things that are fundamental to the language but are talked a lot less about like containing blocks and formatting contexts and just understand how everything fits together and works and it just helps you write CSS with more confidence when you put all those puzzle pieces together and so if you are interested in that course it is linked down in the description but before worrying about that let's get on to point number three which is having the right mindset when you're writing CSS. CSS is a very unique language and it's different from other ones so if you're coming from a JavaScript background or a computer science background it's not going to work the way that you're used to languages working because in most languages well you can end up with very complex things going on at the end of the day they're basically in this situation do x in this other situation do y you know you're you're we could be changing state because we've run into a certain situation or somebody adds something to their shopping cart and we have to add that to their shopping cart and then we have to recalculate the total of their shopping cart and we have to keep track of how many items there can be a lot going on but it's all using no one values and no one's right there there's no unknown things going on whereas CSS is sort of all about the unknowns and I recently talked about this in my podcast which I'll link to in the description as well and I will go a lot more it the whole episode is about this the CSS mindset but it's about embracing the fact that it works with unknowns and that we don't have everything we don't have all of the information there and I'm going to link to another video too and I'd actually you know if you're into podcast check out my podcast but if you have nothing like if you're going to watch one more video in the next week and you're someone who occasionally writes CSS stop this video even and watch the one I'm going to talk about now it's by Miriam Susan and it's called why is CSS so weird honestly like that video is she just presents it so well it explains you know sort of how CSS got to where it is today and why CSS is actually been created any way that gives the end user control rather than the person who's authoring the style sheets it's a really good talk check that out it's fantastic if you're going to consume nothing else that's the video to watch don't even finish this one go watch that one instead but then if you're gonna watch more than one thing maybe finish this one first and then go and check that one out but yeah the the main TLDR I guess in a way is we shouldn't be trying to make the browser show us exactly what we want we need to work with the browser and we need to work within these unknowns and sort of understand that things there's middle grounds and there's movement and you know we don't have this if this then that it's very fuzzy and then embracing that idea and working within that mindset really can change how you're approaching things rather than if you're coming from a different approach where you just need it to look like this and that's the absolute answer you're never going to get that and it's not because CSS is broken it's because it's intentionally made that way and it's because of all those unknowns from the screen size the resolution the color gamut the input device we there's and we don't know all of these things the user has control over those they can change their default browser zoom level they can change their os settings to force colors to be different or to change their font sizes at the system level as well there's a million things the user can do to take control and that's good because the user is the one who's consuming the content and we want them to actually consume it and if we try and prevent them from having those choices they're just going to leave and go to another site that actually works the way they want it to our looks the way they want it to so embrace those changes work with CSS work with the browser instead of trying to force things to be the way you want them to be or to work the way you think they should and a little bit in that working the way you think they should point is my fourth point which is don't limit yourself people do this all the time where they learn flexbox and that's a layout tool so they're using flexbox for all their layouts and then when they're struggling to get a layout to work they get really frustrated because that layout's not working how can I make this work this way because this is my layout tool and it goes well just use grid I don't want to use grid that's you know I'm using flexbox well I could do that in three lines with CSS grid why you've trying to force it with flexbox or vice versa it goes both ways there and then of course you get people why do we have two layout tools well why do we have 500 different types of pliers for you know pulling stuff out right you have your needle nose pliers you have bulky pliers you have bigger pliers smaller pliers you have a million types of pliers for basically pulling on stuff so like having two layout tools isn't that crazy is it how many pairs of shoes do you have and different types of shoes do you have you probably have dress shoes and outdoor shoes and running shoes and hiking shoes and we have all these specialized shoes for walking and basically right and like they're just something that we put on our feet we have two layout tools because each one has a strength and that's it which one has its own little niche within the realm of layout and it's not that bad I have to be able to make layouts with either one of them yes it takes a little bit of time to really get super comfortable with both of them but in general you can use like the basics of flexbox and the basics of grid aren't that complicated and can probably achieve like 80% of any layout you'd ever want to do and then it's when you start getting into a little bit more advanced stuff that yeah it can get a little bit more into the weeds for sure but that's the same as anything else and right now I'm talking specifically flexbox or grid because that's where I see most people sort of being very stubborn about their choice but you know this applies to anything if you're trying something and it's not working find out if there's a different way that you can approach it instead of just like layering all these solutions on top of each other fighting with the solution you're trying to and don't limit yourself to what you already know about the language and see if there's other things out there especially now with where modern CSS has gotten to things are so much easier now than they used to be don't be stuck in your old ways and a lot of these newer CSS features have really good browser support and might be a lot better than what you actually think so check the browser support and you might surprise yourself and be like oh I can use this thing that I can do in one line of CSS instead of using tons of JavaScript or forcing my way through some other strange way of doing it or whatever it is so just don't limit yourself to what you already know feel you know learn some a couple of new things and it might make your life a lot easier and one way that you can push things a little bit is my fifth point which is if you have a little bit of spare time and you like mucking around with stuff do some CSS experiments or CSS only solutions or play some CSS games even there are definitely some drawbacks to CSS only solutions you know they can have accessibility issues there can be performance issues with them but that's not usually at least when I create them and I know a lot of other people who do the point of creating CSS only solutions often isn't it's it's to see is this possible it's to push the boundaries it might take longer to do something but it's to learn what's actually possible and it's to see I can do that that's a really cool and maybe that solution isn't practical to print into production and that's fine but some of the things you learn along the way trying to create that are things that you could put into production and there's these little tips and little things that you just pick up while you're just getting super creative and trying to come up with like these hacky ways of doing something that all of a sudden you're making new connections you're learning new ways that certain properties work that you never would have thought of before and it just sort of opens up like these new ideas so when you are stuck on something on a regular production project you have these little tips and little ideas that you can use that actually are practical and actually are applicable to what you're trying to do and if you prefer to gamify stuff there's things like CSS battle as well where it's more about like yes an SVG would be a million times more practical to creating that but I'm going to learn a lot more about how box shadows work and how gradients work and how positioning works by trying to create these weird shapes and weird patterns and all these different things in these little CSS battles and then if you want to try and go for a high score you can start learning about hacky solutions on like reducing how many characters you're using or better ways of doing gradients and like there's so much you can learn by doing these types of things and they just tend to be a little bit of fun and you know not everyone wants to relax by coding you might want to go play a video game or watch Netflix or whatever but you know if you have 15 minutes to spare and you open up a CSS battle just to play around with it a little bit or you have a little side project you're working on of a CSS only solution I promise you you're going to learn a lot more about how CSS is working just by hacking away at things and mucking around a lot again it's not going to be something you put into production necessarily but it doesn't mean you're not learning valuable lessons from that on how CSS works and then I guarantee you you're going to think of things when you're actually working on something you're going to get an idea from one of these weird things you did one time that's actually going to help you have a solution to what you're working on and as a quick reminder please do check out that why is CSS so weird video honestly it is 100% worth listening and if you're more into podcast mode of course as I said my latest podcast episode was on the CSS mindset where I go much deeper into that topic so that's linked down below as well and some related videos and other stuff just go check the description if you want some other good videos on CSS basically and yeah I guess that's it so a big thank you to my enablers of awesome who are Johnny Tim Simon Michael and Andrew as well as all my other patrons through their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome