The problem with shorthands in CSS

Key Takeaways

shorthands like margin padding and background are fantastic because they let us be lazy and write less code to get the same thing done so we can work a little bit faster but despite that most of the time i'd actually advise you not to use them hello my friend and friends i'm so glad that you've come to join me for yet another video and if you're new here my name is kevin here at my channel i help you fall madly deeply in love with css and if i can't get you to fall in love with it i'm hoping to at least help you be a little bit less frustrated by it and one of the best ways to be less frustrated with css is to write more maintainable code so let's jump right into the code and we're going to start with this example here of why i think you shouldn't use shorthands we'll see when shorthands are actually a good thing as well as my favorite shorthand that actually overcomes some of these problems so let's start off here where the this is sas so if you're not really super familiar with what this looks like don't worry too much but here i have a background image and we're going to come in and apply a background image regular css and it should give us a background right here where i have this dark background and um it didn't work let's refresh it still didn't work hmm what's going on here well what's going on here is i used a utility class to set the background here which is my inverted and this utility class is my background and here it is my background color and verse again don't worry let's just come and make this like 333 so it doesn't look too fancy and see it's updated there and i have this color coming in but my background image is not and that's because this css is coming in after the other one they're both a single class selector their equal specificity whatever comes after wins and this background shorthand well it's actually doing a lot more than just setting a background color because if we come and we look in here there's the background let's make this bigger so we can really see it and there it is so we have our background right here you can see it's setting the color but it's also setting a whole bunch of other things to initial including my background image so my original background image right here is being overwritten it's crossed off because this is being reset to initial and what that means is i should have come here and used the long hand of background color and now look at that my image has come in and it's working as intended now another issue that can come up from things like this is when we're dealing with our spacing and you can see here i have some text that's center aligned but not um aligned aligned if you know what i mean um and that's because this text here if we come and look it has a max width on it of 45 ch just prevents the the line lengths from being too long if you've never heard about ch i'll link to a video in the description or there should be a card popping up as well and uh yeah so we're limiting the max width of this and that means the text is let's just actually on here we can just add a background of lime just so we can see it and you can see that it's centered within that 45 ch but the 45 ch itself isn't centered and that's actually true for up here as well um for both of these because my title here also has a max width of 30 ch on it so if we throw a background of lime on this one uh you'll see that it's much closer to this side of the page than it is over here and so let's turn that off and let's come and see how we could fix that so i have some spacing classes on here and right now there is some space underneath here with a margin bottom two utility class that i've created and i could delete that and hit save just so you can see it update and you can see it's glued so i want to keep that space i'm going to hit my save there but for both of these we do want to also have them centered right and i have another utility class we can see that right here of an mx auto which is just my margin 0 auto and if i come over here i can write mx auto and this is just a common name so that's why i'm using it here for mx auto mx is for the x-axis and hit save on both of those and it will center them but you'll notice the space that was in between them has disappeared wait why why is that space disappearing once again this is short hands coming to bite s and i have an mx auto and a margin bottom of auto and if we go and find that we can see here that my margin bottom is well it's set to a margin block n so we don't actually see it being crossed off and i'll explain what this is in a second if you're not familiar with it but you can see here that my margin zero auto is forcing the zero on the top and the bottom which is overriding that space that i originally had so if i turn this off that space underneath comes back and then that space disappears i want to have both of them so how can i do that well let's come into here actually let's just refresh that so let's come on over to my spacing and one thing is i could just make sure that this came before my this is the one creating the bottom thing so i could you know order my css but i don't want to have to worry about what order things come in i could just come here and do a margin left of auto and a margin right of auto and while it's more verbose you can see that it's now working because it's not overwriting the bottom margin that i've added to this element right here now one shorthand that we could actually use in this situation if we wanted to is to use the margin inline and put auto on that and nothing will look like it's changed because nothing has changed because what margin inline is doing it's a logical property that is only applying to the inline axis or you know mx auto it's applying to the x axis now it is a logical property meaning if we were to do a left to right or right to left language it would apply it's both the left and the right but if ever you had a vertical writing mode it would switch a little bit like flex direction switches but that would sort of be what you'd want to happen anyway and this is one of those short hands i really really like because it means i don't have to touch when i was because when i was doing a margin zero auto i was saying zero just so i would have nothing i wanted like i don't care about that i just want the auto on the left and the right well this accomplishes that and it does a really good job of it and of course you might want to be wondering what if i only want to target the top and the bottom well that's where we do have the margin block and so margin block if i did a say 10 pixels that would be margin top and a margin bottom of 10 pixels it would apply to both and then we have a margin block end which is only on the bottom and a margin block start which would only be on the top if you'd like to know more about logical properties i have talked about it in a video before and it will be linked down in the description and just continuing off of there you see the i have these cards that have some like a hover effect on them which we can turn off on mobile um but with that hover effect i'm using some positioning absolute and that's where my favorite shorthand property comes which is on my cards here and you can see i have a position absolute and right now they're set to a bottom of zero and for the moment i am going to turn off the transform uh so they don't actually disappear just so we don't we can just see them all the time on there and instead of a bottom of zero let's just do an inset of zero an inset is a shorthand it's a logical property for top bottom left and right and you can see it's covering my entire one because they're all set to zero what's interesting with the inset shorthand it's the only shorthand that allows you to explicitly omit properties and i know like say you have a font shorthand like you don't have to put them all or if you have the background shorthand you don't have to list them all but with inset you do have to list them and you can do that by using the auto keyword so i knew auto for the top and then zero zero zero and the auto in this case is is as if i didn't declare it at all so if we do that it goes back to how i have it because i'm not declaring the top but i am declaring the bottom right and left and that sort of leads us to when i think you should be using shorthands which are in the cases like here where i want both the left and the right or maybe you want to just use the margin shorthand and you need to declare all four sides so of course if you're doing all of them are a border you're using your border shorthand because you need a border on all the sides the shorthand makes a lot of sense but especially the font property and the background property they can actually cause so much more trouble than they're worth because and even the font one unless you know the specific order things need to go in it's kind of annoying whereas the border one at least at least if you're setting a border you can just sort of mix it up and it doesn't matter what order things are in and while some of these that i looked at you might be going kevin i'm never i've never run into that it's not going to be a problem if you're always using shorthands i guarantee you one day it's going to come back to bite you and you're just going to be like oh and then you sort of have to go back and fix your code and declare things you need to be declaring don't use properties that add extra declarations to what you need that are sort of hidden away within the shorthand because they do come back they do cause you issues and if you're curious about the project that i was working on in this video it is actually part of a new course that i'm working on called beyond css if you'd like to sign up for updates as that course launch approaches the link to it is in the description just below and during this video i did mention several other videos so if you'd like to check out any of those there is a playlist that has them all right here or once again the links in the description and with that a very big thank you to jan johnny stewart and tim who are my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome