responsive with javascript
Hey guys, I have a question, I'm working on a e-commerce project with nextjs & tailwind, so I'm using javascript to responsive the layout insted of tailwind, is it a good idea ?
I have created a hook called "useScreenSize" and i use it to make the layout responsive...
Is this a good practice or a bad practice?
3 Replies
From your description it isn't exactly obvious what you're doing. But in general, if something can be done with css/tailwind, do it with css/tailwind. Hand rolling a bunch of JS for functionality which the browser already provides for you is unnecessary work and A LOT slower than letting the browser do it for you.
Alright, i understand, but if I'll do the same thing with css, I'll have to render unnecessary html with "display: none" isn't it bad for SEO??
😅
No. SEO only applies to server rendered html. On the server you don't have a viewport whatsoever so there's no screen size to be responsive to. Besides most of your html should be able to be shared between desktop (since the website most likely conveys roughly the same information regardless of where it's accessed from), mobile and tablet with a some exceptions for elements which would be very difficult to re-style for a different viewport size.
display: none should basically be the last tool you reach for when programming responsive interfaces