ASP.Net MVC Некоторые CSS и JS в общем макете не должны использоваться на страницах контента

Question

Я новичок в asp.net MVC. У меня есть некоторые представления, которые используют одну и ту же страницу с общим макетом. Теперь я получил новую страницу с общим макетом, которая имеет свой специфический дизайн и, таким образом, связана с новыми файлами CSS и JS.

Я понимаю, что контентные страницы просто вставляют свою разметку в раздел @RenderBody на странице общего макета. Но все же есть ли способ убедиться, что некоторые из css и js не должны влиять на разметку дочерней страницы.

Answer 1

Каждое правило CSS, которое вы пишете, должно быть ограничено наименьшим количеством элементов. Если что-то в макете не должно влиять на всех детей, возможно, это не должно быть в макете.

Именно поэтому классы используются, чтобы ограничить область действия и быть конкретными.

Чтобы сделать это на шаг вперед, я обычно ограничиваюсь родительским контейнером каждой страницы, чтобы убедиться, что при создании какого-либо общего правила оно не будет распространяться на весь сайт.

HTML

   <div class="main__container">

   </div>

CSS

.main__container {
   background: red;
}

Answer 2

Похоже, вы говорите, что у вас есть CSS, который ориентирован на вашу страницу макета, что также (нежелательно) влияет на ваши взгляды?

Как вы правильно сказали, @RenderBody просто вставляет содержимое вашего представления на страницу макета, и получается целый документ. Любой CSS или JavaScript будет влиять на всю страницу. Однако вы можете контролировать, на какие элементы он влияет, и я считаю, что это ваша проблема.

Вам просто нужны более конкретные селекторы в вашем CSS. Например, если у вас есть div на главной странице, для которого вы хотите создать рамку:

div { border: 1px solid black; }
<div></div>

Было бы плохо, так как это повлияло бы на каждый div на странице. Попробуйте создать классы и применить их к своим элементам, например ::10000

.div-black-border { border: 1px solid black; }
<div class="div-black-border"></div>

Та же логика может быть применена к вашим селекторам javascript (при условии, что это проблема).