[gabereiser]

Sass helps with reusable code. Bootstrap and standards also help a bit. Bulma, PureCSS, Tailwind (Pro), Concise. These provide a good starting point.

My issue is, ever since 1997, the spec hasn’t really lent itself to composability. Just a list of definitions. Maybe some shareable effects but not idempotent in and of themselves. From tables, to floating divs, to grid 960, to flexbox. We keep inventing new ways of dealing with the shortcomings of the standard.

Inheritance and composition should be paramount. Sass and Less help but still fall short of the ideal state.

When I encounter a “this isn’t lining up” problem. I think about the composition first before I think about styling. Should I put it in a div and give that the right properties that I can then shim a span in there with the rest of the required style? Or do I need a new style definition to achieve the look. I try to avoid creating new styles if I can.

[eurasiantiger]

> inheritance and composition

Also known as the C in ”Cascading Style Sheets”. Embrace the cascade instead of having every class fully represent a component-piece.

[gabereiser]

I know what the C stands for, while it does cascade, it’s not inheritance and it always lends itself to “why does this have this style? I didn’t want that!”.

[windows2020]

It's absolutely inheritance.

  .animal {
    font-weight: bold;
  }
    .animal.bear {
      color: brown;
    }

  <div class="animal bear">...</div>