How should i structure my CSS

So far im just familiar with html/css/js , the way i structure my css , is that i have my Sass file and media queries separately and then compile them to one css file , a friend of mine told me he code every section of the webpage in a separate file and includes the media query into them , (coz as he said is more efficient way when i use react library later. ) then he compile them.

I’m not sure about efficiency, but your friend’s way certainly makes sense semantically when working with React. When you build a React app you are building it out of several different little components, each one usually having its own .js file. Each component having its own CSS certainly will make reading and debugging code easier.

but now im learning how to divide my css content with Sass syntax will it also still be compatible for react ?