Larry Hudson

Writing about making websites

Why learning CSS is hard

1 April 2021

For me, getting better at writing CSS is really difficult. This post is an attempt at articulating why it is hard for me. For each reason, I’ll try to come up with a solution and a way forward from here.

I treat CSS as an afterthought

In my own projects, I focus more on the backend than the front end. Making things that do something is more appealing than making things that look pretty.

For that reason, I don’t engage with CSS as a fundamental part of the project. I get a simple layout working and then I think “that’s good enough”. CSS is more of an afterthought, a formality that I need to get done.

This means my experience with CSS is shallow – I’m not using it to solve many problems. This means when I do need to solve a tricky problem with CSS, I feel overwhelmed.

Solution: put more work into CSS and try to build more diverse layouts. This doesn’t mean “make things complicated when they don’t need to be“. This means put more effort into the layout and treat CSS as a fundamental part of the project, not an afterthought.

There are multiple ways to solve a problem

CSS is a collection of tools that have overlapping uses – when you face a problem, there is probably more than one way to solve it.

An example is the horizontal list of navigation links at the top of this page. Originally I used display: inline to lay out these navigation items. But the whitespace characters were visible between the items, affecting the margin between. I ended up using display: flex and flex-wrap: wrap on the <ul> to solve this issue.

Another example of this problem is where Flexbox and Grid overlap. For a beginner, it can seem like they do the same thing. But an important rule of thumb is that Flexbox is good for laying out items in one direction (horizontally or vertically) while Grid is good for laying out items in two directions (columns and rows).

When it looks like there are two techniques that solve the same problem, you need to work out the subtle differences. The different techniques in CSS have been designed to solve different problems, and you should use them to do the job they’re designed to do.

Solution: learn what the different techniques are designed to do, and try to use them in that way. This involves learning the fundamentals of Flexbox and CSS Grid to make sure you’re working with them, rather than against them.

Learning resources: Jen Simmons’ Layout Land videos on Grid and Flexbox, Heydon Pickering and Andy Bell’s Every Layout course

Adding hacky fixes rather than refactoring

When I need to a fix a bug, I often add a fix to the bottom of the style.css file and move on. While this is okay in an emergency, sometimes I am avoiding the actual problem that requires more thought and effort.

This is related to the first problem – this is a symptom of the fact that I am treating CSS as an afterthought, not a fundamental part of the project.

Solution: this probably sounds like “eat your vegetables”, but I need to refactor more. I need to put more time into reviewing my own CSS from a high-level view and refactoring it to solve problems.

What I need to do

Looking at the problems above, this is what I need to do:

  • do more with CSS – make more diverse layouts
  • engage with CSS as a fundamental part of the project rather than an afterthought
  • learn what CSS techniques are designed to do, and use them that way
  • put effort into refactoring CSS when I come across problems in my code, rather than adding hacky fixes