Mistakes with modern CSS

Several months ago, I decided to update and upgrade my skills with modern CSS. Here are some mistakes I made. Hopefully, you won’t do the same.

Permalink to heading Disclaimer Disclaimer

It’s a personal selection, not a collection of common CSS mistakes.

Permalink to heading Not taking the most of HSL colors Not taking the most of HSL colors

This mistake is not critical, but it’s not the current best practice.

There are various ways to define colors in CSS:

.element {
    background-color: gold;
}

.element {
    background-color: #ffd700;
}

.element {
    background-color: rgb(255, 217, 0);
}

.element {
    background-color: hsl(51, 100%, 50%);
}

The above rules are equivalent, but the last one is better. Our brains perceive colors in a way that does not match the first three methods, so it’s not intuitive.

HSL relies on lightness and saturation, like the human brain.

After learning that, I’ve converted colors to HSL for my websites. It’s seamless with VS code, you only have to click on the colors to convert it to HSL, but I’m sure there are other solutions to do it quickly.

However, I think I missed the best approach. I realized HSL is great to define variations of the same colors, which I find clever for both design and maintenance:

:root {
  --base-color: 51;
  --variation1: hsl(var(--base-color), 100%, 50%);
  --variation2: hsl(var(--base-color), 80%, 60%);
}

Instead of making a variable per color, as you would do with HEXA or RGB, you can easily create consistent color palettes this way.

Permalink to heading Not using @media (prefers-reduced-motion: no-preference) {} Not using @media (prefers-reduced-motion: no-preference) {}

CSS animations are great. However, it can be visually harmful to many people. Besides, operating systems and browsers allow their users to reduce motion, so it’s not a good practice to neglect those settings in your style.

Fortunately, you don’t have to drop everything, wrap your code with the following:

@media (prefers-reduced-motion: no-preference) {
    /* CSS animations */
}

I add my animation styles here only if the user does not prefer reducing motion. There are other approaches such as:

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

I prefer adding stuff when possible than canceling rules when it’s not possible. You can also have a separate CSS for animations:

<link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

Permalink to heading Missing the point of Flexbox and grid Missing the point of Flexbox and grid

Grid and Flexbox are meant to ease and improve how you build layouts. Instead of positioning or floating elements, you can have a smarter approach and avoid unnecessary calculations.

You can quickly achieve everyday tasks with Flexbox, such as vertically and horizontally aligning and centering items.

If you want to deep dive into it, read the cheat sheet by Chris Coyier.

In many cases, such as aligning rows, Flexbox is an efficient approach.

Grid is helpful to create complex layouts with way less code than with classic approaches. It turns your element into a grid container where you can place and adjust sub-elements conveniently.

Chris Coyier has a cheat sheet for that too.

The rookie mistake I’ve made was to use Grid instead of Flexbox while not necessary. While there’s no general rule that decides which to use, Flexbox is enough to inline a few elements, for example, within a navigation bar.

Grid is perfectly shaped for a typical portfolio presentation, for example, a grid of 6 or 8 cards presenting your projects. It’s also convenient to create a layout with a bottom.

However, the second rookie mistake I’ve made was to consider “grid vs. flexbox” while you can combine the two approaches. For example, your grid can use CSS grid for the structure and flex for sub-elements:

@media screen and (min-width: 640px) {
  .projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 1rem;
  }
}

.card {
  display: flex;
  flex-direction: column;
}

Permalink to heading Conclusion Conclusion

Modern CSS requires more skills paradoxically. Of course, the syntaxes are more straightforward, and you write less code, but the underlying concepts can be tricky.