The 3 Short October CSS tips

Hey folks!

I’d like to talk about why the gap property is better than margins, to use a min() lifehack and using outline: none correctly.

But before embarking on reading I leave the link on my Substack newsletter about CSS. You know what to make 😎

Also, thank you so much, my sponsors: Ben Rinehart, Jesse Willard, Tatiana Ten, Konstantinos Kapenekakis. I didn’t write this article without their support.

The gap property smashes margins!

There is a typical solution of using margins when we set gaps between a few elements in such a way they aren’t applied to the last. All in all, we have to write the 2 or 3 at-rules.

The gap property breaks it! We just write one line and all. Yay! 🥳

don’t make that

.parent {
  display: flex;
}

.child:not(:last-child) {
  margin-right: 1rem;
}

instead you can use that

.parent {
  display: flex;
  gap: 1rem;
}

Let’s reduce the combination of the width and max-width properties to one

There is an old and sure way to define current and maximum width using the width and max-width properties.

.container {
  width: 100%;
  max-width: 70rem;
}

Did you know that can be reduced?🤔

There is the min () function that allows us to define values, and browsers will choose the smallest value from them💡

.container {
  width: min(100%, 70rem);
}

Let’s use outline: none correctly

Please, stop using outline: none. We have another solution! Just reset outline with :focus:not(:focus-visible) for users who click on controls and next set it with :focus-visible for keyboard users💡

don’t make that

.button:focus {
  outline: none;
}

instead you can use that

.button:focus:not(:focus-visible) {
  outline: none;
}

.button:focus-visible {
  outline: 0.25rem solid;
}