DEV Community

loading...

You perhaps don't need CSS compiler, but only CSS in JS

artydev
・1 min read

BSS is a well known library among Mithril's lovers.

It is simpler way to do CSS in Javascript directly on the elements you're styling.

In fine, I use BSS to style elements and I use wickedElements to create 'custom elements' which does not need any polyfill

btn.png

The previous buttons are generated with the following code :

<p><btn-orange-100></btn-orange-100></p>
<p><btn-orange-90></btn-orange-90></p>
<p><btn-orange-75></btn-orange-75></p>
<p><btn-orange-50></btn-orange-50></p>
Enter fullscreen mode Exit fullscreen mode
const { define } = wickedElements

const btn_orange = (opacity) => opacity <= 1 && b`
  color : red;
  background: rgba(255, 130, 0, ${opacity})
  color: white;
  border: 1px solid rgba(255, 130, 0, 0.4);
  padding: 10px;
  box-shadow: 3px 4px 8 rgba(255, 130, 0, ${opacity});
  letter-spacing: 2px;
  cursor: pointer;
`.$hover(b`box-shadow: unset`);

const button = (o) =>  `
    <button class=${btn_orange(o)}>Custom ${o * 100}</button>
`

define("btn-orange-100", {
  connected () {
    this.element.innerHTML = button(1);
  }
})
define("btn-orange-90", {
  connected () {
    this.element.innerHTML = button(.9);
  }
})

define("btn-orange-75", {
  connected () {
    this.element.innerHTML = button(.75);
  }
})

define("btn-orange-50", {
  connected () {
    this.element.innerHTML = button(.5);
  }
})
Enter fullscreen mode Exit fullscreen mode

You can play with it here : CustomButtons

Discussion (0)