How to apply ! Important to a property with multiple values

Question

I’m having some difficulties with the precedence of CSS selectors to create a dynamic background (image transition.) in the first/div section presented on the site. I currently have the following scenario:

HTML:

        <section id="intro" class="intro main style1 dark fullscreen">
            <div class="content container small">
                <header>
                    <h2 class="shade"></h2>
                </header>
                <p class="shade">[TEXTO]</p>
                <footer>
                    <a href="#one" class="button style2 down">Mais</a>
                </footer>
            </div>
        </section>
        ...
        <section id="intro4" class="intro main style1 dark fullscreen">
            <div class="content container small">
                <header>
                    <h2 class="shade"></h2>
                </header>
                <p class="shade">[TEXTO]</p>
                <footer>
                    <a href="#one" class="button style2 down">Mais</a>
                </footer>
            </div>
        </section>  

CSS: (the "ideal" would be, where I have specific properties by ID and generic properties that apply to all, by class.)

#intro {
    background: url('images/overlay.png'), url('../images/intro.jpg');
}
#intro2 {
    background: url('images/overlay.png'), url('../images/intro2.jpg');
}
#intro3 {
    background: url('images/overlay.png'), url('../images/intro3.jpg');
}
#intro4 {
    background: url('images/overlay.png'), url('../images/intro4.jpg');
}
.intro {
    background-size: 256px 256px, cover;
    background-attachment: fixed, fixed;
    background-position: top left, bottom center;
    background-repeat: repeat, no-repeat;
}  

To avoid repetition and do something like:

#intro {
    background: url('images/overlay.png'), url('../images/intro.jpg');
    background-size: 256px 256px, cover;
    background-attachment: fixed, fixed;
    background-position: top left, bottom center;
    background-repeat: repeat, no-repeat;
}
...
#intro4 {
    background: url('images/overlay.png'), url('../images/intro4.jpg');
    background-size: 256px 256px, cover;
    background-attachment: fixed, fixed;
    background-position: top left, bottom center;
    background-repeat: repeat, no-repeat;
}  

I thought about resorting to property !important, which would cause the class selector (which would normally be overridden by background-size: initial and background-attachment: initial, since ids have precedence over classes. ) did not have to be repeated, approaching a concept DRY (Don’t Repeat Yourself) - Suggestions on how to improve leave "more" DRY, are welcome.

I’ve done it in properties like font-size: 200% !important and clearly worked OK. However, in selectors with more than one value, as the case of background-size and background-attachment, the property inspector (in my case, Chrome Dev Tools.) says the property below would be invalid:

background-attachment: fixed !important, fixed !important;  

While the next:

background-attachment: fixed, fixed !important;  

Does not bring the expected result.

Could someone tell me if:

(1) It is possible to add !important on a property shorthand multi-valued
(2) If possible, how to do so, following best practices and
(3) If there is another way to achieve the same result, preserving the current HTML structure (because I need some generic models only in those <sections>/<divs>, although each one has its own background with image. ), what would be and how to implement.

Answer 1

I believe the right thing to do:

background-attachment: fixed, fixed !important;

Although it’s not bringing the result you expect, this rule in the class overrides the rule set to the ID. However, the ideal is to avoid using !important, as it makes the code harder to maintain. An interesting link on this:

http://css-tricks.com/when-using-important-is-the-right-choice/

I think the biggest problem with your code is that the ID rule is overriding the class rule, since you set rules for background in both. Wouldn’t it be simpler for you to turn those Ids into classes? This way you would have classes that define more generic rules and classes that define more specific rules and this solves your ID precedence problem, without having to use the !important. Something like:

HTML:

<section class="intro intro1">
...
</section>

CSS:

.intro1 {
  background: url('images/overlay.png'), url('../images/intro.jpg');
}
...
.intro {
  background-size: 256px 256px, cover;
  background-attachment: fixed, fixed;
  background-position: top left, bottom center;
  background-repeat: repeat, no-repeat;
}