How to bundle a component and necessary css/js only instead of loading the whole css/js file?

I’m trying to build a dropdown element on my site using Semantic UI.

<link rel="stylesheet" type="text/css" href="semantic.min.css">
<link rel="stylesheet" type="text/css" href="components/dropdown.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="semantic.min.js"></script>
<script src="components/dropdown.min.js"></script>

To make it work, I need to load the css/js files like above. The problem is, some CSS in semantic ui is conflicting with my existing styles. To single out and remove them could be very time-consuming and some could be missed and mess with some part of my website. So my question is, is it possible to bundle only the dropdown component and necessary css/js in the main files so the confliction can be minimized?