Одностраничное приложение с несколькими файлами CSS, как разделить CSS в файлах?

Question

Одностраничное приложение с несколькими файлами CSS, как разделить CSS в файлах?

0

Я создаю одно приложение для углового кендо.
Я планирую создать одностраничное приложение.
Я хочу разделить все бизнес-логины на нескольких страницах.
Различные файлы JavaScript, CSS и HTML для каждой страницы.
Я динамически загружаю эти html файлы в соответствии с взаимодействием с пользователем.

В соответствии с архитектурой одной страницы мы должны включать весь файл 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.

Каков правильный путь?

User7723337 22 март 2016, в 09:20

Источник

0

Поскольку они являются разными селекторами, в действительности не имеет значения, будут ли они находиться в одном файле или нет. В общем случае вы должны объединить ваши css и minifiy перед развертыванием, поэтому один раз нужно загрузить только файл меньшего размера. Во время разработки ничто не мешает вам загрузить их по отдельности, конечно :)
Icepickle 22 март 2016, в 07:48
0

Если вы не используете угловую 1,5, нет хорошего пути. (Таким образом, вы можете использовать имя компонента в качестве идентификатора в CSS). Я предпочитаю использовать классы (class = "page1"), но вы можете использовать идентификаторы для определения страницы. Или вы можете просто сделать все классы элементов такими, как «page1-input». Не имеет значения.
Petr Averyanov 22 март 2016, в 10:21

Теги:

javascript

html

angularjs

css

single-page-application

1 ответ

Ещё вопросы

Поскольку они являются разными селекторами, в действительности не имеет значения, будут ли они находиться в одном файле или нет. В общем случае вы должны объединить ваши css и minifiy перед развертыванием, поэтому один раз нужно загрузить только файл меньшего размера. Во время разработки ничто не мешает вам загрузить их по отдельности, конечно :)
Если вы не используете угловую 1,5, нет хорошего пути. (Таким образом, вы можете использовать имя компонента в качестве идентификатора в CSS). Я предпочитаю использовать классы (class = "page1"), но вы можете использовать идентификаторы для определения страницы. Или вы можете просто сделать все классы элементов такими, как «page1-input». Не имеет значения.

Haitham Shaddad · Answer 1 · 2016-03-22T06-38-00.000Z

Вы не должны делить каждую страницу css на другой файл, хранить все в одном файле для уменьшения латентности и добавлять ссылку на файл css или файлы на странице index.html или на любую главную страницу.

Для JavaScript каждый Угловой контроллер будет иметь свой собственный файл, в конце вам должно быть что-то связать все эти файлы с помощью Gulp, Grunt или если вы используете Visual Studio, вы можете использовать Web Essentials или MVC Bundling

Во-первых, сборка должна соответствовать и минимизировать CSS как js. Во-вторых, никто не создает сборку, которая зависит от IDE.
@PetrAveryanov Да, вы правы, и это именно то, что я сказал, Gulp и grunt используются для объединения CSS и JavaScript при изменении файла. и оба не связаны с IDE, MVC Bundling не связан с IDE, только веб-основы и не только для этого, у него много других полезных функций
Я не собираюсь понижать это, потому что это хороший ответ для некоторых, но не для довольно большого одностраничного приложения. Наше приложение имеет 750 экранов, и мы надеемся перейти на одну страницу РЕАКТ. CSS будет интересным, потому что никто не хочет включать CSS размером 100 МБ. К сожалению, стили областей применения html5 устарели.