“A component is a minimal software item that can be tested in isolation.”
The keyword in that phrase is isolation.
Since CSS cascades down to child elements how do you isolate things and write styles to target specific components and leave everything as is? The solution Bootstrap presented is the use of css classes with prefixes and distinct levels of each component. So each css selector is looking for distinct class names and not HTML elements. This gives you more flexibility using HTML elements without worrying about them inheriting styles from something else.
Mark Otto wrote on his blog, “Each class name begins with a prefix. Class name prefixing makes our code more durable and easier to maintain, but it also better enables us to scope styles to only the relevant elements.“
Want to save time using Bootstrap?
Bootstrap 4 Book
& Starter Templates
Learn by building a CMS admin dashboard and marketing homepage step by step.Learn More