u/CoVegGirl

I have a CSS library that is themeable by way of CSS variables. I set the variables in the library like so:

:root,
:host {
  --my-color: #ffffff
}

Then in their own CSS code, the user can override this value:

:root,
:host {
  --my-color: #000000
}

This seems to work, but I'm wondering why it works. The selector is the same in both cases, so I'm not sure why it's using the variable.

Also, is there something I can do to ensure that in all cases the latter variable always gets chosen?

I’m writing some CSS for users that have full control over CSS, but they don’t have total control over the HTML. So I’d like to find a way users can enable or disable features of the library. Typically I’d just have the user add or remove a class, but they might not have that ability.

Like it would be cool if I could just use a variable like so:

if var(—-some-variable) {
  p {
    font-family: system-ui;
  }
}

And then just allow the user to set the variable to turn it on or off.

:root,
:host {
  —-some-variable: false;
}

I’m working on a website that will contain a blog in addition to possibly a couple of other things. I’m trying to decide between two possible URL structures:

1. Having the blog at a subdomain (blog.domain.com)
2. Having a directory within the main domain (domain.com/blog)

Another goal is to try to reduce “lock-in” with a given host or blog provider.

Which seems like the better option?