Having a Good Relationship with CSS
|
"CSS sucks!!", "How can I get better at CSS?", "I get stuck on little CSS issues for a long time". Do any of these expressions describe your view on CSS? If yes, read on as I share my personal tips on how you can improve your relationship with CSS. I promise it will be brief and I will not bore you. Let me start by telling you a little about my love story with CSS.
I used to have an awful relationship with CSS when I started coding. I always preferred working on the JavaScript and making my apps function before styling them. I saw myself more as a JavaScript developer than a Frontend Developer because of my poor relationship with CSS. That has changed now, I no longer have that view of myself. It is safe to say that I love CSS (a lot, actually). Now when working on an app, I prefer styling it before implementing any logic.
Moral of the story: Anyone can be great at CSS. If you find CSS challenging now, you can get better at it if you do the right things.
So in no particular order, here are some things you can do to get better at CSS.
- Learn CSS
- Ditch the libraries
- Learn to debug your code
- Read other people's code
- Name your classes properly
- Practice
Let us briefly discuss each of this.
Learn and understand CSS The syntax of CSS is simple. I mean, you don't have to write many lines of code to get the background color of an element to be green. Because of its simplicity, many people expect it to be easy to use.
Yes, it is easy to use CSS if you really know and understand the rules governing CSS and how styles are applied. It is easy if you know which CSS property can be used to do what. It is easy if you understand CSS specificity and that it might be the reason why your CSS rules do not apply to some elements. It is easy to debug your styles if you know CSS.
That being said, to get better at CSS, it is important to learn CSS. Learn the basics of CSS like the CSS box model, padding, margin, specificity, positioning etc. Move to more advanced topics like CSS transitions, animations, flexbox, grid etc. Read a book on CSS, take a CSS course, read articles on CSS regularly, sign up for CSS newsletters and do more to really learn CSS. This brings us to another thing that can really help you to get better at CSS.
Ditch the CSS libraries This advice was given to me by a friend and I believe it is one of the best I ever received. It made me go back and really learn CSS.
So ditch Bootstrap, Bulma, and every other library you know and use vanilla CSS for projects. Okay, not completely. Sometimes, they make our work faster. My point is, before learning to use them, it is important to learn CSS first. Learning how to use a library without knowing how they work under the hood is like learning React without first understanding JavaScript. It might make your life miserable at some point.
If you want to have a better relationship with CSS, it is better to try to work without these libraries. That way, you'll have a deep understanding of CSS and how it works.
To gain greater flexibility in using these libraries, try studying their code, the styles they apply and try tweaking these styles. This way, they'll be more helpful to you.
Learn to debug your code The Inspector in browsers is a blessing to frontend developers. Learn to use it. Learning to debug your code using your browser's inspector will make debugging easier and faster for you.
When you have a bug, go to your inspector, find out what CSS rule is being applied. You can do a whole lot with your browser's inspector tool. You can see all CSS rules that are applied and the order they are applied, you can edit your HTML, add styles to any element and even pseudo-classes. Instead of implementing your fixes on your IDE first, try it on the browser, see if it works. Then go back and fix it on your IDE. This saves you a whole lot of time.
Read other people's code Yeah, you should do this. There are lots of beautiful stuff out there on Codepen, there are lots of beautiful websites on Awwwards. Look at their stylesheets, try to understand what makes the site appear beautiful. If you come across a layout you've not worked on before, inspect the element, find out the styles that are used.
This might not be easy at first, especially if you are getting started with CSS but trust me, it gets better. Try to learn at least one new thing from each site you visit by looking at their code. Over time, these little things add up and make you better at CSS.
Sometimes, when I see something on a website that I've not done before, I create a Codepen and try to redo it. Eventually, when I need something similar, I visit this pen and study what I did. This has helped me a lot.
Learn to name your classes properly
Naming your CSS classes properly will save you hours of debugging. It helps you to avoid errors that may occur with similarly named classes. For instance, naming a class title might seem okay, but is that the only title you are ever going to have in your CSS file. It will be better to use more specific names like post-title or card-title.
If your names are not specific, it might be hard to keep track of all the CSS class names you have used. Eventually, you might end up having unwanted styles applied to an element because of using an already used class name.
Following a naming convention like BEM, SMACSS or OOCSS makes this choosing class names easier. Even if you don't want to strictly follow it, learn the principles governing them, apply these principles and stick to a pattern. Do it for yourself and for the person that might maintain your code in the future.
Practice! Practice!! Practice!!! Nothing beats practice. You get experience when you work on more UI designs with different features and layouts. You will get stuck on various things, especially things you've not done before. However, when you figure it, it will take you less time to work on similar things in the future.
Always take up challenging UI designs and work on them. That way, you'll get better faster.
Final Words If you find the solution to any CSS problem on StackOverflow or Codepen or any other forum, find out why it works. Avoid copying and pasting styles that are not necessary. They might just be the reason for bugs you might have later.
Don't get overwhelmed by the number of things you have to learn. New features are being added to CSS regularly. Make sure you know the basics first, then keep learning and growing your knowledge.
Here's a link to websites with useful CSS content.
So that's it. I hope I kept my promise to not bore you ;). Feel free to share personal tips that have helped you get better at CSS and any useful CSS resource you have.
Thank you for reading. :)