So, your project has around 40 developers working in different parts of the web application and a new requirement just popped up. They need to show a Weather Widget in some areas of the website. The Weather Widget needs to be responsive so that it can squeeze into any available space in any section of the web application.
We can surely build a Weather Widget but there is a problem. We have no idea about the rest of the web application! For example, what are the class and ID used in its HTML, since the styles created by CSS are always global? If we were to accidentally use a class that is already being used in some other part of the HTML in the web application, our widget will inherit the style of that DOM element, which we really need to avoid!
Another problem is will be that we would have created <div>. For example:
<div class="weather...
