what's the best way to pass data from html to css?

Question

normally I would do something like this

<div class="rect" style ="--bg:blue;" ></div>
.rect{
background-color : var(--bg);
...
}

but the more complex the website the uglier it becomes because of that inline style
and I also don't want to use js for styling

so, do you know the better way to do it?
from attribute maybe
from what I understand is that I can't use attr() to get the attribute value especially color , but I don't know maybe I missed something

Answer 1

Yes just use an external style sheet and use the link tag in your html to link to it.

Answer 2

You don't need to specify the inline style here , because the class is already selected by css.
Try to not use the inline styles.
and keep every file do one particular job. so
-Html for the structure of the website
-Css for the styling
-Js for user interaction

Answer 3

You can
1. Style tags directly with css
2. Write a css into the same file as your html
3. Keep css in an external file that you link to the html

There is no "best way" in general but as you mentioned yourself, keeping style and content "apart" helps keeping track over everything.

Answer 4

I know, but there are some cases where you want to style element programmatically, let's say you're working with vue js and you want to color some elements based on props while maintaining its shape, and if I use class to do it, do I really need to make class for each color?

Answer 5

I don't know css and Javascript well, but your divs need to clearly identifiable, for example by class or id.
By adding js, I guess you could also use placement information of the tag to style single elements individually?

Answer 6

in vue js we just have to add ref attribute
and access it with
let node = $refs.name
node.style.backgroundColor = 'someColor' but I think it is not really a good idea

Answer 7

Ah, I see, you want to do with vue. Sorry!

Answer 8

it's just a javascript framework so we can use loop and conditional render, aside from that we still use html and css tho, so that's why I asked here

Answer 9

U can link ur html page which contain the div tags to a css page using this tag <link rel="stylesheet" href="style.css>u should put this tag in the head section to call ur css style which u callef style.css and in this file put ur css style .rect{
Background-color:anycolor;
}