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).
Milos:
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!
Me:
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:
Surround Yourself with Greatness
Immerse yourself in content and code from people who are really good at CSS. Wes Bos has a couple free courses. Look up JavaScript 30 and his CSS Grid course. As you go through those, you'll see a bunch of best practices that are really helpful. Get on Codepen and look around and follow people doing cool things with CSS. Sarah Drasner is one that comes to mind. Look at their code. The articles by Chris Coyier and others on CSS Tricks are almost always excellent. Take a look through the actual CSS files in Bootstrap and others. See the CSS behind the .text-center or .btn btn-primary classes to see how they work.
Practice
Build things. Build a million little projects (again, Codepen is good for this) that are all using CSS and HTML -- and JavaScript if you're up for it! The more you practice, the more you'll begin to develop an eye for the issues and how to fix them, as well as good design!
Get Help
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.
Milos:
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!
Me:
No problem!
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! 😁
Milos:
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 😀
Me:
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!
Happy styling!
Top comments (5)
I really like CSS, don't know why, it has always "clicked" with my brain. I'm no expert but I like the tool :-)
I can contribute the links to these two resources about what happens to CSS inside the browser:
Inside a super fast CSS engine: Quantum CSS (aka Stylo) by Lin Clark from Mozilla/Firefox. She's absolutely awesome at explaining complicated stuff (her articles about WebAssembly are a godsend) and her drawings are funny and helpful.
Inside look at modern web browser (part 3) - Inner workings of a Renderer Process by Mariko Kosaka from Google/Chrome, whom funnily enough defines herself as a "drawsplainer". She explains and draws really well.
Great read, let me throw out a link that has been a huge help to me with the new CSS grid spec.
gridbyexample.com from Rachel Andrew.
Combine it with Firefox Developer's grid inspector and you have a really powerful combo for handling layouts.
Thanks for sharing!
Great post! Felt like I was listening in to the conversation the whole time. :)
Thanks! Glad you liked it!