css nested classes, how to not repeat code?

Question

I have a css class that is called button.blue:

button.blue { background-color: blue; ... }
button.blue:active { background-color: darkblue; ... }
button.blue:hover { background-color: lightblue; ... }

To use it, I do the following:

<button class="blue">hello</button>

Now this allows me to have a blue button that has the text "hello" on it. I want to have blue buttons of all different sizes. I don't want to repeat code. What is the best way to do this?

I've tried googling but my question is too vague I think for me to find an answer. I have tried searching for CSS nested classes, grouping, etc. and tried a few random things but nothing seems to work.

What exactly is your issue? The code you showed can be applied to many different buttons as is. — Holger Just
– Holger Just, Commented Sep 19, 2011 at 1:25
Oh, and you should use semantic class names which convey the actual function of the button instead of the intended formatting. Always think of the separation of content in HTML, behavior in Javascript and formatting in CSS. — Holger Just
– Holger Just, Commented Sep 19, 2011 at 1:28

LeeR · Accepted Answer · 2011-09-19 01:23:47Z

2

You would just have a class for different widths so

.button_1 {width:100px;}
.button_2 {width:200px;}
.button_3 {width:300px;}
.button_4 {width:400px;}

And so forth. Or some other such naming system. You can have more than one class per element so this will work fine.

<button class="blue button_1">hello</button>

answered Sep 19, 2011 at 1:23

LeeR

1,63411 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

duante · Accepted Answer · 2011-09-19 01:25:12Z

0

You could have some classes that are just sizes like

.big { width: 100px, height: 100px }
.small { width: 20px, height: 20px }

Then you would do

<button class="big blue">hello</button>

answered Sep 19, 2011 at 1:25

duante

1741 silver badge9 bronze badges

2 Comments

Ringo Blancke Over a year ago

this is what I was looking for ... I didn't know how to setup the HTML either actually (i.e. didn't know I could do class ="big blue"). Sad what happens when one learns web development as fast as possible through just tutorials :/

duante Over a year ago

awesome... try learning from tutorials 10 years ago :( there was no stack overflow in those days.

Sam Becker · Accepted Answer · 2011-09-19 01:23:56Z

0

All your properties from button.blue will be inherited by button.blue:active and button.blue:hover. There is no need to repeat code accept for the properties you wish to change.

answered Sep 19, 2011 at 1:23

Sam Becker

19.7k14 gold badges63 silver badges81 bronze badges

Comments

Matt Briggs · Accepted Answer · 2011-09-19 01:24:38Z

0

You are able to chain selectors in css. Something like

button.blue.small { height: 20px; }

will only match if it is on a button with a blue class and a small class

answered Sep 19, 2011 at 1:24

Matt Briggs

42.4k17 gold badges103 silver badges128 bronze badges

Collectives™ on Stack Overflow

css nested classes, how to not repeat code?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related