CODEWITHSUNDEEP
cssstylesheet
Gublooo
Gublooo

Reputation: 2618

CSS - Extending class properties

I'm pretty new to CSS and have been finding my way around so far. I am creating these button like links with shadows and stuff. Now there are several such buttons required on the site - everything about the buttons is same - except few properties change like width and font size.

Now instead of copying the same code - over and over for each button - is there a way of extending the button and adding just the properties that change.

Example of two buttons - css

.ask-button-display {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
width:350px;
font-size: 20px;
font-weight: bold;
padding:10px;
}


.ask-button-submit {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
font-weight: bold;
width:75px;
font-size: 12px;
padding: 1px;
}

And this is how I'm currently using it in my html

<a href="/" id="ask-question-link" class="ask-button-display">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

So I'm wondering if there is a cleaner way to do this - like

.button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}

AND THEN SOMEHOW EXTEND IT LIKE
.button #display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}

.button #ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}

But I'm not sure how to do this. Thanks for your inputs

Upvotes: 24

Views: 84527

Answers (8)

RainbowGiantSquid
RainbowGiantSquid

Reputation: 91

Without changing/ adding new classes you can add styles to all elements with a class name starting with "ask-button"... (whatever the elements with the class are; button, anchor, div etc.) let's say your buttons are divs then:

 div[class^="ask-button"] {
   // common css properties
 }

You can also list all classes that will have common properties like this:

.ask-button-display,
.ask-button-submit {
   // common css properties here
}

And then you add the separate styling for each button:

.ask-button-display{
    // properties only for this button
    }

.ask-button-submit {
   // properties only for this button
}

Upvotes: 0

Marco
Marco

Reputation: 369

You might want to try this: 

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button.submit {
    background-color: green;
}
.button.submit:hover {
    background-color: #ffff00;
}

This way you avoid repeating the word and will able to use the classes in the elements like this:

<a href="/" id="btnAsk" class="button">Ask a Question</a> 
<a href="/" id="btnSubmit" class="button submit">Submit</a>

See the example in JSFiddle (http://goo.gl/6HwroM)

Upvotes: 19

Rick Donohoe
Rick Donohoe

Reputation: 7271

Rather than repeat the common "Add a button class to the element" answer I'm going to show you something new in the weird and whacky world of new age CSS, or better known as SCSS!

This reuse of code in stylesheets can be achieved with something called a 'Mixin'. What this allows us to do is reuse certain styles by using the '@include' attribute.

Let me give you an example.

@mixin button($button-color) {
    background: #fff;
    margin: 10px;
    color: $color;
}

and then whenever we have a button we say

#unique-button {
    @include button(#333);
    ...(additional styles)
}

Read more here: http://sass-lang.com/tutorial.html.

Spread the word!!!

Upvotes: 7

Mali
Mali

Reputation: 131

You may want to look into Sass. With Sass you can basically create variables in your css file and then re-use them over and over. http://sass-lang.com/ The following example was taken from Sass official website:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Upvotes: 2

jacktheripper
jacktheripper

Reputation: 14229

You can add multiple classes to one element, so have one .button class which covers everything, then a .button-submit class, which adds things in.

For example:

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button-submit {
    background-color: green;
}​

See a live jsFiddle here

In your case, the following should work:

.button {
    background: #8BAF3B;
    border-radius: 4px;
    display: block;
    letter-spacing: 0.5px;
    position: relative;
    border-color: #293829;
    border-width: 2px 1px;
    border-style: solid;
    text-align:center;
    color: #FFF;
    width:350px;
    font-size: 20px;
    font-weight: bold;
    padding:10px;
}


.button-submit {
    width:75px;
    font-size: 12px;
    padding: 1px;
}​

See a live jsFiddle here

Upvotes: 24

j08691
j08691

Reputation: 207919

You can do this since you can apply more than one class to an element. Create your master class and and other smaller classes and then just apply them as needed. For example:

<a href="/" id="ask-question-link" class="button submit">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

This would apply the button and submit classes you would create while allowing you to also apply those classes separately.

Modify your code example along the lines of:

.master_button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}
AND THEN SOMEHOW EXTEND IT LIKE
.button_display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}
.button_ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}

And apply like:

<a href="/" id="ask-question-link" class="master_button button_ask">Ask a Question</a> 
<a href="/" class="master_button submit" id="ask-button-submit">Submit</a>

Upvotes: 4

Ana
Ana

Reputation: 37179

Add a button class to both links for the common parts

.button {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
}

Keep in your other classes the rules that aren't common.

And your HTML will be 

<a href="/" id="ask-question-link" class="button ask-button-display">Ask a Question</a>
<a href="/" class="button ask-button-submit" id="ask-button-submit">Submit</a>

Upvotes: 1

Craig Swing
Craig Swing

Reputation: 8162

.ask-button-display,
.ask-button-submit {
  /* COMMON RULES */
}

.ask-button-display {

}

.ask-button-submit {

}

Upvotes: 2

Related Questions