"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. :)
Top 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 just decided to recode my portfolio from scratch. One of the best learning decisions I have ever made, mostly because I learned a lot about css. Thanks for the article.
I'm glad you like it.
I recall coming back to some old code I'd written for a personal site (actually, my mom's small-business website) and I had used some CSS framework and realized that the worst part of coming back to this was re-learning all the dependencies. I stripped it down and it is now sooo much easier to dip into for a small adjustment.
Nice!!! Sometimes, frameworks make stylesheets less maintainable. And in many cases, we might not even need them. CSS has improved so much that a lot of things we relied on these frameworks for can easily be implemented with pure CSS.
Yup, I complain about over engineering constantly. I swear it's because I'm not lazy... there is a saying about lazy programmers.
CSS is incredibly difficult to work it, or maybe it is from my lack of design sense. Anytime am asigned a front end task I cringe and my design always almost get rejected . most us of know the syntax of CSS but have no sense of design which makes it look like you don't know CSS at all.
If I get you right, you design using CSS. Combining CSS with design is actually a lot difficult. I think you should try creating a design first. You can use a design tool like Figma or Sketch. If the design is accepted, then you can implement it with CSS. Separating design and implementation makes frontend much easier.
Makes sense
I would implore you to please remove the link to w3schools and replace it with MDN.
w3schools is notorious for slightly bad information. The problem is that despite having most of its content mostly correct, the finer details are often incorrect and lead to a lot of misled developers wasting time unnecessarily.
Personally, I found w3shools helpful and I can't say they've misled me in any way.
Though the content on topics there are not always in depth, they can serve as a quick reference.
Thanks for suggesting MDN, I'll add it right away. :)
MDN is honestly amazing. I really like their approach.
Can you give some examples of this? I believe you but I feel like it's gotten better over time and the reputation is slightly worse than the reality as it stands today.
But I'd love some examples to get a better idea of the gripes people are still having with that site.
Quick example that I just googled:
"HTML h1 to h6 tag"
The
<h1>and<h6>tags are not "more" or "less" important.The numbers indicate their rank which are used for outlining a document:
per the spec:
These little details might not seem important at first, but imagine what happens to your JavaScript when you get some little details wrong.
I had this same conversation 9 months ago.
The problem with "getting better" is that if you go from being "terrible" to being "bad" it's still "getting better" but not "good".
w3schools has the problem of not being a primary source. Many developers take the information and assume that it's valid because it's got "w3" in the name (despite not having any affiliation with the w3c). As the web changes, the information on w3schools goes from being moderately useful to being misleading.
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! I've been hard stuck on CSS for a while now, and this is super motivating :)
I'm glad it does. Thanks :)
Nice post, been having a bad relationship with vanilla css, I just got some udemy courses on css tho, hoping to reduce my over reliance on bootstrap and materialize css
Nice choice Femi. I know your relationship with CSS will get better after the course.
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
This is super wonderful advice. Auto-bookmark material.
Thank you Ben :)
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.
The apt part of this write - "Ditch the Libraries". Very True.
Awesome post Sarah. Helped me a lot!
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.
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.
"Nothing beats practice". APT
Well written, good read.