Learning CSS

There are a lot of different ways to get better at writing CSS. These are a few of the tips I’ve picked up that have helped me out along the way.

Learn HTML

CSS just modifies HTML. If you learn how HTML works by default - it will help you write better CSS. I learned HTML by reading the spec, and writing lots of unstyled HTML. I also spent a lot of time validating my HTML. There have been a few CSS bugs I’ve been able to catch by recognizing poorly formed markup.

Study typography

The web is largely text. People have been studying what makes things readable (as well as what gets in the way of readability) for hundreds of years. By learning the basics of typography - you’ll have a better idea of how to use CSS to make interfaces easier to digest for your users.

Talk to people

It doesn’t need to be coffee, but talk to people! If you work with people who write CSS, ask them what works for them. More importantly - ask them what doesn’t work for them. Learning about peoples problems will help you solve problems better later on. Find css authors online that you respect and ask them to coffee, or if you aren’t around them geographically - ask them questions over email. Maybe ask if they have time to do a video hangout over coffee. Some of the most impactful things I have learned have been because I met up with someone in real life and was privileged to ask them questions about their approach and just what they are up to. Asking @dam out for coffee one day helped push my own development knowledge forward.

Write a lot of CSS. Make a ton of mistakes. One of the best ways to learn how to not make mistakes is to make a ton of mistakes.

Think critically

Learning doesn’t happen by accident. Some people author CSS for years and don’t get much better at it. Practicing with intent is one of the best ways I’ve found to get better. This can take a lot of forms. Sometimes it’s experimenting with a CSS property and previewing a number of values in different contexts. Like how does font-size set to px or em look differently zoomed in on mobile or desktop devices?

Read a lot of code

All CSS for websites you have access to is open source by default. This is pretty rad for a few reasons. One being that you can read the source code and learn learn from it. There are also a lot of open source CSS projects written by people who spend a lot of time thinking about CSS. These can be great for observing patterns, abstractions, and techniques for solving various problems.

Read about how people write code that is not CSS

I believe authoring CSS is a lot different than programming. I also believe you can learn a lot from reading about the learnings of great programmers. Try on all the shoes. Throw away the ones that don’t fit, and keep the ones that do. If you are looking for some things to read - I have a reading list that I keep updated with articles that have altered how I think about writing code.

Additional reading