merging css class definitions

Question

I define fonts on their own like this:

.smallboldblue{font-family:Trebuchet MS;font-weight:bold;font-size:11px;color:#3A63A5;}
.medregblue{font-family:Trebuchet MS;font-size:13px;color:#3A63A5;}
.medboldblue{font-family:Trebuchet MS;font-weight:bold;font-size:13px;color:#3A63A5;}

I also define elemets that are recurrent such menu options or section titles like this:

.MenuOptions{float:right;margin-right:0px;}
.SectionOption{float:left;margin:10px 0px 0px 50px;}

So when I create divs, I often find myself writing this:

<div class="MenuOptions medboldblue">

I know I could merge the two classes but I like to have my fonts in one class and another class to handle positioning and such.

Is there a way in CSS to have all MenuOptions be of font medboldblue so that if I want to change the font from a medboldblue to a largeboldblue I do can that change without going through every MenuOptions div? I know I can easily do this with jquery and addClass but I was wondering if there a way to do this with pure CSS.

Thanks.

Bryan Downing · Accepted Answer · 2011-03-02 22:27:18Z

1

No, you can't do that with pure CSS.

You could use SASS or LESS CSS.

Or you can add the styles from medboldblue to MenuOptions.

But really I would recommend reading about OOCSS if you want to learn about the best way to organize CSS.

answered Mar 2, 2011 at 22:27

Bryan Downing

15.5k3 gold badges44 silver badges62 bronze badges

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

Comments

jeroen · Accepted Answer · 2011-03-02 22:58:54Z

0

Unless I misunderstand your question, you can very easily do that with css.

All the properties that you define in the first section are inherited (font, color), so you only need to apply your style to the parent / menu element and the styles will be inherited by all menu options.

When you decide to change the font class, you just have to change it for the menu.

answered Mar 2, 2011 at 22:58

jeroen

91.8k22 gold badges118 silver badges132 bronze badges

Collectives™ on Stack Overflow

merging css class definitions

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related