"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.
W3Schools
MDN
A List Apart
CSS Tricks
CSS Weekly
Smashing Magazine
Bits of Code
CSS Wizardry
Responsive Design Weekly
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. :)
Latest comments (36)
Great article. Although my css is good enough to start bootstrap, I think I'll continue to learn more so that when I begin with frameworks I can customize then however I want it. Thanks for sharing this
I love this article. It's helpful.
Thank you Sarah.
Great read! You spoke my mind here.
"Nothing beats practice". APT
Well written, good read.
Great article Sarah... I found the motivation that I was needing to start reviewing it.
Some front-end coding challenges to practice.
codier.io and frontendmentor.io/
Overall, this was an excellent article, but I'd like to point out a couple things.
First, a class like title seems a bit pointless when header tags should be used for that purpose. Two options would be using h1 as post-title and h2 as card-title in a parent/child sort of relationship OR using h2.post and h2.card if both are children of the same parent. Of course, if you're truly adventurous and find an edge case where header tags are inappropriate for your titles, you may just create 3 classes: title (containing styles that are the same for all titles), post (for styles unique to the post titles), and card (for styles unique to the card titles). Then all you have to do is assign multiple classes to the elements.
span="title post"
Second, over the years I've found plenty of buggy code, bad advice, and broken semantics on W3Schools. I've also found that anything I may have once looked for in W3Schools can be found in MDN, and that MDN gives accurate, updated information, marks experimental features and depreciated features accordingly, gives references to the W3C's standards, and includes a chart showing which browsers do and do not support the code shown on that page. If it were me, I'd just boot W3Schools out of the list of resources.
Aside from those two little things, this article is nothing but good advice ... for any language, really. I've got nothin' but ♡ for it.
This was an excellent read and I feel motivated to become more confident in the CSS I write! Thank you for sharing. 💪🏾
So true,frameworks don't give the kind of flexibility vanilla CSS gives.
I just started using CSS frameworks (materializecss, foundation etc..) in the last two months. But it was after doing the due diligence that you addressed in this article. I can't imagine using the frameworks without understanding CSS and SASS. I really don't know how anyone would get the power out of the frameworks without a strong foundation in CSS. Thanks for posting, the more aesthetic projects and tools are the more likely they will be used and gain traction.
Nice article I love it. Is exactly where I'am stuck with some css since like you said at the end "Don't get overwhelmed by the number of things you have to learn. New features are being added to CSS regularly. "
and what I most like about is that you are an Electronic field exploring this field, just like me. Again, excellent article helped me getting focus again. Thanks
Awesome post Sarah. Helped me a lot!
😊
The apt part of this write - "Ditch the Libraries". Very True.
Thanks for this article. While its definitely great to learn css from scratch, I believe CSS libraries also help you learn a lot. Take bootstrap for example. When I started coding I had no idea about bootstrap or responsive web. Using bootstrap cdn and chrome dev tools, I learnt how to write responsive designs, I learnt what makes up the special classes they use. I now know what is contained in a row, I can write a modal, media queries and do other stuffs by learning from chrome dev tools. I feel this is for intermediate developers though
I agree with you. You can learn by studying these libraries.
Great article, Sarah!
I completely agree with you on ditching libraries. On that point: what’s your opinion on resets or things like normalize.css?
I think they are necessary to remove built-in browser styling and make your pages appear the same across all browsers.