Best Practive - CSS Variables vs Classes

HTML-CSS
1

Hello,

I have a little doubt about when I need to use property in a class or variable css.

For instance:
For my website, I created some classes as ‘title-block’, ‘text-info’ and ‘pacifico’. I use these classes always I want to use the font family Pacifico or the style text info from bootstrap.

For compose my h2 and divide the block pieces of information, I always use these 3 classes, for example:

h2 class=“title-block text-info pacifico”

and this is the result:

what-i-do

So, how I use this composition in the whole website, is it a best practice to create a variable? There are some rules (or best practices) to use variables or repeat the classes as I did?

Or is it just about personal preferences?

My doubt is clear?

I appreciate your help.
Thanks a lot.

2

Could you give me a link to the site? I might know what’s wrong. Did you add a .h2 {…} in the tag?

3

It’s shouldn’t be a case of either/or.

So as an example, instead of .pacifico

:root {
  --titling-font: "Pacific", serif;
}

/* ...later on...*/

.titling-font {
  font-family: var(--pacifico);
}

So what you’re doing is setting a few variables that you’ll reuse all over the place. Other good things to put there are the body text font, the colour palette, maybe some base font sizes (though don’t go overboard, you generally only need a few variables). The benefit is that, if you want to try a different font or colour palette or base font sizing, you can just change one line and the whole website will switch.

Couple of things — these are very likely to dump some advanced concepts on you, but they’re very much worth understanding.

This is a really good walkthrough of someone implementing a dark theme on an app, making heavy use of variables:

And this is an article which supports the way that you’re writing classes at the minute — there is a lot of advice along the lines of “make classes semantic, ie describe what their purpose is rather than what the styling is”, eg .main-title rather than .title-font and so on. But you aren’t doing that, you’re basically writing the classes to match the CSS — even up until very recently I would have said that was the wrong approach, but I think I’m on the fence now: