DEV Community

Julien Maury
Julien Maury

Posted on • Originally published at blog.julien-maury.dev

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.

Disclaimer

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

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%);
}
Enter fullscreen mode Exit fullscreen mode

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%);
}
Enter fullscreen mode Exit fullscreen mode

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

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 */
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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)">
Enter fullscreen mode Exit fullscreen mode

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 sidebar.

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (6)

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
jmau111 profile image
Julien Maury Author • Edited on

Using Grid instead of Flexbox while not necessary is a mistake. As I wrote, while you can use grid to align rows, it's not the best use. You'd rather use it for more complex layouts.

Collapse
Sloan, the sloth mascot
Comment deleted
jmau111 profile image
Julien Maury Author • Edited on

This is like saying using let is a mistake if the variable never changes.

No, it's not.

As written in the post, my mistake was to use grid for simple alignments while Flexbox is easier in this case. The post also highlights the fact you can combine the two approaches, so I'm definitely not saying you should use one instead of the other. You should not use them interchangeably.

It's not opiniated. Please consider using less disrespectful terms. Thanks for your interest, though.

Collapse
nabbisen profile image
Heddi Nabbisen

Thank you for this great article. I've learned🥳

Collapse
jmau111 profile image
Julien Maury Author

You're welcome 😀