Please help simplify this CSS

Hello,

I know some basic CSS, but I'm looking at some advanced CSS and I'm trying to make sense of it. I would like to know 1) how to interpret the CSS below, and 2) if I can simplify certain parts of it:

Code:

---

  div {
    height: 100%;

    &:first-child {
      border-top-left-radius: 0.4rem;
      border-bottom-left-radius: 0.4rem;
    }

    &:last-child {
      border-top-right-radius: 0.4rem;
      border-bottom-right-radius: 0.4rem;
    }

    &[data-color="acm-cat1"] { background-color: #CCE4E7 }
    &[data-color="acm-cat2"] { background-color: #99C8D0 }
    &[data-color="acm-cat3"] { background-color: #66ADB8 }
    &[data-color="acm-cat4"] { background-color: #3391A1 }
    &[data-color="acm-cat5"] { background-color: #007689 }
    &[data-color="acm-cat6"] { background-color: #004D5A }
    &[data-color="acm-cat7"] { background-color: #003138 }
 
    // &[data-value="0"] { display: none; }
    @for $num from 1 through 100 {
      &[data-value="#{$num}"] { width: 0% + $num}
    }
  } // end .c-barChart__data
}

---

First, these styles seem to apply to divs. Next, the background-color styles seem to apply to any divs with the attribute data-color="acm-cat#". Is this right so far?

Here's another set of styles:

Code:

---

.c-riskCatBreakdown {
  margin-left: 8.2rem; // this is 4rem margin + the spacing required for the absolute positioned labels #1, #2, #3.

  label { font-weight: 300; }

  &__labelGroup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 250px;

    label {
      display: inline-block;
      font-size: 1.4rem;
      text-transform: uppercase;
      color: #7C7C7C;
      margin-right: 5px;

      &.acm-cat1 { &::before { background-color: #CCE4E7 } }
      &.acm-cat2 { &::before { background-color: #99C8D0 } }
      &.acm-cat3 { &::before { background-color: #66ADB8 } }
      &.acm-cat4 { &::before { background-color: #3391A1 } }
      &.acm-cat5 { &::before { background-color: #007689 } }
      &.acm-cat6 { &::before { background-color: #004D5A } }
      &.acm-cat7 { &::before { background-color: #003138 } }

      &::before {
        width: 1rem;
        height: 1rem;
        content: " ";
        display: inline-block;
        align-self: center;
        border-radius: 100rem;

        margin-right: 0.5rem;
      }
    }
  }
}

---

These styles seem to apply to any element that has the class "c-riskCatBreakdown". Next, I'm guessing the "&__labelGroup" means that the styles under this get applied to any element that has the class "c-riskCatBreakdown__labelGroup". Next, we see a bunch of styles under "label", which means they apply to all labels with the class "c-riskCatBreakdown__labelGroup". Finally, we have a set of classes named "acm-cat#" that define background-color, and these get applied to all labels with the class "c-riskCatBreakdown__labelGroup" and one of "acm-cat#". <-- Have I got this right?

Now, my question about simplification. I want to apply the acm-cat# styles to a set of list items. I'm doing it like this:

Code:

---

.tag-list li {
    display: inline-block;
    margin-right: 5px;
    padding: 3px;
    border-radius: 5px;
    font-size: 14pt;
    color: white;
    cursor: pointer;
    height: 30px;

    &[data-color="acm-cat1"] { background-color: #CCE4E7 }
    &[data-color="acm-cat2"] { background-color: #99C8D0 }
    &[data-color="acm-cat3"] { background-color: #66ADB8 }
    &[data-color="acm-cat4"] { background-color: #3391A1 }
    &[data-color="acm-cat5"] { background-color: #007689 }
    &[data-color="acm-cat6"] { background-color: #004D5A }
    &[data-color="acm-cat7"] { background-color: #003138 }
}

---

I could have set the background-color of the list items as classes, as in:

&.acm-cat# {background-color: #...}

But herein lies the question of simplification: how would I consolidate the background styles into one place instead of three different places in the CSS? And what would be the easiest way to do this: defining background-color based on the data-color attribute of based on classes?

I could put the background-color styles into a class on its own, but that would require some refactoring of the html and javascript, so I'd prefer (if possible) to move the background-color styles to a single common place and add a reference to them at the spots where they used to be. That way, they should still be included in the original CSS (at least at run time) and no refactoring of html or javascript should be required.

Thanks for your help.