0

I'm refactoring some html pages using css inheritance; trouble occurs when extending a style that extends from another style; properties from the base style are not picked up.

.font-base, .font-big, .font-bigger{
    color: GREEN;
    font-size: 11pt;
    letter-spacing: 6pt;
}

.font-big {
    font-size: 14pt;
}

.font-bigger, .font-italic {
    font-size: 30pt;
}

.font-italic {
    font-style: italic;
}

Example Fiddle

I was expecting font-italic to pick up color and letter-spacing styles from font-base, the base selector, but after reading this, css inheritance is not OO inheritance, so I'm assuming this is the expected behavior?

In the above example, however, font-italic picks up styling from its peer selector, font-bigger, which helps to avoid redundant styling, but I suspect this could get ugly real quick with multiple levels of inheritance.

Questions
Is it bad practice to repeatedly inherit class selectors? I'm asking because I don't do much CSS, and I want to be in accordance with good conventions.

The bonus question goes back to my original problem, is there a way to inherit styling that works like OO inheritance? I'm guessing SASS and LESS fall into that category?

Community
  • 1
  • 1
raffian
  • 31,267
  • 26
  • 103
  • 174
  • Do you want this? http://jsfiddle.net/surjithctly/VHKGL/10/ – Surjith S M Dec 27 '13 at 05:20
  • I know it works when placing `font-italic` at the base, yes, my question asks if it's possible to do that by inheriting from a higher level, and if doing so is considered good practice. – raffian Dec 27 '13 at 05:31
  • 1
    There is no such a thing in CSS, But in SASS you can try @extend to do this http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend – Surjith S M Dec 27 '13 at 05:41

1 Answers1

1

font-italic picks up styling as follows:

.font-bigger, .font-italic {
    font-size: 30pt;
}
.font-italic {
    font-style: italic;
}

.font-base, .font-big, .font-bigger{} does not include any reference for font-italic, hence, font-italic does not pick any style of it.(color,letter-spacing)

If you want font-italic to pick those styles, you can write:

.font-base, .font-big, .font-bigger,font-italic{
    color: GREEN;
    font-size: 11pt;
    letter-spacing: 6pt;
}

OR:

<div class="font-italic font-big">font-italic-nogreen?</div>

However, I would suggest you following structure for efficient styling :

CSS:

.font-color{
    color: GREEN;
    letter-spacing: 6pt;
}
.font-base{
   font-size: 11pt;
}
.font-big {
    font-size: 14pt;
}
.font-bigger{
    font-size: 30pt;
}
.font-italic {
    font-style: italic;
}

HTML:

<div class="font-base font-color">font-green-11</div>
<div class="font-big font-color">font-big-14</div>
<div class="font-bigger font-color">font-bigger-30</div>
<div class="font-italic font-color font-bigger">font-italic-nogreen?</div>

DEMO here.

codingrose
  • 15,563
  • 11
  • 39
  • 58
  • nice, I like the convention, just to clarify, `class="font-italic font-color font-bigger"` means font-italic extends from font-color which extends from font-bigger? you can chain in that way? – raffian Dec 27 '13 at 05:42
  • no it means that `div` will contain properties of `.font-italic,.font-color,.font-bigger` – codingrose Dec 27 '13 at 05:45
  • ok, but what happens for duplicate properties? which decleration takes precedence? – raffian Dec 27 '13 at 05:48
  • if you observe the structure, there are no as such duplicate properties – codingrose Dec 27 '13 at 05:49
  • i know, was curious to know _what_ happens when duplicates exist, I'll play with it, thank you for the info! – raffian Dec 27 '13 at 05:54