如何查明和解决由多个外部Javascript和CSS引起的冲突？

Question

While building a page, I have imported multiple (more than 10) external CSS and Javascript, including but not limited to timerangepicker, bootstrap and tabber.

The problem is, there seems to be some conflict when all of them load together, as they cause my UI to be totally messed up (some elements would show up in the wrong places, some features such as timerangepicker won't work).

I'm pretty sure the conflict is caused by all these files loading together, because some UI will become normal again when I disable some of the external files. These are the external files:

    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css">
    <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

    <link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE;?>/css/style.css">
    <link href="<?php echo APP_WEBSITE;?>/css/tabber.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo APP_WEBSITE;?>/css/styles-pop.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<?php echo WEBSITE;?>/js/tabs_slides.js"></script>
    <script type="text/javascript" src="<?php echo WEBSITE;?>/js/tabber.js"></script>
    <script src="<?php echo WEBSITE; ?>/js/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../templates/layout/css/bootstrap.css">
    <link rel='stylesheet' href="<?php echo APP_WEBSITE;?>/css/browsebootstrap.css">
    <link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE; ?>/css/checkbox.css">
    <link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE;?>/css/ver02/search_payment.css">
    <script src="<?php echo WEBSITE; ?>/js/browse.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <link href="css/form.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/scrollbar.css">
    <link href="css/topmenu.css" rel="stylesheet" type="text/css" />
    <link href="css/search.css" rel="stylesheet" type="text/css" />
    <link href="css/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="css/font-awesome-animation.min.css" rel="stylesheet" type="text/css" />

I know there are some redundancies, but strangely, some of the features will only work if I put it this way.

My question is, how do I pinpoint exactly which files are in conflict with which files? There are just too many of them. And how can I avoid the conflict?

Thanks and cheers.

Answer 1

First move is to strip of the duplicate file references. For example you have 4 referenced jquery files of different vesions. Use just one.

<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css">
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE;?>/css/style.css">
<link href="<?php echo APP_WEBSITE;?>/css/tabber.css" rel="stylesheet" type="text/css" />
<link href="<?php echo APP_WEBSITE;?>/css/styles-pop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo WEBSITE;?>/js/tabs_slides.js"></script>
<script type="text/javascript" src="<?php echo WEBSITE;?>/js/tabber.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE; ?>/css/checkbox.css">
<link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE;?>/css/ver02/search_payment.css">
<script src="<?php echo WEBSITE; ?>/js/browse.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/form.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/scrollbar.css">
<link href="css/topmenu.css" rel="stylesheet" type="text/css" />
<link href="css/search.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome-animation.min.css" rel="stylesheet" type="text/css" />