Status Quo

CSS libraries, like Bootstrap, often require that you add special class names to everything in your code.

That is

  1. Tedious to do.
  2. Error-prone; mistakes are easy.
  3. Hard to switch from, to a different CSS library.
  4. Invasive and disruptive. It makes code very hard to read when it's littered with foreign class names.

Tame it!

ScalaCSS isn't magic that makes everything taste like rainbows but it can mitigate much of the problem-space dealing with external CSS and the issues mentioned above.

When writing inline stylesheets, you have a new property at your fingertips: addClassNames.


object MyStyles extends StyleSheet.Inline {
  import dsl._

  val button = style(
    addClassNames("btn", "btn-default"), // Bootstrap classes                     // Optional customisation

You can declare that when your style is applied, additional class names will also be applied. This means that you can put all of your Bootstrap (for example) class names in a single file with all your other style properties and have it be inivisble to the rest of your app. If you later decide to drop Bootstrap for Materialize or Groundwork, then you change the addClassNames attributes in a single file and you're about done.