DEV Community

loading...

5 CSS Bad Coding Habits

Stas Melnikov
Updated on ・4 min read

A lot of time I check HTML/CSS and I got a collection of mistakes. And I'd like to share my collection of CSS bad habits that I saw in the majority of cases.

Defining properties for all elements and then reset one of them

I face how people set some property and then reset it. That leads me to confuse because I like shortly CSS. And I want to show my vision in the following example.

There is an issue when you should set margins between elements. How people do. At first, they set to all elements and then reset from the first or last element. So they'll get 2 at-rules.

But there are selectors such as the nth-child/nth-of-type selectors, the :not() pseudo-class, or the next-sibling combinator (known as +) that help to write same in 1 at-rule.

This lifehack helps me to save the compact size of my CSS. So I hope you'll apply it in your work.

don't do this

.item {
  margin-right: 1rem;
}

.item:last-child {
  margin-right: 0;
}
Enter fullscreen mode Exit fullscreen mode

You can use this instead

.item:not(:last-child) {
  margin-right: 1rem;
}
/*or*/
.item:nth-child(n+2) {
  margin-left: 1rem;
}
/*or*/
.item + .item {
  margin-left: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

Defining display: block to absolutely positioned or fixed positioned elements

The popular mistake that I often meet is you add display: block to elements with position: absolute or position: fixed. You shouldn't do that because browser sets display: block itself for elements with position: absolute or position: fixed.

That can't be changed. Besides, the inline or inline-block value will be changed to block, inline-flex -> flex, inline-grid -> grid, and inline-table -> table for the same reason.

don't do this

.button::before {
  content: "";
  display: block;
  position: absolute;
}
/*or*/
.button::before {
  content: "";
  display: block;
  position: fixed;
}
Enter fullscreen mode Exit fullscreen mode

You can use this instead

.button::before {
  content: "";
  position: absolute;
}
/*or*/
.button::before {
  content: "";
  position: fixed;
}
Enter fullscreen mode Exit fullscreen mode

Using the transform: translate(-50%, -50%) approach for centering

For a long time, there is the approach of centering elements using the transform property. I'm sure you wrote transform: translate(-50%, -50%) at least once.

In this approach we have to use the set of 5 properties. I'd like to share the approach that'll allow reducing the code to the two properties.

You probably heard auto margins is one of the main benefits of flexbox. That's happened because it's works predictable. We don't need to know the element's width and height so that it's centered.

We just write margin: auto, if there is free space a browser will display by the center. If no, anyway, a browser will display it accurately.

So that's my favorite way that will help in 100% of cases.

don't do this

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

You can use this instead

.parent {
  display: flex;
}

.child {
  margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

Defining width: 100% to block-level elements

There is a popular practice of using flexbox to create a multi-column grid that transforms to a single column. I think using flexbox for a multi-column grid is ok but not for creating a single-column.

In this case grid's items stretch out for on parent width using width: 100%. But we forget grid's items are block-level elements that stretch that way by default.

So we don't need to use the width: 100%. Just use flexbox only when you need to create a multi-column grid.

don't do this

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>
Enter fullscreen mode Exit fullscreen mode
.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100%;
}

@media (min-width: 1024px) {

  .child {
    width: 25%;
  }
}
Enter fullscreen mode Exit fullscreen mode

You can use this instead

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>
Enter fullscreen mode Exit fullscreen mode
@media (min-width: 1024px) {

  .parent {
    display: flex;
    flex-wrap: wrap;
  }

  .child {
    width: 25%;
  }
}
Enter fullscreen mode Exit fullscreen mode

Defining display: block to flex-items

There is an important feature when we use flexbox. When you write display: flex for the element all its child elements (flex items) are blockified.

What does it mean? All flex items that are set the display property with the inline, inline-block, inline-flex, inline-grid, or inline-table values will be changed. The inline and inline-block will changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.

So don't use the inline-* values and your code will be saved clear.

don't do this

.parent {
  display: flex;
}

.child {
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

You can use this instead

.parent {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

P.S. If you like these tips go to read others on my Linkedin.

P.S.S. This post was written with the support of my patrons: Ashlea Gable, Ben Rinehart, Sergio Kagiema, Vlad Bazhanov, Spiridon Konofaos, Jesse Willard, Tanya Ten.

Discussion (5)

Collapse
afif profile image
Temani Afif

(1) But we forget grid's items are block-level elements that stretch that way by default. --> they aren't block-level, they are grid-level. You can find this in the specification: w3.org/TR/css-grid-1/#grid-item-di...
(2) for the display part, you can find more detail here: w3.org/TR/css-display/#transformat... .. the blockified thing is done in may places (with absolute, fixed, float, flex, css grid, etc) each one is defined in its respective specification (ex: w3.org/TR/CSS21/visuren.html#dis-p...)

Collapse
melnik909 profile image
Stas Melnikov Author

Temani, If display: grid isn't applied what's the context of divs ?

Collapse
afif profile image
Temani Afif

in that case we don't talk about grid items

Collapse
aisirachcha21 profile image
Ryan Kuruppu

To center an element using flex you don't have to do .child { margin:auto }

You can use what flexbox gives us and use justify-content like this

.parent {
display: flex;
justify-content: center;
}

Collapse
chudiweb profile image
Chukwudi Nweze

Thanks for this tips. Learnt a lot from your short and straight to the point article. Even yesterday I used the old way of centering div. Gonna refactor asap

Forem Open with the Forem app