cssの一部の変更したいだけなのですが

下記のように類似の要素があるのですが、
backgroudの色を変えたいだけなのですが、そのために新たなclass="custom-select-trigger2"
を作成しようとしています。
また、色を変えたいためにcustom-select-trigger2に設定したことでこれがJavascriptのセレクタにも
なっているため、及ぼす影響が甚大です。。
実務上はこんなやり方をしないと思うのですが、cssにはあまり慣れていないため、実際には下記のように
実際にはcssもJSも使いまわしたいのに本の一部だけ変えたい場合にはどうしていらっしゃいますか？
よろしくお願いもうしあげます。

CSS
1  .custom-select-trigger {
2      position: relative;
3      display: block;
4      width: 200px;
5      padding: 0 22px 0 22px;
6      font-size: 15px;
7      font-weight: 200;
8      color: #585858;
9      line-height: 40px;
10      background: #fff;
11      border-radius: 2px;
12      cursor: pointer;
13      border: 0.5px solid #b1b1b1;
14    }
15
16  .custom-select-trigger2 {
17      position: relative;
18      display: block;
19      width: 200px;
20      padding: 0 22px 0 22px;
21      font-size: 15px;
22      font-weight: 200;
23      color: #585858;
24      line-height: 40px;
25      background: #bfffba;
26      border-radius: 2px;
27      cursor: pointer;
28      border: 0.5px solid #b1b1b1;
29    }

行動規範の内容に同意します

回答3件

ベストアンサー

classはスペースで区切って複数指定することもできますので、以下のような形にしてはいかがですか？
変わるところだけ記述すれば大丈夫です。

html
1<div class="custom-select-trigger bglightgreen">
2  中の記述
3</div>

css
1  .custom-select-trigger {
2      position: relative;
3      display: block;
4      width: 200px;
5      padding: 0 22px 0 22px;
6      font-size: 15px;
7      font-weight: 200;
8      color: #585858;
9      line-height: 40px;
10      background: #fff;
11      border-radius: 2px;
12      cursor: pointer;
13      border: 0.5px solid #b1b1b1;
14    }
15
16  .bglightgreen {
17      background: #bfffba;
18    }

投稿2017/12/14 23:39

dit.

総合スコア3235

pegy

2017/12/17 04:44

コメントありがとうございます。早速採用をさせていただきます。このような素人な質問にもかかわらずご親切な回答をいただき、誠にありがとうございます。

行動規範の内容に同意します

1個1個の属性の違いで、どんどんクラスを使っていたら、膨大なファイルになってしまいます。他の方がおっしゃっているとおり、divタグの中で複数のクラスを指定してください。

でないと、仮に企業サイトや実務で使う場合ははっきり言ってすぐ破綻します。商用では、minifyしたり、できるだけ省エネ設計でcssやjsを書くことが求められます。さもないと、ものすごく重たいサイトになってしまいます。

投稿2017/12/17 03:21

imamoto_browser

総合スコア1161

pegy

2017/12/17 04:37

ご回答ありがとうございます。 classを複数設定することといたしました。今の所、動けば良いという発想でcssやjsを書いていたのですが、少しずつ省エネを意識しながら実践に耐えるものを作っていきたいと思います。

行動規範の内容に同意します

css
1.custom-select-trigger,.custom-select-trigger2 {
2      position: relative;
3      display: block;
4      width: 200px;
5      padding: 0 22px 0 22px;
6      font-size: 15px;
7      font-weight: 200;
8      color: #585858;
9      line-height: 40px;
10      background: #fff;
11      border-radius: 2px;
12      cursor: pointer;
13      border: 0.5px solid #b1b1b1;
14    }
15
16  .custom-select-trigger2 {
17      background: #bfffba !important;
18    }

ですかね…
2つならまだしも複数のクラス、複数の要素でこれを実現したいとなれば
CSSではどうしようもないと思いますが。。。

SASSを使ってCSSを管理するようにすれば簡単に実現できるかと思います。
https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe
SASSであれば以下のように記述できます。

sass
1  .select-trigger {
2      position: relative;
3      display: block;
4      width: 200px;
5      padding: 0 22px 0 22px;
6      font-size: 15px;
7      font-weight: 200;
8      color: #585858;
9      line-height: 40px;
10      border-radius: 2px;
11      cursor: pointer;
12      border: 0.5px solid #b1b1b1;
13    }
14
15  .custom-select-trigger1 {
16      @extend .select-trigger;
17      background: #fff;
18    }
19
20  .custom-select-trigger2 {
21      @extend .select-trigger;
22      background: #bfffba;
23    }