Is it considered bad practice to apply custom CSS on top of standard Bootstrap CSS for a button?
Should I completely remove Bootstrap and use only custom CSS? If so, what is the trade-off in terms of performance? Another web developer mentioned that additional classes create overhead when compiling the web page. How can I measure the impact of what seems like a minor modification?
For example, here is code showcasing how a link styled as a button using Bootstrap CSS classes:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.custom-btn-css{
font-size: 16px;
font-weight: bold;
border-radius: 30px;
border-width: 0;
margin-top: 15px;
padding: 10px 32px;
color: white;
}
</style>
<div class="container">
<a class="btn btn-primary btn-large custom-btn-css" href="#">Button Example</a>
</div>