Simplifying and condensing CSS

Question

I'm having trouble figuring how (or the best way) to condense CSS like this:

  /*purple*/
  #page .purple-title-background h1.et_pb_module_header,
  #page .purple-title-background span.et_pb_fullwidth_header_subhead,
  #page .purple-title-background .et_pb_header_content_wrapper {
      background: #991e66;
      box-shadow: 10px 0 0 #991e66, -10px 0 0 #991e66;
  }

  /*brown*/
  #page .brown-title-background h1.et_pb_module_header,
  #page .brown-title-background span.et_pb_fullwidth_header_subhead,
  #page .brown-title-background .et_pb_header_content_wrapper {
      background: #4c0730;
      box-shadow: 10px 0 0 #4c0730, -10px 0 0 #4c0730;
  }

  /*tan*/
  #page .tan-title-background h1.et_pb_module_header,
  #page .tan-title-background span.et_pb_fullwidth_header_subhead,
  #page .tan-title-background .et_pb_header_content_wrapper {
      background: #fff4d8;
      box-shadow: 10px 0 0 #fff4d8, -10px 0 0 #fff4d8;
  }

  /*gray*/
  #page .gray-title-background h1.et_pb_module_header,
  #page .gray-title-background span.et_pb_fullwidth_header_subhead,
  #page .gray-title-background .et_pb_header_content_wrapper {
      background: #f7f7f9;
      box-shadow: 10px 0 0 #f7f7f9, -10px 0 0 #f7f7f9;
  }

You'll note that the only thing different in each is the class like <color name>-title-background. I know there has to be a way to get this into one CSS "rule". And no, I can't use a preprocessor unfortunately.

Thanks!

Answer 1

Consider CSS variables and you can rewrite your code like this:

#page .title-background h1.et_pb_module_header,
#page .title-background span.et_pb_fullwidth_header_subhead, 
#page .title-background .et_pb_header_content_wrapper{
    background: var(--c,#fff);
    box-shadow: 10px 0 0 var(--c,#fff), -10px 0 0 var(--c,#fff);
}

.purple {
  --c: #991e66;
}

.brown {
  --c: #4c0730;
}

.tan {
  --c: #fff4d8;
}

.gray {
  --c: #f7f7f9;
}

Then simply add the color class to the element, so your html code will look like this:

 <div class="brown title-background " >...</div>

Instead of:

 <div class="brown-title-background" >...</div>