Display:"none" how bad/good?

JavaScript
1

How bad is it to use dispay:“none” to hide elements we don’t want to see?
I want to hide the login form once the user is logged in and the populate the page with feed from database. Also, after clicking on different categories I wish to set the display of previous feed to none and the show the new (clicked) feed. Does this make my webapp slow? Basically it would be a SPA. No I’m not using react for now. Just Vanilla JS.

2

it’s not bad or good. The major question you have to answer is whether you want the hidden element to take up space on the page. Asked and answered on stackoverflow

Basically:

let yourUsage = (doYouWantToRemoveTheItemFromDocumentFlow) ?
    "use display: none" 
  : "use visibility: hidden"
3

i don’t recall the exact stackoverflow answer but it mentioned that rendering it again will be more costly than just hiding it with display none or visibility none. another way is to store it as a reference in a variable, then remove it from the DOM. of course you may need to keep track of the reference

1 Like
4

No. I don’t want the hidden element to take up space on my page. I just wanted to know if display:‘none’ is a good practice

5