What is the best methodology for CSS theming?

1

I have a project coming up that will have 2 or 3 different themes for the whole app (like a light, dark, etc… UI). Are there any new methodologies out there to help handle this? Is something like SMACSS generally the best?

or in general I was thinking something like this?

// buttons.scss

.button {
  padding: 10px 30px;
  border: 1px solid;
}

.dark-theme .button {
  border-color: gray;
  background-color: black;
  color: white;
}

.light-theme .button {
  border-color: #89773;
  background-color: white;
  color: black;
}
1 Like
2

I’ve not had much success theming with .less and .stylus mixins. It’s simple enough to create the classes and mixens; but the static linking has been a huge pain, and the classes are statically compiled. So in-app changes wind up being nothing more than a complicated version of your example.

So, yeah… global theme classes are about as good as it gets, unless you’re willing to wire everything up via JSS and style helpers (basically the same pattern as the React Style class).

I was looking at the inheritsHelpersFrom(templateName) function from the aldeed:template-extension package as a way to share the style helpers across all my templates. But then Babel and ES2015 started taking off, so I’ve been waiting to see if the class Foo extends Bar syntax will be a better option.

1 Like