Я создаю одно приложение для углового кендо.
Я планирую создать одностраничное приложение.
Я хочу разделить все бизнес-логины на нескольких страницах.
Различные файлы JavaScript, CSS и HTML для каждой страницы.
Я динамически загружаю эти html-файлы в соответствии с взаимодействием с пользователем.Одностраничное приложение с несколькими файлами css, как разделить css в файлах?
В соответствии с архитектурой одной страницы мы должны включить весь файл JavaScript и CSS на главной странице, где мы динамически загружаем все страницы.
Так что мой вопрос в том, как я могу разделить стили CSS для каждого экрана.
Нужно ли иметь разные имена классов/идентификаторов для каждого экрана?
Могу ли я сделать что-то вроде ниже?
// Page1.html
<div id="myPage1">
<div class="something">Page</div>
</div>
// Page1.css
#myPage1 .something { color: black; }
// Page2.html
<div id="myPage2">
<div class="something">Page</div>
</div>
// Page2.css
#myPage2 .something { color: blue; }
Так Page1.css и Page2.css будут загружены в одно время в основной компоновке.
И когда я загружаю Page2.html, тогда будет применен стиль Page2.css.
Каков правильный путь?
Поскольку они разные селектора, в действительности не имеет значения, будут ли они в одном файле или нет. В общем, вы должны объединить свои css и minifiy перед развертыванием, поэтому нужно загружать только один файл css меньшего размера. Во время разработки ничто не останавливает вас, чтобы загрузить их отдельно от курса :) – Icepickle
Если вы используете угловое 1.5, то нет хорошего пути. (Таким образом, вы можете использовать имя компонента как id в css). Я предпочитаю использовать классы (class = "page1"), но вы можете использовать идентификаторы для определения страницы. Или вы можете просто сделать все классы элементов разными, например «page1-input». Не имеет значения. –