CSS Practices To Avoid as a Web Developer

Some bad habits and how to fix them…

Some people think that CSS is difficult to learn. There are lots of crutches and even some magic, which makes it easy to shoot yourself in the foot. I feel sad about this since I don’t think so.

CSS Practice to Avoid as a Web Developer

1. Set Margins or Padding and Then Reset Them

I often see people set margins or padding for all elements and then reset them for the first or last element. I don’t know why they use in there coding's. there’re two rules so that you can avoid them.

.item {
margin-right: 1.6rem;
}

.item:last-child {
margin-right: 0;
}
.item:not(:last-child) {
margin-right: 1.6rem;
}

2. Add display: block for Elements With position: absolute or position: fixed

Did you know that you don’t need to add display: block for elements with position: absolute or position: fixed since it happens by default?

.button::before {
content: "";
position: absolute;
display: block;
}
.button::before {
content: "";
position: fixed;
display: block;
}
.button::before {
content: "";
position: absolute;
}
.button::before {
content: "";
position: fixed;
}

3. Use transform: translate (-50%, -50%) To Center

There was a popular problem that used to cause a lot of trouble. I’m talking about centering an element with an arbitrary height along two axes.

.parent {
position: relative;
}

.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.parent {
display: flex;
}

.child {
margin: auto;
}

4. Use width: 100% for Block Elements

We often use flexbox to create a multi-column grid that gradually converts to a single column.

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

.child {
width: 100%;
}

@media (min-width: 1024px) {
.child {
width: 25%;
}
}
<div class="parent">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
</div>
@media (min-width: 1024px) {
.parent {
display: flex;
flex-wrap: wrap;
}

.child {
width: 25%;
}
}

5. Set display: block for Flex Items

When using flexbox, it is important to remember that when you create a flex container (add display: flex), all children (flex items) become blockified.

This means that the elements are set to display and can only have block values. Accordingly, if you set inline or inline-block, it will change to block, inline-flex -> flex, inline-grid -> grid, and inline-table -> table.

.parent {
display: flex;
}

.child {
display: block;
}
.parent {
display: flex;
}

Conclusion

I hope I’ve managed to show you how to avoid simple mistakes and you will take my advice. Don’t foregate to clap for 15–20 times …

Thanks for reading!

Improving the world w/ better education…