Onderzoek: CSS in plaats van SCSS als bron

[Robbert]

Voordelen om CSS als bron te hebben:

• geen sass en sass-loader meer nodig voor:
  • component-library-angular
  • component-library-react
  • component-library-vue
  • web-component-library-stencil
  • storybook
• live reload zonder watcher <link rel="stylesheet" href="components/button-css/src/index.css" />

Voordelen van SCSS mixins hebben:

• mogelijk om CSS toe te passen op nieuwe selectors
  • selectors voor vanilla HTML button { @include utrecht-button; }
  • selectors voor legacy codebases, zoals Bootstrap: .btn { @include utrecht-button; }

---

Alle class name selectors CSS zou makkelijk omgezet kunnen worden:

.utrecht-component {
  color: red;
}

Wordt:

@mixin utrecht-component {
  color: red;
}

---

Alle pseudo-classes zouden ook niet moeilijk zijn:

.utrecht-component:hover {
  color: red;
}

Wordt:

@mixin utrecht-component--hover {
  color: red;
}

---

Alle pseudo-selectors zouden ook niet moeilijk zijn:

.utrecht-component::placeholder {
  color: red;
}

Wordt:

@mixin utrecht-component__placeholder {
  color: red;
}

---

Mixins om code te genereren hebben niet een voor de hand liggend equivalent in CSS:

@mixin utrecht-button-appearance($block, $modifier) {
  .#{$block}--#{$modifier} {
    @include utrecht-button-appearance-properties($block, $modifier);
  }

---

Mixins die voor zowel een class name als een media query worden gebruik hebben niet een voor de hand liggend equivalent in CSS:

@mixin utrecht-component--forced-colors {
  color: CanvasText;
}

.utrecht-component--forced-colors {
  @include utrecht-component--forced-colors;
}

@media screen screen and (forced-colors: active) {
  .utrecht-component {
    @include utrecht-component--forced-colors;
  }
}