Is it worth to create a "temporary css" with javascript?

Question

I'm thinking about creating a script that allows me to create sort of dynamic classes in a style tag. i.e.:

HTML:

<p class="padding-top-24">test</p>

SCRIPT:

create a <style> tag;
check if .padding-top-24 already exists in this tag, if not, create the class and use her in the element;

But is it worth? I mean, I know that I could simply use style="padding-top: 24px", but what if I want something more specific like a class that the element only has padding-top: 24px when the users is on a small screen?

Again, I could use @media (max-width: 600px) { .pading-top-24px { padding-top: 24px } }, but I would need to create a @media every time that I want something to have differents properties in specific moments.

Wouldn't it be better if I created a script that do it for me every time that I simply use a class? Using specific sizes for creating the medias. Something like:

HTML:

<p class="s-font-size-20 m-font-size-24">Hello</p>

SCRIPT:

check the class and use/create the media that it should be part of (in this case, "s" stands for "small" or "<600px" and "m" stands for "medium" or "<992px").
add a listener to the media and apply that class if the screen size corresponds.

Does it makes sense? Would it be usefull? Does it already exists?

Part of what you are describing sounds very similar to the functionality Bootstrap provides. You can use the grid system and define different views for different screen sizes. You can also use predefined classes and add them dynamically using javascript — danny bee
– danny bee, Commented Apr 11, 2019 at 18:59

Bibberty · Accepted Answer · 2019-04-11 18:53:40Z

1

Here is a crude demo, but I think this gives you and idea of how CSS Variables can be used to create a more dynamic experience.

document.addEventListener('click', (e) => {
  if(e.target.matches('button')) {
    let color = document.querySelector('#colorList').value;
    document.documentElement.style.setProperty('--fontColor', color);
    
    if(color === '#0f0') {
      document.documentElement.style.setProperty('--fontSize', '40px');
    }
  }
});

:root {
    --fontColor: #0069aa;
    --fontSize: 20px;
   
}

.test {
  color: var(--fontColor);
  font-size: var(--fontSize);
}

h1 {
  color: var(--fontColor);
}

<h1>Heading Test</h1>
<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>
<span class="test">Test</span>
<button>Click</button>
<select id="colorList">
  <option value="#f00">Red</option>
  <option value="#0f0">Green</option>
  <option value="#00f">Blue</option>
</select>

answered Apr 11, 2019 at 18:53

Bibberty

4,7862 gold badges11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

peluargo Over a year ago

css variables are atually something that I completely forgot lol. But what if you want to specify what css property that you want and its value right in the class as well? Something like "m-padding-0 m-font-size-20" woudn't I need to create by hand all the specific classes into the css file in this way?

peluargo Over a year ago

The ideia is to create a script that will automatcally create this new class with it's value at the right @media size

Bibberty Over a year ago

I think variables is your answer here, with scenario you described you would just have the two properties set as a default value and alter as required.

Collectives™ on Stack Overflow

Is it worth to create a "temporary css" with javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related