Improve your CSS by organizing your properties

Key Takeaways

are you ever hacking away at css you're trying to get something cool to work but it's something that's a little bit complex and it just involves tons and tons of properties it's one rule like one selector there one rule that you have set up with just like 30 properties going on everything's becoming a bit of a mess it's really hard to keep that organized because you're just trying to get it to work you hear a lot about keeping your css organized as like your css file itself but you're very little about keeping organized within individual rules and i think it's something that's a little bit underappreciated i've heard of solutions like alphabetical which to me drive me absolutely not in this video i'll look at what alphabetical is why people like it and what my approach is and why i like it better so let's go and dive in all right so let's say i'm working on this card here and it just it took a lot to get to work right i have all of this going on and this is just a big mess i have a whole bunch of conflicting uh properties here like it's not good so like how do we keep this organized as i said some people like to do this alphabetical so um you might be able to get a linter that can do this since i don't like alphabetical i don't have one uh i don't have i don't know if you can or not if anybody knows one just leave a comment down below if you think that is a good way to work i don't mind everyone's entitled to their opinion um but what you can do is if you do want to do it you can just select everything and this is going to cause a problem but you can open up the command palette in vs code which is shift control and p and then i can just write sort and then you have a choice of short lines ascending or descending uh interestingly ascending is the one that starts at you know it puts it this way around um so alphabetical uh top to bottom the only problem there is because these are on different lines it breaks it right so what i'm actually going to do is that exact same thing let's select all that but not my grid template areas i can sort lines ascending and then i can just grab my grid template areas and in vs code i can do an alt and then push up or down on my keyboard and i can get it to the right spot which is right there and now everything here is alphabetical so one reason that people like alphabetical is because of this where you can see when you have conflicting properties and this can be a nightmare if you have your display like it's set up differently the display grids down here you see flex stuff you're trying to change the flex stuff and it's not working and you can't figure out why and then a long time later you finally realize there's a display grid lower down that's overwriting it we have a background color that's not changing and you can't figure out why it's a nightmare so i get that it's also like a very easy way just to say like this is how our entire team is working there's no thought that really goes into it i'm assuming they must have linting they can do it um and if not you can do it the way i did where you can organize it that way and then it becomes very easy to find issues like that and the whole team can always have consistent css so that would be the argument for it my argument against it is if you have other things going on like if i want to add a pseudo element down here so i'm going to do a little bit of quick work on this really fast and you're going to see one of the issues that i have with it [Music] so i've added this like shadowy effect under here with a pseudo-element and one of the reasons i don't like alphabetical is let's say i took all of this and i do my sort um what it's going to do is now i have my background i have my bottom here i have my content like uh then i have like if i want to change my top left bottom right because i did a position absolute well like then i have to go like height and then i'm sort of like singing the alphabet to like find my h and then i'm like right a b r and r is going to be close to the bottom and then okay it's not this huge thing it's not going to take that much thinking but it's just the fact that like if i want to be playing because usually if i'm playing with my right and my left i'm doing all of those things at the same time i don't have to be jumping all over the place in my css do it and again you're probably not writing your css that way it's getting formatted afterward but if you come in to make a change for me this is a lot of cognitive load to find the properties that i'm looking for and then especially if you need one change it's not so bad but as soon as you have to make multiple little changes to it i find this drives me absolutely crazy kevin from the future here uh so before we go into my method and why i like my method more i do want to say i started a conversation over on twitter about this a lot of people are really big advocates of the alphabetical one and i don't want to make it sound like they're wrong by any means through this video i'm just explaining how i like to do it and why i don't like the alphabetical but it seems to be the bigger the team and the more people that are involved in the css it does become a very common way and popular way to do it so what i've done is i've linked to the twitter thread down below if you want to investigate it at all and i've also put a link to an article that dives into the benefits of the alphabetical order just in case you want to get that side of the argument though that out of the way let's go and jump into how i like to do it so i did take a bit of a purposeful approach to how i organized this and what i try and do first is the content's a little bit different because this is a pseudo element so usually the first thing i like to do and i guess content could fall into this but i usually like having my display stuff first so display stuff now i don't actually have any display stuff to worry about here so we'll look at more of that in a second so after my display stuff i like having my positioning stuff so positioning stuff would be all of these things here right up to there so this could also if i had a z index on there let's say i had a z index of 5 or a negative 1 or whatever it is that all gets included and that way i can always do this where i have my position first my top my left my bottom my right whichever ones i need and then i have my z index at the end of that and then i go to my next grouping of content my next grouping of content i like doing box model stuff uh which would include your background because for me background padding they're so related i do include my background in there as well as width your height if you have borders uh you could put border radius in there if you wanted to that's optional i like doing that in a different category but height your your height your width your borders your padding your margins all of those types of things all get put into your box model stuff and again because i find that background colors are so related to that i put it there now i don't have any here but let's just do my typography uh which i usually would have then after that i'm gonna have my manipulation stuff which are things like transforms filters opacity things that i'm like modifying what it look i'm moving it i'm putting a blur on it other stuff like that and then i'll have my at the very end my miscellaneous the miscellaneous could be things like border radius box shadows just something that doesn't really fit into the other categories that you have there and for me this takes a lot of the cognitive load off of things and i don't put comments throughout i wouldn't do that i just like generally organizing it that way so if we look at the same thing for this grouping here so i find this actually has the same benefit of doing it alphabetical so if i have my display stuff first i would have my all of this display things that are here they would all get grouped up in that display stuff area right here so even if my display grid ends up being uh down here so i have my display flex then some flex stuff and this is why i call it display stuff because it's not just my display property it's things that are related to that as well um so i would see right away that i have this conflict here and then i could go through and delete the one that i don't need anymore so because i am grouping them logically by what i'm expecting them to do you still have that advantage of being able to find repeated things and you can get rid of it uh if you need to um so my display stuff then i have my positioning positioning which i don't think i have anything oh i'll bring this one up this is an exception that i i will make where my position relative if i only have a position relative because i have a position absolute somewhere i often have it as my last line just because i throw it in there but if we wanted to be consistent we could throw that there then we have my box box model right so then i have my background now here i am everybody i guess could have their own thing on how they like to organize it i'm actually going to move all of this up um and then my text align can come down so uh even within these areas i like keeping them a bit more organized like a width and a max width i usually have width first then a max width then i'll do my margins and then i'll do my paddings and then i'll have my background uh that's just how i tend to work and again this is a more complex one like a lot of the time you don't have this much stuff declared on one um one rule that you have but it's all there then i would have my typography type i'll just put for now where i have two things i have my color and my text align center and then after that we don't have any transforms but i do have my miscellaneous stuff that fits in and another thing is again i'm not going to be commenting all of this and i don't always leave all the spacing but there's nothing stopping you from in your css having these extra spacings to group it so here's one group here's another thing that's doing that here's all of this that's doing my box model stuff here's my typography and here's my miscellaneous stuff down at the bottom and i don't have to like i can see these groupings really easily i can get to them very quickly very easily if i have two margins i'm gonna see them because they're very close to one another i won't run into these problems by having this approach now one issue with this is i don't think there's a way to lint to this so i understand on big teams where you're trying to work fast you have a lot of people that are in the css linting can save the day and it just does it alphabetically but i do think if you implement something you have some documentation for your team to organize things in a specific way it can really really help out and it just for me really reduces the cognitive load of how you can get around and do these things and find what you want and work in a way that makes a lot of sense if i'm working really fast i don't always have the time i don't always organize it perfectly but a lot of this is how i'm thinking as i'm writing my css if i'm working on my padding i'm probably thinking margins and i'm probably putting a background there anyway if i'm doing my type stuff i'm probably doing a lot of the typography at the same time i might realize i forgot something later so i just have to go back to my other type properties to put it in there it's not that hard to do so i'd love your thoughts on this you can leave a comment down below on that and also if you want to know how i did this blurry effect i actually did that as part of a cool neon button recently so you can check that video out for your viewing pleasure right here and with that a really big thank you to both zach and randy 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 recording internet just a little bit more awesome