In my current project, I am using standard CSS3 and creating separate CSS files for each component. I am debating whether to incorporate an event listener with multiple return functions within my React component instead of having multiple media queries in the CSS file. Another option would be to use conditional classNames defined by useState to categorize screen sizes as small, medium, and large variables that could then be used in the CSS file for maintaining consistency in element sizing. This approach would prevent the need for creating numerous CSS files or media queries.
I am concerned about potential messiness in the future if certain screen sizes are updated while others are not using either method.
Is there a universal solution that I am overlooking? Or do you believe one of these approaches is superior to the other?
//My Current Approach
const Component = () => {
const [width, setWidth] = useState();
const [size, setSize] = useState('large');
useEffect(() => {
//add event handler...
//setStates
}, [states])
if(size === 'small') return {
<SmallComponent />
} else if (size === 'large') return {
<BigComponent />
}
}