Clear Design
In big projects, poorly managed CSS files can become impossible to read very quickly. Assuming you are doing all of your CSS in a single file, then a complete project can easily top 1,000 lines of code, and that can be very hard to sort through. This is why it is very important to utilize clear design techniques while writing CSS. Now a few of the techniques I'll be going over in this post are just things I've started doing, and they've made CSS far more hospitable for me.
Naming
So first off, the main way you can make your CSS easier to read is to just write less of it. In the CSS:Naming blogpost, I talked a lot about proper naming conventions, and more importantly, how much they can be used to cut down on bloat in your project. Here is the link to that post in case you missed it:
https://dev.to/bmmcshane/css-naming-elements-4c8p
In short, using good naming practices can allow you to cut out a lot of unnecessary code. Another thing to keep in mind when naming your elements is trying to use short but descriptive names. If every element's name is at least four words long, your CSS is gonna suck to write. Conversely, if every element is named '1', '2', '3', '4', etc. you are going to be constantly referring back to your HTML to even remember what elements you are working on.
Grouping/Organizing
One of the things I've started to do in my code, is to organize and group closely related parts of my CSS together. Doing this allows me to easily recognize where my code is going and where I can find it.
For example my last project looked like this:
All of our elements were split into three separate columns:
And here is how I organized the code for that:
By writing my CSS left-to-right, top-to-bottom, I was easily able to keep track of all of my code based on its positional relationship to the rest of the code. Additionally, by tactically using black space in my code, I was easily able to partition my CSS into more manageable chunks.
While we are on the subject of Naming, check this out:
When changing the CSS of different elements specific to their containers, I always try to put that code directly under the CSS for the parent container.
Finally, I find CSS a lot nicer to read when individual properties are grouped up by similarity.
That just makes CSS a lot easier to look at in my opinion.
Minimize your Code!
After organizing your code like above, another step you can take to make your code clearer is to take advantage of code minimization.
These little tabs will allow you minimize code you aren't currently working on, which takes obtrusive code like this:
and turns into clean code like this:
Clean out the trash
This might sound like common sense, but if your code isn't working, delete it. Pretty often while troubleshooting CSS issues, I will fill the problem element with all kinds of properties until something works. While doing this, I will frequently comment out non-functional code in case I find out I still need it later. If you manage to solve your problem, I highly recommend deleting commented-out code.
Additionally, if you are looking to clean out even more trash, I highly recommend using the elements tab in the DOM to deactivate properties in your CSS and seeing if it changes literally anything. Many times, after solving an issue with your CSS, there WILL still be 'active' code that is literally doing nothing. Going through and clearing out these useless bits of code can really trim down the size of your CSS files.
Separating your CSS
The final CSS clean design technique I have for you is actually something pretty new to me. Essentially the idea is to create a separate CSS file for each React component, and then import each individual CSS file into its respective component.
As I understand it, this allows you to apply CSS properties to HTML elements for each individual component without having them overlap. If used properly, this can allow you to seriously cut down on things like ClassNames and IDs, all while perfectly partitioning your CSS into its own file entirely!
Top comments (0)