I am working on a responsive design website to deliver content for all screen sizes. I have media queries for 5 different "steps", and the CSS file is around 30 Kb.
Would it be better to split this into separate files and make them similar to this:
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
or should I keep them in one CSS file?
Update: I just wanted to add, that my main concern was cross browser/device page opening/rendering speed, not ease of development.