CSS - How to manage multiple classes that have the same values?-CodePudding

I have some css code which adds margin to H1-H6 titles. I would like to see if there is a way to make this shorter and cleaner without repeating the same rule every time. Maybe with a variable.

Sorry but I'm new, I don't know if this can actually be done. Below I post some code that I have tried, they are fine but I do not think it is optimal as a practice. Is there a better way to do this? I believe that a better management of this problem can be useful on many other aspects concerning css.

I have tried this

.article-heading > div h1 { margin-bottom: 12px!important; } 
.article-heading > div h2 { margin: 24px 0px 12px 0px!important; } 
.article-heading > div h3 { margin: 24px 0px 12px 0px!important; } 
.article-heading > div h4 { margin: 24px 0px 12px 0px!important; } 
.article-heading > div h5 { margin: 24px 0px 12px 0px!important; } 
.article-heading > div h6 { margin: 24px 0px 12px 0px!important; }

And this

.article-heading > div h2, .article-heading > div h3, .article-heading > div h4, .article-heading > div h5, .article-heading > div h6 { margin: 24px 0px 12px 0px!important; }

CodePudding user response：

please try as following:

.article-heading>div h1 {
  margin: 0px 0px 12px 0px!important;
}

.article-heading>div :is(h2, h3, h4, h5, h6) {
  margin: 24px 0px 12px 0px!important;
}

<div >
  <div>
    <h1>Hello World!</h1>
    <h2>Hello World!</h2>
    <h3>Hello World!</h3>
    <h4>Hello World!</h4>
    <h5>Hello World!</h5>
    <h6>Hello World!</h6>
  </div>
</div>

new :is() CSS pseudo-class can do it in one selector.

above is the example how you could target all headings inside a container element.

Most browsers now support :is(), but keep in mind that most browsers made before 2020 didn't support it without a prefix, so be careful about using this if you need to support older browsers.

In some cases, you may instead want to use the :where() pseudo-class, which is very similar to :is() but has different specificity rules.

CodePudding user response：

According to your question there is two answer according to my experience 1.**In simple HTML / CSS ** you can use var() like: <style> :root{--marginElement:24px 0px 12px 0px;}</style> use it where ever you want on the specific page by margin:var(--marginElement);,

2 **React ** In react you simply create a variable store value in object like const marginElement = {margin:"24px 0px 12px 0px"} and use it in style attr

CodePudding user response：

I'm not sure what your HTML looks like. A quick solution would be to create a class like margin and then utilise that in your HTML file at the places where the class needs to be used.

Like so:

.article-heading>div .margin {
  margin: 24px 0px 12px 0px!important;
}

<div >
  <div>
    <h1 >Heading 1 using .margin</h1>
    <h2 >Heading 2 using .margin</h2>
    <h3 >Heading 3 using .margin</h3>
    <h4 >Heading 4 using .margin</h4>
    <h5 >Heading 5 using .margin</h5>
    <h6 >Heading 6 using .margin</h6>
  </div>
</div>