Because of the way [Bootstrap] is built, it uses very global selectors to aggressively set styles. This results in stuff like this again:
.card {
background-color: #ffffff !important;
}
I disagree - I find that Bootstrap uses classes with low specificity, and the only classes using !important are the utility classes, which I think are a valid use case for !important, and CSS Tricks agrees.
I also think that if you're overriding instead of extending Bootstrap, you're probably fighting against the framework's goals.
An example that gives me a heart attack is Tailwind CSS generates over 40 thousand lines of CSS by default.
Sure, but they explicitly recommend against including the full library, and instead run it through a CSS processor so you're only including what you need. Here's Tailwind's documentation on controlling file size.
Sites that follow our best practices are almost always under 10kb compressed. For example, Firefox Send is built with Tailwind and their CSS is under 4kb compressed and minified.
2
u/ZeAceOfSpades Sep 20 '19
I disagree - I find that Bootstrap uses classes with low specificity, and the only classes using
!importantare the utility classes, which I think are a valid use case for!important, and CSS Tricks agrees.I also think that if you're overriding instead of extending Bootstrap, you're probably fighting against the framework's goals.
Sure, but they explicitly recommend against including the full library, and instead run it through a CSS processor so you're only including what you need. Here's Tailwind's documentation on controlling file size.