Cover image photo by Tallie Robinson on Unsplash.
Today I had a conversation on Twitter with @ljuba95 about CSS.
He had read my article about the Dev.to State of the Web Survey, and he said he really identified with the group that doesn't like CSS. Our conversation was great, and I asked him if I could share it because I feel like a lot of people probably struggle with CSS in a similar way. Hopefully, I shared some resources that can help, and Milos can help those people remember they're not alone.
So, here's the conversation (albeit with more formatting and fewer typos on my side).
Hey Ryan, I've read your post about the Survey data exploration. Great job! :) You mentioned something about people who don't like CSS. I'm one of them, sadly :D I come from CS background and I've always found CSS and everything about UI's repelling. I don't know if it's my fault, but that's the way it is. Now I see that I won't be able to avoid learning it, especially because I got interested in frontend stuff - React & Redux ecosystem... I know everything about what it's for and how it works, but every time I need to do a little tweak I bang my head to the wall and search all over the internet. The components from Bootstrap, Semantic UI etc. have been helping me so far, but not everything can be achieved using them. I would like to be able one day to at least get an idea when I see a specific web page design, how would I go about turning it into a functional site. Any advice about finding the motivation, learning path and resources is appreciated :) Cheers!
Hi! Thanks, I'm glad you liked the article. 😁 Yeah, CSS is hard for a lot of people. One problem is that there are often many different ways to do the same thing that all have varying pros and cons, and different options are coming in and out of fashion. I would say that the best things you can do are:
.btn btn-primary classes to see how they work.
Ask for help! If you're stuck on a specific question or problem, don't be afraid to ask for help (like you're doing right now 🙂). I'm always happy to take a look at some HTML/CSS and try to explain what the problem is and a couple good ways to fix it. Anyways, hopefully this helps. Let me know if you have more questions.
P.S. This actually turned out to be more typing than I thought it would be. Would you mind if I used your question and my answer in a blog post? I can leave your name/handle out if you prefer.
Woah, that's very helpful 😀 Thanks for your time. I bookmarked Wes Bos a month ago and I never find the time to sit down and do the course. I will take your advice and try to beat that CSS beast 🙂 For me it's harder than some deep functional programming concepts I'm learning atm...
Yeah, definitely use it for a blog post if you want. I have no problem people knowing I'm bad at CSS 😂 Maybe someone else will find that helpful also.
My nickname is ljuba95 on Dev.to and GitHub if you wanna mention me somewhere.
Will get back to you if I hit a wall during the learning, but it's harder not to lose motivation than to actually understand CSS. There are too many properties, ways to accomplish something...
Thanks again, cheers!
The important thing is to not even try to memorize all of the properties and tags.
Understand the fundamental concepts of how the browser lays things out, in-line vs block elements, the box model, and how selectors and specificity work. Look at good practices like BEM (just a way to lay out your CSS). Once you start to get the fundamentals, you’ll get a feel for “I think there’s a property that does what I want, but I don’t know what it’s called. Box-border-something maybe? I’ll look it up on Google.” I do that all the time. W3Schools FTW! 😁
Yep, that's how I learn everything. I get that feel for programming language concepts because I did a language design course. And for some common programming problems, but I accept that I don't clearly get how browser does its work concerning CSS. I've heard of all the concepts you mentioned but I still don't have a deep understanding. I hope Wes Bos will help 😀
Another good quick overview is this article: It's Not Dark Magic: Pulling Back the Curtains from your Stylesheets by Aimee Knight. It gives a 10 minute (or so) read into the guts of how browsers deal with your style sheets, which might appeal a little more to your "nuts and bolts" side, maybe.
If you have any other good advice or resources, be sure to share it with Milos (and me!). There's so much good content and so many smart, great teachers out there. Hopefully, we can get more people to experience the fun side of CSS!