CSS overblown and too opinionated?

[andykillen]

Hey Antony,

I've been taking a look at the CSS and how things work, and think its a bit overblown based on how Svelte works.

example for FacebookAuth.svelte in the CSS section there is this

button.facebook-auth:disabled {
  background-color: grey;
}

However, svelte by design will add a unique css class thus rendering this inefficient.

button:disabled {
  background-color: grey;
}

this code above would perform the same task without extra dross. I'm not suggesting to remove the class from the html, as someone might want to add further styling via a global CSS.

In addition to this, I find its quite opinionated in the way it has to be displayed. Things like the button color, text color and button width for me should be adaptable without having to fork and re-write the base.

Suggesting something like this:

<script>
export let buttonColor = "#ff9900";
</script>
<button style="--button-color: {buttonColor}"><!-- inner code --></button>

<style>
button {
  background: var(--button-color);
}
</style>

As I said, I'd rather not fork this so I can continue to get updates if there are any, so I'm thinking there should be 4 new attributes

1. buttonColor
2. disabledButtonColor
3. buttonWidth
4. textColor

Before I make a PR with this, I just wanted to run it by you to see what your thoughts are?

[harry-herskowitz]

Even better, no css!

[antony]

We could separate the CSS out, or pass style variables. Probably the latter!