DEV Community

Discussion on: 6 useful frontend techniques that you may not know about

Collapse
leob profile image
leob

One really (but I mean REALLY) cool tip - the hidden attribute ... that one alone makes this post worthwhile, even when I don't really care about the rest ... oh and yes disabling copy/paste sounds like the worst idea ever, I can't come up with any use case where it would make sense ...

Collapse
itshi32 profile image
itshi

Why hidden is better than .some{display:none} ?

Thread Thread
inhuofficial profile image
InHuOfficial

Because if you build a component you can just use it in another project without worrying about styling being included.

Also just so you know, it is a good practice to still add [hidden]{display:none!important} to account for older browsers and some obscure browsers. And yes, although most of the time !important is bad, if something is hidden then you want to override any other styling.

Another benefit is if for any reason your CSS fails (as failed network requests do happen) then the item is still hidden.

And one last benefit is maintainability, if you have a team you start getting .invisible, .hidden, .dontshow, .hide etc. If you tell the team to just add the hidden attribute they never had to worry about it again.

Oh and I suppose the fact that hidden on the element means that you don't need .hidden or equivalent in your CSS when it comes to critical rendering and performance. Super tiny difference but lots of little things likes this really add up!

I hope that helps (I might even write a post on it as there are actually more benefits than I thought!)

Thread Thread
leob profile image
leob

It isn't better, it just surprises me that there are features like this that I had no clue even existed. But yeah it's not earth shattering, it's more a piece of trivia.