I'm updating a web apps interface to bootstrap. There's a lot of existing CSS and Javascript/jQuery i'll have to migrate, most i'll scrap and use bootstraps. But for parts of the app that use datatables and such all that code has to be migrated. I'm working on a development server. The app has a header.phtml sidebar.phtml and a lot of content area view files.

Right now i'm building static versions of view files say the header. I then open my existing header.phtml into notepad++ split screen with the static file and copy over the dynamic code. Then replace the old header.phtml with the one I just made.

To make sure the header displayed correctly I had to add all the CSS and JS from bootstrap. This is conflicting with the current CSS styles and some JS conflicts as well.

Should I go through the app note what JS I absolutely need what I don't and same with the CSS. Then strip all the CSS/JS from the old app that is not needed so it only has bootstraps and any other critical files and not worry about the way pages look as i'm making progress to updating them. I'd be working on mostly a wireframe of the old site without any styles until I get to applying bootstraps.

Is this efficient or is there another way I can get through all these files and update them easily?