Google のClosure stylesheetsを探していると思います。
クロージャー スタイルシートの機能の 1 つは名前の変更です。
次のように機能の名前を変更する閉鎖スタイルシートの例。
<style>
.descriptive-parent-class-name .descriptive-element-class-name {color:red;}
</style>
<div class="descriptive-parent-class-name">
<p class="descriptive-element-class-name">Lorem ipsum</p>
<p class="descriptive-element-class-name">Lorem ipsum</p>
</div>
になるだろう
<style>
.a-b .a-c {color:red;}
</style>
<div class="a-b">
<p class="a-c">Lorem ipsum</p>
<p class="a-c">Lorem ipsum</p>
</div>
さらなる縮小機能もあります。
クロージャ Compilerも確認してください。
Google/Facebook ページを調べると、クラス名と ID 名がランダムな 4 文字を超えることはほとんどないことがわかります。