One of the hardest things about being a web developer is accepting the fact that many of the people visiting your site are using old and underpowered web browsers. New features are added to web browsers all the time, but you generally can't use those features, unless you're willing to exclude lots of users who just aren't up to date.
When developing apps with Electron, this problem doesn't exist. The code you write in your Electron app executes on a single browser, Chromium. Chromium is the core of the Google Chrome web browser, so it's actively maintained by Google. It's also open source, which means that a huge community of developers are improving it daily.
Last week, a new version of Electron was released with support for CSS Custom Properties. If you’ve used preprocessed languages like Sass and Less, you’re probably familiar with variables, which allow you to define reusable values for things like color schemes and layouts. Variables help keep your stylesheets DRY and more maintainable.
Here's an example of custom properties in use:
Check out the Google Demo (requires Chrome 49+)
So. We have variables in CSS now. That's pretty neat, but it doesn't get us all the way to CSS heaven. What we really need is a way to write little bits of reusable CSS. These features have long existed in Sass, Less, and Stylus, but there's no way to do it in regular CSS.
This specification defines the @apply rule, which allows an author to store a set of properties in a named variable, then reference them in other style rules.
Here's an example of how to use the
As of this writing (April 8, 2016), the feature is very new and has not yet landed in Google Chrome or even Chrome Canary, but it is available behind a flag in the latest Chromium nightly.
To see the composable styles in all their glory, head on over to my codepen demo:
@apply implementation lands in Chromium and Electron, we'll be able to write clean, maintainable styles using vanilla CSS. But until that day comes, we'll have to continue leaning on preprocessors to fill the void.
There are at least two projects that allow you to write futuristic CSS: Myth and cssnext. Of those two projects,
cssnext is more actively maintained, and even has an open issue for implementing
Here's to the future of CSS! 🍻