What is bpt class used for?

[cruxcode]

Let's investigate the problem if we don't have bpt class applied to each component inside media queries?

To investigate this problem, you need to have a basic understanding of the specificity of CSS selectors. I will explain here with an example. The specifity of a CSS selector .cls-1 .cls2 .cls3 is higher than .cls-1 .cls-2 because the former has two classes and later has three classes. This implies that in cases where there are one or more same CSS properties, then the values specified with .cls-1 .cls-2 .cls3 will have higher priority.

If two CSS selectors have same specificity, then the one that comes later in the code is given preference.

Now the generated CSS file looks like this WITHOUT bpt:

.p-Home.Button1 {
 width: 20px;
}

@media only screen and (max-width: 600px) {
 .p-Home.Button1 {
  width: 10px;
 }
}

NOTE: Here it's important that we write the media query after the normal CSS otherwise media query will not work as the specifity of the CSS selector inside and outside the media query is the same. If the specifity is same whatever code comes later, gets applied.

If someone writes a media query in their external CSS that looks like this:

.p-Home.Button1 {
 width: 25px;
}

This code that the user has written in external CSS, since, it comes later than the generated code, will make the media query written in the generated code ineffective.

To avoid this situation, we have to add one more class to increase the specificity of the selectors we write inside media query.

[cruxcode]

NOTE: A CSS selector like .classname1 .classname1 is different from .classname1.classname2. Notice the difference is of space between the classnames. It's a common mistake, hence, pointing it out here.