CSS Mistakes Every Junior Developer should Avoid | clean-code

Key Takeaways

so if you're probably wondering how can I write clean senior CSS code and how can I avoid Junior CSS mistakes joint cleaner simpler and maintainable code so we all know that CSS is hard has a lot of properties a lot of stuff and it has changed and updated throughout the past couple of years many many times and brand new stuff and stuff got duplicated and new stuff got introduced and so on and so forth so what are the junior mistakes that you should avoid to pick better CSS developer so the first mistake is using absolute size in CSS if you haven't already seen a topic around the internet Twitter or somewhere else about whether to use em versus rem or maybe like I want to do oh I don't know should I use pixel versus REM have you ever wondered why people are actually recommending us to use REM as CSS developers absolute size which is pixels so this answer on stagger velocity sums are always a really good answer and it's very fruitful and it's very concise and it has like all the brief information that you would need to be convinced to move from pixels to REM but for the straightforward tldr answer is you need to use REM instead of pix you won't regret it it's going to be way much better for you in the upcoming feature so if you take a look on the mdn documentation in here about what is REM in here it tells us that this is the fun size of the root Elms and it's actually going to give it a relative and here em is actually the fun size of the parents but instead of using the font size of the appearance we use the font size of the root element so in order to see how this is better visualized like move from pixels to REM and why REM is way much better so for example we've got this pretty simple page in here that is like a blog post where you got a title you got a banner image in here about this article and you got you know the contents of the article in here like the paragraph everything looks pretty good because this is actually a big screen so you're going like a you know canvas to work with and I got a lot of pixels to work with so this is working fine and if you look into like what all this Styles we have in here exclusively I have like for example this title so this makes no sense for you for example you got style this is you can take this as a simple CSS all I'm doing in here is just losing the sound component to put that into react so if you're not even with this one there's still going to be valve for you as a valve CSS so everything you see inside of this here it's just like a normal CSS you put in inside of a class for example you got a tunnel who's using it I send the font size using pixel font size equals 60 pixels if you go to the paragraph I'm doing the same thing so I'm doing font size equals 33 pixels with a long height as well so it's cursing here I'm using absolute sizing and absolute font sizing in here particularly of like pixels and I'm not using Orient so for this one if we try to do some responsiveness and try to resize the canvas we're trying to resize the window I'm working with or the browser as Christian the title actually doesn't fit it makes like you know it looks like it doesn't fit in here and it's still huge and gigantic for something like a small like a you know a mobile device and if you look like for example into the constant excuse me the contest is way much bigger than the banner and they're like crushing it and they just actually resourcing when we resize the window so there's like no responsiveness whatsoever so in that case what you need to do is actually go to like do oh media query and you want to set a media query I want to just copy the fun songs and I go through oh I want to resize the font size every single time and so on and so forth but for REM it can actually save the day for you and it can just all this rubbishness from your code and make it super easy now for using REM you need to go to the roots any exclusive I'm doing Global Styles which means I'm putting like a root you can use the same thing as an HTML or a body so I can do like HTML in here or a body but for the roots or the common roots in here is actually the roots elements that represents like you know how it works in HTML5 so I'm sending the font size or the real font size to be 16 pics and here I'm using pixels because this is where actually you set the root signs with the refund signs for all the other elements to inherit from I don't recommend you playing around with this one just leave it 16 pixels it's way much better now what I'm doing in here I'm doing media queries so every single time I got like oh I by going to a tablet or a laptop that is that has like a smaller screen and go to the font size and make the font size smaller and that is basically like for a tablet a mobile and so on and so forth and now if I switch to REM so I can come in this house for example we do font size 2.5 REM and one REM equals one unit of the font size which means one REM equals 16 pixels so CSS and the browser is going to do the calculations for us automatically depending on the route so I'm going to do the same thing in here for the paragraphs I'm gonna go to font size I can comment out with this pixels I don't want now if I go back I try to resell it as close in here when it resize the tanks and the tornado actually Resources with Excuse me now I'm like kind of mobile or something I can zoom in and it's still pretty readable because that's what a Mobile screen would look like everything resources when it just go down and it looks pretty good the second mistake is not using the not pseudo class so if you're not familiar with the not pseudo class it's actually a CSS that allows you to do a negation on a specific selection and actually these only set links the opposite of that so let's so for example let's say we got these icons in here for example we're just doing a website you want to show your socials and we just like have some icons or anything else that is aligned so let's take a look into this scenario where for example we've got a set of icons or something and you want to display the border so the Border writing here I'm sending the borderline on every single icon so I'm doing the Border writing a sqlc but the last icon it always has an issue because it always does the border right it doesn't know if it lasts or not you know it just like adds the portal brain it doesn't make sense the style looks or the design in here in the layout doesn't make any sense so how can we remove that or how we usually remove that in CSS so we use something like this for example I'm doing here as I said before the border right and two pixels already gray so to remove that I go ahead and use the last child selector so I do a launch child I'm just using that one I'm just saying it's pretty much the same thing I'm doing an end in here this is because I'm I'm just like using sound components and everything but this would be the same as doing like for example icon and doing just like last child of icons something like this and here I'm just resetting them just doing borderline right equals 9. so this is the old ugly way where you have to set the Border first then unset or reset the Border layer on for the last child only and this still actually works it just removes the border right and everything that's good but the code is actually too foggy and especially this is actually a simple example but imagine you have a lot of properties that you need to resend and go through it makes the code duplicating it makes it super hard to read and go through and especially to maintain in the future Now using the not pseudo class in here it comes in and rescues the day for us so you can do not I'm doing the last job so I'm just doing not the last child so I'm gonna apply this border right to every spot The Lost Child so I'm just doing Not Lost Child in here I'm just giving it two pixels solid gray go back in here there you go that works the same thing boom now the code is a little bit more simpler as it was before just type in a single line of code so yes it makes a lot more sense right the third mistake is not knowing and not using the CSS reset on your project so the goal of the CSS reset is actually to reduce the browser and consistency clean standardized across all browsers so for example if you haven't go to like Chrome Safari and Firefox they have a slight changes in style and CSS where sometimes like a browser displays the button you need a little bit gray and the other one just does margin on top the other one doesn't and so on and so forth I mean nowadays in like 2023 and Beyond there is way much less inconsistencies than it was before this article has been released in 2007 you can clearly see like how long that was and how outdated that is so there's actually the style sheet that you can copy and actually use but I don't really recommend that there's actually a very very old one and most browsers actually have changed and you need to adopt now the modern one is actually from Josh so you can go you can see his blog here and he has like a really amazing blog so the CSS reset for this one actually performs his endless use this reason it uses cross browsers and across different projects that he works with and I absolutely agree with his resetting here and the style she is providing there's actually the style sheets it just makes some stuff standardized like the before after like box sizing it just sends the Box on for every single ailments he does zero margin for everything like for all elements height of 100 for HTML body and just like resets everything he just puts everything to the ground and makes everything kind of shared in vanilla for all the browsers so simply here to use that one just put that instead of CSH just to copy paste that one this is the reason I said before it's pretty simple it doesn't have a lot of stuff because browsers now are more of like a unifying and they overview in the same style and the same kind of predefined CSS Styles across all the browsers actually I would recommend just going and putting that out in a CSS recent CSS file on here and you can go into inside of your CSS file for example the indexes in here whatever and make sure to import that one on top and everything you're going to put afterward is just gonna override that reset so you can apply your style the fourth mistake is not in using Tailwind CSS in 2023 and Beyond if you've never used tables before you may think this tip is kind of silly but Contour wise it's really important Taiwan CSS is a beast and whether you like it or not Taiwan CSS actually dominating the CSS word and it's making lives of developers like me and you way much easier plus it's improving the developer experience and how our UI is robust and easy to create so for example with something like HTML where you got like a bunch of classes combined together and all of these cards are actually predefined using team with CSS it can make things look something like this excuse me this design has been created in all of this using this one without putting a single line in the standard vanilla CSS many companies teams and literally everyone's going not support team once you slightly and they just sharing why they use things they migrated from the vanilla CSS and all that cool stuff so for example to give you a better point of view of wanting one since it's actually such a really powerful tool so for example let's take this landing page that you created using Tailwind CSS for example exclusion you got some iPhone kind of picture that looks really nice and got some really cool text on top in here enter your email join the wait list and got cool photos were in here all of them has been created using Tailwind CSS so this is is actually what it looks like right now using table CSS creation here for example on a full wave I do minimum full I want a background why to just do background wise and if you hover over if you're using vs code just tells you exactly what this is in vanilla CSS like a background color it just tells you exactly what's going on and a bunch of wants to sell excuse me all these class names are Tailwind predefined class names they can create your view ons way much easier and super simple so if you compare this one the team win CSS version to something vanilla CSS and how it would look like vanilla standard CSS so in standards users this is actually what you would do so you just create a class every single time you're gonna do oh minimum width 100 do content you're gonna go through all accounts it's for example let's take this for example where you got a title in here let's give us any individual sales I need to go through margin top and set the margin font size REM and E2 figure out all of those but in the contrary if you go back to our Channel CSS and you go to my title you see this is the H1 this is the title the class name in here all of these class names actually make it super easy to read for example margin top I'm gonna give it a margin top four is going to be one REM the best option of them all actually allows you to do responsive design right into your Tailwind or right into your classes without writing media queries so for example this SM in here is going to do oh this is going to be a media query that's going to only apply the text 6L when the minimum width is actually 640 it's Chris in here and it's actually going to apply I like font size and Loan heights and and everything from that it makes things super easy and again if you compare this to the actual CSS where I have my media careers in here for example the title I need to do all this like minimum width I need to do media queries I need to add media queries and the last mistake in here is actually not promptly using the image aspect ratio so for instance if you take for example these products where we got like a bunch of or like you know a couple of images of products that are lined up so if you focus a little bit on these images they look fine right no you're wrong if you just focus on the images if I can zoom in here for you excuse me for example this image the iPhone in here and the whole image is kind of like stretched so let's say for example this image has an aspect ratio of 16.9 where this image actually is stretched out and it doesn't fit that aspect ratio it doesn't respect or maintain that aspect ratio and that makes the image look super horrible and it just doesn't look like you know the real image that we want to see so how can you actually display images in the real aspect ratio and tell CSS oh I want to make respects the aspect ratio and make sure that it actually does work fine so there's actually a cool property sales property called the object Fame that allows you to do that for images and videos and if you're wondering Warren is the kind I use for this one yes it's actually available across all the browsers since like 2015 most of them so yeah so you're pretty much aware that oh should be good enough obviously this isn't guaranteed for IE or Internet Explorer so for example exclusive this is actually your image I'm saying with to be 16 rem or something but I'm not using the object fan so if I do object fan and set it particularly to cover so cover will make it respect the aspect ratio and it will clip anything that goes out sign the aspect ratio out of the view of that image so if I go back in here excuse me it looks like a little bit more zoomed in sort of image but it's way much better now because it respects the aspect ratio and he tells us oh this is Oppo excuse me like for this image too so what you want to do is actually increase the width in here for example you can make this oh 25 REM they go back using it starts getting way much better and starts like you know getting most of the details that are happening if you increase this one a little bit more yes it's going to look way much better as you can see now I'm getting the image in the real aspect ratio I'm not getting any Clips off kind of details of the of the image or something and everything looks super good anyway guys thanks for watching hope you guys liked the video if you want more videos like this let me know catch you hopefully in the next one