> Using classes like mt10and pb10 gives you an idea about the component makeup rather than its actual role, so what if a component change its style?

Typically an component changes style in one of two ways:

1. Via media breakpoints. In this case, ACSS typically appends something to the class name: i.e.pb0 pb10@480px. Obviously the naming convention varies but in this simplistic example we’d have a padding-bottom of 0 as our base and then a value of 10px at a minimum screen width of 480px.
2. Via JavaScript. In this case, it’s no different than any other architecture. You swap out the classes you don’t need with classes you do need.

The major win with ACSS is that you never really need to refactor your CSS. It scales perfectly and you’re immune from both scope and specificity issues. It’ll also result in a smaller CSS file than any other type of architecture.

The major downside is authoring and getting team buy-in. There are a plethora of tools available to help with authoring, but it’s definitely a different approach to CSS and you have to get every team member on the same page as far as naming conventions.