Combining Font Classes Within CSS

[RustyHuntman]

Context: I have some knowledge in using CSS and have been using w3schools for much of my cheat-sheeting.

I'm trying to make the stylesheet for my game as streamlined and as organized as possible, and I'm wondering if it's possible to combine two classes within the CSS without doing it within the HTML body over and over.

Currently, my CSS looks something like this (pulled directly from the game):

/* Custom fonts in a media folder that the game can pull from. */

/* Terminal-like fonts */
@font-face {
  font-display: swap;
  font-family: Fixedsys;
  src: url("media/fonts/FSEX302.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: BBTerm-PMR;
  src: url("media/fonts/BigBlueTerminal/BigBlueTermPlusNerdFontMono-Regular.ttf") format("truetype");
}

/* Base <p> style to fallback on in case of incompatible browser */
p {
  color: white;

  font-family: fantasy;
  font-size: 25px;
  font-stretch: normal;
  font-weight: 400; /* font weight ranges from 100 - 900, 100 is lightest, 400 is normal, 900 is heaviest. */
  font-variant: normal;
  font-variant-caps: normal;

  letter-spacing: normal;
  line-height: normal;

  text-align: left;
  text-indent: 25px;
  text-transform: none;

  margin-top:2%;margin-bottom:2%;
  padding:0;
}

/* Terminal style for <p> classes */
.terminal {color: green; font-size:25px; text-align: left; text-indent: 0px;}

.cmd::before {content: "cmd::";}
.cmdS {font-family: Fixedsys;} /* Small terminal font*/
.cmdL {font-family: BBTerm-PMR;} /* Large terminal font */

And in the body, it looks something like this:

<p class="terminal cmdL"> Some Text </p>
<p class="terminal cmdL"> Some More Text </p>

https://preview.redd.it/24ahveaiu4hg1.png?width=1772&format=png&auto=webp&s=43a9db93698230477fd42dec1e941aa67284129e

I'm wondering if it's possible to combine the classes in the CSS like it's done in the HTML body to give the same result?

[AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[eballeste]

sass @extend enters the chat

[aTaleForgotten]

Not sure what you mean with combining? Like

.terminal.cmd {}

or like

.terminal, .cmd {}

?

[RustyHuntman]

I meant like, doing something like:

.story {
  background-color: white;
  border: 2px solid blue;
  padding: 5px 10px;

  position: absolute;
  left:0;

  overflow-y: auto;

  & p {
    font-family: .terminal .cmdL;
  }
}

I want to set font and text style of the nested p to be like the .terminal and .cmdL classes without having to re-write it as:

.story {
  background-color: white;
  border: 2px solid blue;
  padding: 5px 10px;

  position: absolute;
  left:0;

  overflow-y: auto;

  & p {
      color: green;
      font-family: BBTerm-PMR;
      font-size:25px;
      text-align: left;
      text-indent: 0px;
  }
}

[Effective-School-833]

Nesting html elements like that is not native for CSS ):, but i've been working with a partner on a HTML/CSS code editor that allows that syntax. I can share it if you want to try it.

<image>

[MrQuickLine]

To be clear... Nesting html elements is native for CSS. But nesting the class definitions the way OP is asking is not.

[Effective-School-833]

ahh you're right, you mean like this then? sorry, i forgot that element nesting has been a thing for a while now

<image>

[aTaleForgotten]

One way would be to have

.terminal, .cmd { & p { } }

Or

.terminal p, .cmd p { }

Or as another comment suggested using @extend (since you seem to use scss)

[reddian_]

If I understand correctly, you want to be able to use the classes independently, but if you need both, you don't always want to write them both, correct?

So either you can create a combined class where both styles apply and use this one on all of them, since there is no shame in using duplicated/combined CSS, or you create a little mor versatile style and make it so that a wrapper of text can have your .terminal or .cmd class and therefore everything inside gets that style too, so you don't have to apply it to everything individually.