Indeed, the changes in CSS that occur when using Bootstrap are to be expected and are considered one of the common drawbacks of relying on this framework. As the name implies, the entire set of CSS from "Bootstrap" is integrated into your project. The issue lies with the extensive code within the bootstrap.css file, which includes over 3000 lines that may not all be necessary for your project. To illustrate, let's take a small excerpt from the bootstrap.css file:
a {
color: #337ab7;
text-decoration: none;
}
a:hover,
a:focus {
color: #23527c;
text-decoration: underline;
}
This snippet means that all anchor tags (<a>) in your project will default to the color
#337ab7</code unless you override this style in your own stylesheet. Problems arise when other elements in your project start behaving according to the Bootstrap CSS, even if that was not your intention - in such cases, overriding styles from <code>bootstrap.css
becomes necessary in order to cancel out unwanted effects.
It's no surprise that seasoned UI developers often express disdain towards Bootstrap due to various reasons:
- Your custom stylesheet can become cluttered.
- The HTML can become messy, especially when utilizing Bootstrap's grid system.
- You end up with a surplus of unnecessary code from Bootstrap's CSS/JS files that may never be utilized.
Interestingly, the order in which stylesheets are included doesn't always have a significant impact. In situations where you need to identify and eliminate an undesired element (like a blue shadow possibly originating from Bootstrap), overriding styles in your own stylesheet after including bootstrap.css can help resolve the issue.
In my opinion, Bootstrap is best suited for those who require a comprehensive solution for the appearance and layout of their project without much customization needed. However, if extensive customization is necessary, starting from scratch with your own CSS may be more beneficial than incorporating Bootstrap.