How to keep this CSS code DRY along with satisfying no-descending-specificity

Question

Here's my CSS block:

:global {
  table, .table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    font-size: 0.8em;
    font-family: var(--font-family-roboto);
    font-weight: normal;
    letter-spacing: .25px;

    &.fixed {
      table-layout: fixed;
    }

    &.disabled {
      opacity: 0.5;
    }

    > thead {
      border-bottom: 1px solid var(--grey-light);
    }

    > thead th {
      color: var(--blue);
      text-transform: uppercase;
      font-family: var(--font-family-simplon);
      font-weight: bold;
      letter-spacing: 1px;
      text-align: left;
      line-height: 12px;

      span {
        vertical-align: top;
      }
    }

    > thead th,
    > tfoot td,
    > tbody td {
      padding: 5px;
      word-wrap: break-word;
      vertical-align: middle;
      white-space: pre;

      &:last-child,
      &:first-child {
        padding-left: 20px;
      }
    }

    > tfoot {
      background-color: var(--grey-lighter);
      font-weight: var(--font-weight-bold);
      letter-spacing: 1.25px;
      text-transform: uppercase;
    }

    > caption {
      text-align: left;
      font-size: 1.2em;
      margin-bottom: 15px;
      padding: 0 2px;
    }
  }
}

stylelint complains about:

 39:5  ✖  Expected selector ":global table > thead th" to come before selector ":global .table > thead th"                           no-descending-specificity
 41:5  ✖  Expected selector ":global table > tbody td" to come before selector ":global .table > tfoot td"                           no-descending-specificity
 47:7  ✖  Expected selector ":global table > tbody td:last-child" to come before selector ":global .table > tfoot td:last-child"     no-descending-specificity
 48:7  ✖  Expected selector ":global table > thead th:first-child" to come before selector ":global .table > thead th:last-child"    no-descending-specificity
 48:7  ✖  Expected selector ":global table > tfoot td:first-child" to come before selector ":global .table > tfoot td:last-child"    no-descending-specificity
 48:7  ✖  Expected selector ":global table > tfoot td:first-child" to come before selector ":global .table > tbody td:last-child"    no-descending-specificity
 48:7  ✖  Expected selector ":global table > tbody td:first-child" to come before selector ":global .table > tfoot td:last-child"    no-descending-specificity
 48:7  ✖  Expected selector ":global table > tbody td:first-child" to come before selector ":global .table > tbody td:last-child"    no-descending-specificity
 48:7  ✖  Expected selector ":global table > tbody td:first-child" to come before selector ":global .table > tfoot td:first-child"   no-descending-specificity

It seems like it wants me to split table and .table declarations but that will only duplicate the styles. Not sure how to keep the code DRY and satisfy stylelint. Any ideas?

These errors can be reproduced in here https://stylelint.io/demo/.

Linters do their best with static analysis, but don't just blindly follow their rules. Perhaps the solution is to ignore or disable the warning. — Adrian, Jan 18 '18 at 21:12
This is a good rule though. I was able to get rid of lot of `!important` overrides following this. So while disabling or warning them is an option, I would keep it as a last resort option. Hence this question to see if there are any other alternatives. — Mrchief, Jan 18 '18 at 21:14
do styles mean it's expected to have elements like `div.table > thead > th`? or maybe it's redundant to mention `.table` in styles at all? — skyboyer, Feb 22 '18 at 06:03
`.table` is needed to apply same styles to div based tabular layouts. So I need both. — Mrchief, Feb 22 '18 at 21:05

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Confirmed with stylelint authors that this behavior is as intended:

I believe the rule is behaving as documented. It compares the desugared CSS e.g. table > thead th:first-child has a specificity of 0,1,3 whereas .table > thead th:last-child has a specificity of 0,2,2. So the source order and the specificity order are not aligned. The desugared CSS has interwoven class selectors and element selectors. The rule is designed to warn against these.

I can think of two options, either refactor so they aren't interwoven or turn off the rules for this code block using /* stylelint-disable .. */ command comments.

The only viable solutions in this case is to refactor the code or turn off the rule. I'm opting for later.

How to keep this CSS code DRY along with satisfying no-descending-specificity

1 Answers1