menggandakan satu jenis tipe css yang disertai script atau tidak dengan satu huruf

terkadang saya sebagai masyarakat awam di dunia pengkodean berpikir , bagaimana yah caranya menggandakan susunan css yang telah ada .
sedangkan kita pada mengetahui , bahwa css dengan susunan yang sama akan saling adu kekuatan hingga mereka saling mengalah apabila mereka terpasang berduaan .

contoh : ada css button [tombol], kita ingin memakai css tersebut dengan tampilan button yang berbeda beda .
maka dalam hal ini kita jangan terpaku dengan teori yang baku , akali saja . yang kita butuhkan cuma bagaimana css tersebut bekerja , titik.

untuk membuat css dengan susunan yang sama dapat bekerja maka pakai cara yang simpel
caranya adalah cukup tambahkan 1 huruf atau angka pada ID dan HTML nya , maka selesai perkara .
bahasa daerahnya begini : ID sebagai IR DESAIN , HTML nya adalah BURUH PELAKSANA .
contoh;

.button {
1x1=1;}

.button:hover {
1+1=2; }

.button:active {
1:1=1; }

<a target='b' href="/" class="button">
<img src="/" class="button"> BLA BLA BLA</a>
dengan susunan diatas , kata button kalian bisa tambahkan menjadi button1 ,terserah mau pakai angka atau A-Z, atau mau memakai nama kalian sendiri , browser tak pernah melarang .
dengan cara ini maka css diatas dapat kalian pakai dengan tipe button yang berbeda beda .
hasilnya:

.button1 {
1x1=1; }

.button1:hover {
1+1=2; }

.button1:active {
1:1=1; }

<a target='b' href="/" class="button1">
<img src="/" class="button1"> BLA BLA BLA</a>

bagaimana , rumit apa susah..

bagaimana jikalau memakai script.
contoh script [ini hanya contoh yah] : ingat , ID terkadang di ganti dengan CLASS namun saja 1:1=1

$(document).ready(function() {
$("#button p").click(function () {
});

untuk memakai script diatas , tambahkan juga di ID nya [#] , hingga susunannya menjadi:

$(document).ready(function() {
$("#button1 p").click(function () {

}); ok, moga mudah dipahami.