Наследование/переписывание существующих правил CSS из разных внешних файлов

Question

У меня есть существующий проект, который раньше был без Bootstrap (3), но теперь я должен изменить это и сохранить старый материал css.

Мой текущий заказ CSS:

var bundleCSS = new StyleBundle("~/Views/bundle/newBundle").Include(
        "~/Views/Shared/normalize.css", 
        "~/Scripts/jquery.ui/jquery-ui-latest.custom.css", 
        "~/Scripts/jquery.jqGrid/ui.jqgrid.css", 
        "~/Scripts/sweetalert/sweet-alert.css", 
        "~/Content/bootstrap.css", 
        "~/Views/Shared/OldButNeededLayout.css", 
        "~/Content/custom.css"); //will be rendered in that order 

custom.css используется, чтобы исправить все ошибки, которые приходят от добавления bootstrap.css к проекту.

Проблема заключается в том, что OldButNeededLayout.css имеет окольные 3000 строк css-кода и, кстати, текущий проект довольно большой.

Итак, когда перезапись начальной загрузки с этой старой CSS и чем исправление ошибок, которые пришли путем добавления начальной загрузки, чем я получаю непредсказуемые результаты. (Потому что я dont't знаю, где это будет что-то изменить)

Что сделать или как решить интеграцию bootstrap css/js в (мой) существующий проект (ы)?

Answer 1

Это звучит как грязный способ интеграции Bootstrap при попытке избежать внесения каких-либо изменений в файл OldButNeededLayout ...

В моем опыте интеграции Bootstrap в существующий проект вполне предприятие и требует внесения существенных изменений ваш HTML (добавление классов и изменение структур разметки), а также обширная модификация вашего существующего CSS, чтобы заставить его играть хорошо с Bootstrap.

Ваш подход затруднит обслуживание, а также предоставит клиенту много ненужного CSS-кода.

Я хотел бы предложить:

1. Удалите OldButNeededLayout CSS из проекта и очистить содержимое custom так, что подавляющее большинство КСС от Bootstrap.

2. Очевидно, что это не будет выглядеть ничего, как ваш сайт должен, так

3. Методически исправить каждый бит макета или стиля, который необходимо изменить, в вашем custom CSS до тех пор, пока у вас есть сайт, который напоминает ваш предварительно -Бостота сайта. Необходимо использовать биты от OldButNeededLayout, которые являются , но убедитесь, что все свойства стиля необходимы.

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

Я не вижу в этом разумного ожидания, что вы можете просто загрузить Bootstrap в большой проект и не ожидать серьезных изменений в существующих HTML и CSS.

Answer 2

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

В новом файле custom.css, вы может быть более конкретным при объявлении элемента. Так что если в OldButNeededLayout.CSS вы перегрузили стиль Bootstrap, такие как:

.divclass .jumbotron h1 { 
    color: red; 
} 

Вы могли бы объявить более высокий уровень специфичности в файле custom.css, чтобы убедиться, что он будет перекрывать то, что вы в OldButNeededLayout.css:

.parent .divclass .jumbotron h1 { 
    color: blue; 
}