Hello world! Today we will see how to write your CSS more effectively with particular attention to readability and reusability. I want to give you a set of advice that helped me, the list doesn't want to be exhaustive and maybe your experience teaches you something different. So use the comment to let us know about that.
PS: Thanks for 25k total views β€οΈ
First, general Organization:
Like when you wrote an essay for school, you will have to start from the easiest or the biggest to the smallest, the most subtle. So also in CSS, I recommend you always start with containers and then style single elements. Styling from the bigger (maybe with flexbox) to the smaller.
It's also better to write your CSS divided into sections with a title (in comment form) you can easily recall while coding. Each section has to start with general classes from the biggest to the smallest. Then you have all id that follows this same class. Then attributes inside of these ids.
I also recommend you to have a special organization inside every element when placing your attributes. You do not have to always follow the same pattern, but remember to go from the external things (biggest) to the smallest and extra ones. I usually love to start with the placement (position, margin...), then size, then padding, contained things (like text or background), and to finish with special style (like border, shadow...). If you always have approximately the same pattern it will be easier for you to retrieve your old code and to search for a particular property you want to edit.
Classes and Id
The first thing you have to remember about classes and id is that classes are plural and id is singular. So classes are split between elements and Id uniquely describes a particular element. You can give to all title in a website a "title" class and then style each one with an Id who recall is position and utility (like "FirstTitle", "ContactUsTitle", "FooterTitle"). I also recommend you to always start writing classes and then Id in order of visual apparition. Good classes and id management will help you staying DRY in your code.
Comments
Comments are very important for you to reread your code than for other developers to discover yours. It also helps you easily retrieve part of the code (with ctrl+f + searching for a comment title). So I recommend having a comment in your CSS every time you change part in the website (header, section 1, section 2...). Just remember to don't abuse of comments (sometimes just a great element naming suffice).
Others:
Animations should be written directly after when you call it. Try to don't exed five passages (0%, 25%, 50%, 75%, 100%), you almost never need more. Even three should suffice.
For a responsive website, I recommend you to write your 5 media queries at the end of the site and then editing one at once. If you're interested, check this article about how to make a website responsive (How media queries work).
It's also important to have a good autocomplete and to know important CSS shorthands, you will gain a lot of time. You can install some extensions for that, especially in VS code.
It is also important to use less !important. If your stylesheet is well organized you will never really need it.
It is important but no crucial for you to learn SCSS, you will gain time and your code will appear cleaner. If you don't want to learn it completely try at least to learn to read it (it shouldn't take long), you have high chances to meet it. SCSS helps you don't repeat yourself in your code.
I recommend you to include by default in your HTML a link for CSS reset code. You can find it here.
Never use inline style, they just create confusion and problems when you want to modify your code.
If you are doing a tutorial or showing a particular element try highlighting the important part putting it at the start of the stylesheet, then add the other style (who are not crucial to the animation) after a clear separation.
Formatting is important, you can't define an element in one line. Always split your curly brackets {} and all different attributes.
I recommend you to write multi-use code in external sheets (like nav or footer) that you can then add to all website pages. Remember that it's always better to have more little stylesheets than a big and messy one.
I know that this is basic, but always remember that Google is your best friend. You don't have to know everything by heart, but you have to know how to find the things you need. On the other hand, you have to know some basics when coding, like how the browser process CSS or how flexbox works...
I also recommend you to take care of how you maintain your different stylesheets. Always name them intelligently arranging them in different folders for each page (in couple with HTML and js). Have an extra folder for recurrent stylesheets (that you have on all your pages).
Maintain things clear. You don't have to show that you are a math pro with a two lines equation to just say that your div has to be 5px long. You or every other dev have to look at your code and immediately understand what you're doing and why you're doing that.
Don't use too much px, it's better to use em and rem for a more responsive site. But sometimes it's better to use px. Do as you feel.
Hope this helped and thanks for reading!
It took me a while to search for sources and to write this article, so remember to give a like and follow me for future articles. Also share it with your friends and other developers, it's very important to me π
Recommended reading:
Subscribe to my Newsletter!
A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
Top comments (0)