Only for clarifying. This not an issue of using 'atomic' CSS or not (this is other discussion we could have in other thread, I am totally agree with @Rik approach). However this is an issue of how SMS Apps styles are now, and how these styles interact with our Building Blocks (which are not using OOCSS or Atomic CSS...).

Taking into account the priority in CSS, I have to compete in SMS with styles as https://github.com/mozilla-b2g/gaia/blob/master/shared/style/input_areas.css#L190, so sometimes it's more than tough to achieve our goal with 'classes' or a different structure. Remember we are 'tied' sometimes to the benefits/drawbacks of Building Blocks.

As the goal of this patch is to change our structure to a flex model (which from a performance point of view is a more than big win), without modifying the JS or markup more than needed (so refactoring the whole thing is out of the scope here), Im going to try to clean the IDs as you suggested taking into account the constraints explained before.