1. В настоящее время общепринято то, что языки нужно разделять по отдельным файлам - в одном файле мы пишем на языке HTML, а в другом - на CSS.
Обычно CSS пишут в отдельном файле для одного шаблона (сайта) например main.css
где идут общие стили для html страниц например:
...
<div class="content">
Hello world
</div>
....
body {
background: #F8F9FE;
font-family: "Open Sans";
min-height:100%;
}
.content {
color: white;
}
Если вы захотите сменить дизайн, то вы можете подключить другой CSS, например main-black.css, где
body {
background: black;
font-family: "Open Sans";
min-height:100%;
}
.content {
color: black;
}
Но еще например вы захотите использовать bootstrap.min.css, тогда следует создать еще один css, где надо переопределять стили (если не лезть в sass)
4. Стоит ли создавать отдельный css для каждой страницы и целесообразно ли это?
если у вас каждая страница подразумевается в разном дизайне где стандартные h1 h2 теги и.т.д должны иметь разный стиль, то да. Но если у вас на каждой странице будет
<footer class="main-footer">
<div class="pull-right hidden-xs">
Anything you want
</div>
<strong>Copyright © 2019 <a href="#">Company</a>.</strong> All rights reserved.
</footer>
то получается, для каждой страницы в каждом css файле придется писать одинаковый код..
и если вы захотите поменять например размер шрифта, то это нужно лезть в каждый файл, представляете ?
Если можно подключить один общий css, в котором будет описан main-footer, а для разных блоков писать свои классы
