You are writing CSS wrong

We tend to think that good css code is fancy stylings and incredible effects, but it’s not usual to talk about css clean code practices. On the other hand, we tend to perceive css code as difficult to understand and we end up using shortcut properties as z-index that are not design for repeated use.

Technical debt is one of the biggest misunderstood things in code. We usually think that refactoring everything will fix it, but it always does not. If you start diving in this topic, you will be reading about patterns, architectures; but these concepts do not match pretty well with css code. It is true that css is really verbose, but we can reduce tech debt a lot.

Top to bottom styling

The biggest mistake I always find is styling the element you want to change. This mindset, we can call bottom-to-top, produces lots of code as you’ll need to use hard css properties.

Hard properties are designed in css for extreme cases were everything else has been used and we do not get yet the result we want. Unlike soft properties, which are really generic, group children and tend to do more than one thing at the same time.

// Classical Code (using hard properties)
.child {
  margin: auto;
  top: 50%;
  transform: translateY(-50%)
}

// Modern Code (using soft properties)
.parent {
  display: grid;
  place-content: center;
}

In this example, the most obvious advantage is the amount of properties used. But the key advantage here is that we didn’t style the child element. This means, that we have grouped a common layout behavior in the parent element, as we would use interfaces instead of clases in OOP. This little change means that, we have now space to create complex animations and behaviors for each children with ease.

Let’s imagine a carrousel, for each element we would like to perform a scale effect on hover. The common behavior lives in the parent element and the particular details are located inside the element. This top-to-bottom approach creates predictable code and especially uses flex and grid layouts which are easy to debug in google chrome.

.parent {
  display: flex;
  gap: 1rem;
}
.child:hover {
  scale: 1.2;
}

The top-to-bottom approach also applies for heights, widths and scrolling behavior. Bad css code usually uses fixed sizing to create scrolling bars, which does not behave responsive at all. Even if your software is not targeting multiple devices (tablet, mobile, etc), responsive css adds lots of value because usually you don’t control display sizes (yes, there are still many square screens out there).

Golden Rule - Style parents first, children second

Semantic CSS

With the previous concept in mind, you will notice that this simple rule sets a hidden rule behind it. Instead of using css for targeting a result, we are looking for a meaning on each property we apply. This means: we do not write styles “to make it work”, we are writing code that evolves, has meaning and sense in the purpose it was first written. As we make an effort on using easy to understand variable names, applying semantic css makes the code more robust to future changes as the concept barely changes on a product, but the details change all the time.

The use of flex and grid layouts is key to achieve this, and you should not underestimate it. Design tools as Figma have evolved to take flex/grid approach first, instead of hardcoding positions for a demo. This makes design more reusable, but most important, allows to reduce the distance between design and real code implementation, which encourages a common language between design and implementation.

---

Have you tried this approach before? Do you think tools as Tailwind CSS avoid technical debt? How would you bring these concepts to your team? Im happy to read you in the comments :)