CSS Practices To Avoid as a Web Developer

CSS

1. Use width: 100% for Block Elements

<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%;
        }
}

You can use:

@media (min-width: 1024px) { 
        .parent             display: flex; 
              flex-wrap: wrap; 
          }   
        .child              width: 25%; 
          }
}

2. Set display: block for Flex Items

.parentdisplay: flex; }

.childdisplay: block; }

You can use:

.parentdisplay: flex; }

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

.parentposition: relative; }   
.child      position: absolute; 
      top: 50%      left: 50%      transform: translate(-50%, -50%); 
}

You can use:

.parentdisplay: flex; }   
.childmargin: auto; }

4. 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 two rules when you can get by with one. It’s much easier to set margins and padding for all the required elements at once.

.itemmargin-right: 1.6rem; }   
.item:last-childmargin-right: 0; }

You can use:

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

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

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

You can use:

.button::before        content: ""        position: absolute; 
}

Conclusion

Share on facebook
Share on twitter
Share on linkedin

Leave A Comment

Related Posts

Featured Posts
Author

Anish Lamsal

Frontend Developer

Computer Engineer pursuing his passion in blogging.