In my opinion this goes against mobile first principles. On occasion having device specific content is necessary (like you mentioned with the menu), however, if the component is handled appropriately, media queries is all you need.
And with your approach you're still having to write device specific styles.
I also see your point in wanting to min/max. Even if you handled the menu with specific device media-queries, you would still be loading the media queries not needed for desktop as an example.
I still stand with if media-queries can handle the change, then you should stick with media-queries without having to write device specific components.
20kb is quite a bit to just handle one device specific view, the menu must be really massive.
I'd say it depends on what you are building specifically. If it's for visual presentation, then yes you should use CSS media queries. But this would be helpful for when you want to serve different components for different device types (say a bare-bones video embed for phones, but a full featured media player for laptops up).
In my opinion this goes against mobile first principles
Mobile first approach is the dream and I agree that this goes against mobile first principles but in my experience there's always something that cannot be truly responsive and needs to be handled with media queries.
And with your approach you're still having to write device specific styles
Yes, but these styles will be composed for specific components without having to be wrapped in css media queries.
if you handled the menu with specific device media-queries, you would still be loading the media queries not needed for desktop as an example
Not necessarily. If you use css modules or any css-in-js approach, your styles will be a part of your component and not separate stylesheet. But this is true if you extract your css into one big stylesheet. Instead you could separate your stylesheet for specific components and lazy load them.
I still stand with if media-queries can handle the change, then you should stick with media-queries without having to write device specific components.
I hear you. You don't need this if the application or requirement is small. But if your application is huge and if you often find yourself writing device specific media queries, this will make you happier.
20kb is quite a bit to just handle one device specific view, the menu must be really massive.
It was one big bundle of bloated foundation elements wrapped in React components with a very high level of customization.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
In my opinion this goes against mobile first principles. On occasion having device specific content is necessary (like you mentioned with the menu), however, if the component is handled appropriately, media queries is all you need.
And with your approach you're still having to write device specific styles.
I also see your point in wanting to min/max. Even if you handled the menu with specific device media-queries, you would still be loading the media queries not needed for desktop as an example.
I still stand with if media-queries can handle the change, then you should stick with media-queries without having to write device specific components.
20kb is quite a bit to just handle one device specific view, the menu must be really massive.
I'd say it depends on what you are building specifically. If it's for visual presentation, then yes you should use CSS media queries. But this would be helpful for when you want to serve different components for different device types (say a bare-bones video embed for phones, but a full featured media player for laptops up).
Mobile first approach is the dream and I agree that this goes against mobile first principles but in my experience there's always something that cannot be truly responsive and needs to be handled with media queries.
Yes, but these styles will be composed for specific components without having to be wrapped in css media queries.
Not necessarily. If you use css modules or any css-in-js approach, your styles will be a part of your component and not separate stylesheet. But this is true if you extract your css into one big stylesheet. Instead you could separate your stylesheet for specific components and lazy load them.
I hear you. You don't need this if the application or requirement is small. But if your application is huge and if you often find yourself writing device specific media queries, this will make you happier.
It was one big bundle of bloated foundation elements wrapped in React components with a very high level of customization.