How To Get Better At CSS (For Developers)

(This article was originally published in How To Debug CSS)

The key reason why you (and likely most developers) struggle with CSS, is that you underestimate it.

Underestimating CSS leads to a strange feeling of tediousness when writing it, that makes having to deal with it a laborious and seemingly unrewarding task.

Style by style, div by div, media query by media query. Having to make endless small tweaks in what feels like an open-ended ‘design’ process with no direction at all can feel like torture to a development-oriented mind.

Not to mention a complete lack of debugging tools and methods, available for when things go wrong.

This underestimation of CSS is a subset of a problem that we developers tend to have with design in general.

In short, we don’t think it’s that important. We don’t understand or appreciate its meaning.

In reality, CSS is as complicated as any programming language or framework you will ever come across. Maybe more so.

But the general feeling that it is an afterthought within the development process overall, only adds fuel to fire of the thought that leads you to feel that it is tedious.

The best way to start to get better at it then, is to gain a new appreciation for it, as a ‘hard’, technical thing.

Which it is.

You do this by re-framing how you see it.

You can start to learn to like CSS by understanding it from a problem solving technical aspect. As an act of ‘constructing’ a page rather than ‘designing’ it. By engaging the engineering side of your mind.

Instead of seeing CSS as an annoying way to ‘style’ pages, see it instead as a visual programming language for constructing visual guides (UI’s) for your user.

You don’t ‘style’ pages, you ‘construct’ and ‘architect’ them. It sounds weird to use these words, but they have a massive effect on changing your perception of what you’re doing. And that has a massive effect on your impression and willingness to learn how to do it well.

Essentially, you can properly learn CSS by transforming it in your mind from a ‘styling’ problem thing, to an ‘engineering’ problem thing.

This defeats the feeling of tedium that your mind has when you’re dealing with CSS, and over time, if applied with some of the specific additional tactics that I will explain below, leads to actually _enjoying_ the process of writing CSS.

Tactics That Reduce CSS Tediousness & Lead To CSS Enjoyment

Once you’ve started to reframe the act of utilizing CSS in your mind, and start to see it as more of a tool for an engineering problem rather than a ‘design’ problem, embers of enjoyment will start to emerge within you as you are writing your CSS. From here, you can start to add some fuel to the growing fire.

You can do this by utilizing some strategies, tools and techniques that further reduce the tediousness of CSS.

Let’s go through them.

Use tediousness reducing tools, such as TailwindCSS. So you can abstract CSS.

I remember back a few years ago when the Laravel Framework came out. PHP Programmers all over the web were fawning over it. The most common phrase I heard was that it gave programmers “their enjoyment of programming” back. This with a language that was notoriously derided as one that was tedious to use.

What Laravel did was abstract a lot of the annoying parts of most of these developers’ workflows when writing PHP code. These developers, at this newfound higher level of abstraction, could now focus on ‘crafting’ their applications, becoming ‘artisans’ of their code rather than simply PHP programmers.

TailwindCSS does the same thing for CSS. Instead of moving from one file to another to define your styles, Tailwind uses standard default class presets that allow you to write your CSS, essentially directly onto your HTML elements. This might sound weird at first, but in the end, actually results in a LOT of saved time in development.

Over time, it, along with other tools, such as Flexbox, also massively increases enjoyment, as you start to intuitively ‘craft’ and construct pages at a higher level of abstraction, rather than simply ‘style’ them.

Fun fact: The creator of TailwindCSS, Adam Wathan actually started out as a Laravel Developer, so maybe that enthusiasm crossed over to his other project areas.

EDIT: I recently came across a very nice feature in Firefox that helps in debugging overflow issues (one of the most common CSS problems). You can see it in action here.

Understand how to solve common problems in CSS

Because of the lack of debugging tools that are currently available for CSS. Most of debugging within it largely consists of cross-referencing ways that others have dealt with the issue you’re currently facing.

While this is likely not an uncommon practice in your development workflow (its why StackOverflow exists), it is very time consuming if it is the ONLY way that you can debug.

One way around this issue is to become familiar with the most common pattern of problems that occur within CSS, and then try to build a repository of solutions to those problems in your mind over time. This sounds simple enough but it very dramatically decreases tedium and increases productivity and speed of development, which ultimately increases your enjoyment.

For example, one of the most common issues, as referenced in the post drawing, is ‘overflow’ of elements occurring within the page. Sometimes causing the entire page itself to overflow at certain screen sizes. A tutorial like this, outlines the best way to solve this problem.

Master layouts and positioning in CSS (the most tedious aspect of it)

As a follow-on to the above point on simply gaining an understanding of the most common aspects of the CSS writing process, the most common of these in terms of general page creation, is that of simply laying out a page, and its elements and making sure that they are positioned and aligned properly.

The best way to approach problems in a way that solves them most effectively is in an 80/20 way. Mastery of layouts and positioning is the 20% that leads to the 80% of results with CSS. And what will have the most dramatic effect on reducing the tediousness of your CSS writing process.

Using tools such as Flexbox, as is mentioned above, also makes layouts and positioning twice as easy, once you understand the fundamentals behind it.

Overall, it’s with this knowledge that you may start to enjoy and view the process as ‘constructing’ pages, rather than simply ‘styling’ them.

Practice regularly until it becomes second nature

One simple thing that I found, as I started to implement some of the tactics above into my own workflow, was that as I became more proficient in writing CSS and it started to become second nature, my enjoyment of it also started to increase, which lead to a positive feedback loop that kept increasing my overall ability.

This is a very positive flywheel that I highly encourage. Once you’ve started to change your mindset about CSS and use the right tools to abstract a lot of the tediousness out of it, practicing it regularly is then like adding jet fuel to your workflow. Eventually, CSS will become something you look forward to, rather than an afterthought that you try to avoid.

—

This is an excerpt from How To Debug CSS. A book that’s written to solve the problem outlined in this post. To help take you from a vague level of understanding with CSS, to an intuitive, know it like the back of your hand level of understanding. Enabling you to not only create layouts with ease, but to debug any issues that come up with them as you do so.

The book is currently available for pre-order with a temporary (40%!) pre-launch discount on the link above. You may purchase by clicking on the link above! Or by clicking here: “How To Debug CSS”.