How can I apply different styling with the same CSS class?

Question

How can I apply same styling for the elements with class named 'mp_m_blurb_underline_sliding' and apply some element wise styling without repeating whole?

Here I need to apply additional styling for color of the underline.

.mp_m_blurb_underline_sliding h4 {
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
    font-size: 5px;
    font-weight: 600;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;}
 
.mp_m_blurb_underline_sliding  p {
    padding-top: 10px;}
 
.mp_m_blurb_underline_sliding h4:hover {
    color: #2ea3f2;}

---

Answer 1

you need to set a different class for your styling for the underline color.

.main_css_styling{
  //lines of codes of styling
}
.underline_blue{
  //blue
}
.underline_red{
  //red
}

<h4 class="main_css_styling underline_blue"><h4/> //same main css styling
<h4 class="main_css_styling underline_red"><h4/> //same main css styling

Conclusion: by having the different class for the underline color, you don't need to repeat a lot of coding, just the 2 class with different colors that you'll place with each header tag.

Answer 2

If you are asking for the same style for multiple class names, something like common function - you need to use LESS/SCSS, both libs have Mixin , Mixins are similar to functions in programming languages.

Take a look here, docs for LESS mixin http://lesscss.org/features/#mixins-feature

for example:

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

---

But, if you don't want to use those libs, you need to create a separate class for those "changeable" styles and add it to the desired tag both class names.

For example, create a class only for underline color with a spesific color - yellow_mp_m_blurb_underline_sliding, blue_mp_m_blurb_underline_sliding, whatever you want to name it...

and use it like that

<p class="mp_m_blurb_underline_sliding yellow_mp_m_blurb_underline_sliding"> ... </p>