I think this kind of class naming is too complicated and depends on our current rendering code.
(More specifically, it depends on the following code segment,
https://github.com/mozilla-b2g/gaia/blob/ddd642bbb81f0a4d93c6d8ddec417f777e6707fd/apps/keyboard/js/render.js#L87)

I guess here, you only need to add .ar as a classname to the keyboard container.
So your CSS rules could be `.ar .keyboard-key ... `.

BTW, you could see if we could put the classname in `gaia:keyboard/layout.ar.js`.