I'm trying to understand how Bootstrap buttons are styled by inspecting a button element in Chrome and using the "force element state" checkboxes to see the styling for hover, focus, and active states (as well as all the combinations thereof).
One minor thing I'm confused by: Bootstrap seems to define styles for "active" and "focus" as both classes and pseudo-classes: for example, ".btn-default.focus, .btn-default:focus { ... }".
I understand how the :active and :focus pseudo-classes work, but what is the purpose of defining .active and .focus as a class? Is it part of some sort of polyfill? Used by Javascript? And if I want to override Bootstrap default styles, do I need to make sure I override the .focus and .active classes as well as the :focus and :active pseudo-classes?
If you want to set the active class through script you need an actual class (not a pseudo class). That is the only logical reason I can think of.
You might want to override them, just to be sure. However, I never do that, and I never encountered any problems... So...