@import стилей для различных экранов - Вопросы по CSS

Здравствуйте. Подскажите пожалуйста такой момент: стоит ли использовать в адаптивном дизайне @import для загрузки стилей для разных экранов?
Например сейчас стили разделены стандартными "блоками" типа
а сам файл template.css состоит из десятка тысяч строк и чтобы поправить какой-нибудь стиль приходится изрядно "поползать" по файлу.

Мне кажется было бы проще, если стили для каждого экрана будут находиться в отдельном файле типа '480-599.css'.
Но как лучше такие файлы подключать? Можно ли например сделать так:
Будет ли это работать, или нет? Правильно ли так делать, или есть другие варианты?

Я мог бы и сам все узнать, потратив время на тесты и общение с гуглом... Но зачем изобретать велосипед, возможно кто0то его уже изобрел?

Код

@media (min-width: 480px) and (max-width: 599px){
   @import url(480-599.css);
}

Будет ли это работать, или нет? Правильно ли так делать, или есть другие варианты?

нет
можно подключать так

Тут нюанс. Если ресайзить экран, то это работать не будет.

Код

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 600px)" href="480-599.css"/>

Спасибо, вариант интересный, но, как сказал Shustry, "при ресайзе экрана изменений не будет", придется обновлять страницу. Хотя, часто ли мы ресайзим страницы?

Ок, может кто-нибудь еще варианты предложит?

Ну обычно media queries для "адаптива" экраны девайсов делают, а не для ресайза окна браузера.
Как вариант написать скриптец на javascript(jQuery), но при отключенном js не будет работать