Вообще, более правильным является такой вариант:
<link type="text/css" rel="preload" as="style" href="home.css" onload="this.rel='stylesheet'"/>
<script>
// Firefox не грузит стили с preload автоматически,
// поэтому в конец HTML-кода нужно добавить такое (один раз):
if (navigator.userAgent.indexOf("Firefox")>=0){
var elms = document.querySelectorAll('link[rel=preload][as=style]');
for (i=0; i<elms.length; i++){
elms[i].rel="stylesheet";}}
</script>
Стоит ли разделять стили — сложно ответить однозначно. Когда файлов много, и часть стилей дублируется, сложнее вносить изменения (приходится дублировать их в каждый файл), зато меньше траффика для пользователя и лучше скорость загрузки. Соответственно, тут нужно смотреть, насколько у раздельных файлов размер меньше, чем у общего. Если в 2—3 раза, а сайт требуется модифицировать редко, то можно разделить. Если на сайте то и дело что-то доделывается, то лучше обойтись одним app.css.
И ещё: те стили, которые описаны в теге