I'd prefer to solely use CSS (SCSS to be specific), but this would mean using a lot of
display: none when I don't want a particular element to appear for a particular screen size.
For example, I have an app with a navigation drawer on the left side. When the drawer is open, there is a button inside the drawer, but I only want the button to be displayed inside the drawer on large screen devices. On mobile devices, I want to display the button as a floating-action button at the bottom-right corner of the screen. Therefore, I don't want to render the button in the drawer for mobile devices.
My approach to this example would be like so:
const maxMobileWidth = 1024;
// don't show button on mobile devices
(window.innerWidth >= maxMobileWidth)
? <MyButton />
(and for mobile devices, I'd render the button in another component, using the same method to determine the screen size to make sure it doesn't render for large screens).
This is nice, because it won't add anything to the DOM on mobile devices, so no need to hide it with
display: none on mobile.
What I don't like is that I also have that value
1024 hardcoded in my SCSS files for media queries. I suppose its not that big of a deal, as in my app I actually store the 'maxMobileWidth' in a separate file that can be used by any component, so there are only two places to keep track of this number (the other of course being the SCSS file). But this obviously violates the DRY principle, so I'm wondering if there is a better design approach to this situation?