Why do I need to use CSS when I can just use Javascript?

Context:
I am not new to programming, but I am new to front end development. That is, my background is mainly in scientific computing, and I now am building a basic web application.

Main:
I am starting from the ground up using Svelte/SvelteKit. I have a basic understanding of JS/TS/CSS/HTML, at least syntactically. Recently, I have run into the following issue.

I want to use custom colors/custom variable names for these colors (e.g., blue_light, blue_dark, which I have defined in another file and imported into my main +page.svelte) that match the specific pantone colors of the brand, plus it keeps things more organized for the team.

What I am seeking is a way to change several different colors of the web page at once. For example, the colors of link and visited text.

I could go through one-by-one and set each one under <main>, but this is slow and prone to errors, obviously.

Instead, I thought I could set a CSS block to do exactly that, something like as follows:

<style>
    a.link {
        color: custom_color
    }
</style>

where custom_color is defined somewhere in <script>. My intuition was that I could pass a JavaScript variable to <style> with Svelte, because I can do so in <main> with curly brace syntax. I have done some digging, and it doesn't seem like there's an easy way to get what I am seeking, so it seems like I will have to rely on some method that utilizes document.getElementsByName() in Javascript.

All of this leads me to my question: What is the point of CSS, when I can manipulate everything with JavaScript? CSS does not seem very useful if I cannot pass variables to it. Is this a bottleneck of Svelte? Am I missing something obvious?

I have looked into JQuery to manipulate the page more concisely, but this does not lead me to understanding why CSS is necessary when page manipulation can just be handled with JavaScript.

edit:

For anyone that's in a similar spot, just use sass/scss. I created a theme.scss file that I can import and use in any of my svelte pages. You'll also want to set lang='sass' in <style>.

Styles are preprocessed and compiled to separate CSS assets, this would simply not be possible if they had dynamic parts.

In general CSS should concern itself with styling/layout and JS with state/logic. This makes it easier to know where what should go/can be found and easier to read. Also there are many things you just cannot do in JS at all and vice versa, the languages are designed for their specific roles.

> CSS does not seem very useful if I cannot pass variables to it. Is this a bottleneck of Svelte? Am I missing something obvious?

In general you just don't have to. You set state, e.g. classes and attributes, and all the necessary styling or layout changes that state should entail happen in CSS. If you want to do everything "in code' you are probably thinking about problems the wrong way; Svelte has some limitations here but they really don't matter much if styling is approach the right way.

When it really is necessary, you also can pass variables by using the style attribute, setting custom properties which can be accessed in CSS. This can, for example, be necessary to move elements like popups around, when layout cannot be fully calculated in CSS.

Your question kind of does not make sense since javascript does not have any feature to control how a document should look. Only two things can control how a document should look: CSS and (the now less commonly used) HTML properties.

CSS is the main mechanism in modern web development for controlling rendering sytles. CSS properties such as margin, color, background-image and font-size control how elements should look.

There are three ways of specifying CSS styles:

1. In the element "style" property:

    <span id="hello" style="font-size:24px;color:blue">
        Hello blue text!
    </span>
   

   or in javascript:

    let hello = document.getElementById('hello');
    hello.style.fontSize = '24px';
    hello.style.color = 'blue';
   

2. In a <style> node:

    <style>
        #hello {
            font-size: 24px;
            color: blue;
        }
    </style>
   

3. Linked from an external CSS file:

    <link rel="stylesheet" type="text/css" href="hello.css" />
   

All are valid. What you use will depend on what you need.

There are some development teams or work environments that may have rules of what you can and cannot use such as banning styles on elements (thereby banning setting styles directly with javascript) but those are opinions. To know why they made such rules you'll have to ask the people who made those rules (and if I were to elaborate my opinion in this answer I can write a small book).

You can define variables in your CSS :root:

:root {
    --custom_color: #0085ff;
}

and then access them with the var() function:

a.link {
    var(--custom_color);
}

For more information, you can read this about CSS variable usage on W3Schools.

You can also edit the variables in your CSS :root with Javascript like this:

document.documentElement.style.setProperty('--var', 'value');

document.documentElement.style.setProperty('--custom_color', '#ff8500');