Kevin Powell - Community•16mo ago

custom property choices

Hey, i've been seeing many ways to go about custom properties and i'm wondering what exactly the most beneficial layout method is. i'd really appreciate an explanation anyone may have with this, thank you in advance! for example some people tie it in with utility classes like so-

:root {
  --clr-primary-400: orange;
}

.text-primary-400 {
  color: var(--clr-primary-400);
}

:root {
  --clr-primary-400: orange;
}

.text-primary-400 {
  color: var(--clr-primary-400);
}

and others don't utilize utility classes and primarily use custom properties, for example- (i know this one is used so it's easier to switch out properties depending on a section's design)

:root {
  --clr-primary-400: orange;
}

body {
  --clr-text: var(--clr-primary-400);
}

.example {
  color: var(--clr-text);
}

:root {
  --clr-primary-400: orange;
}

body {
  --clr-text: var(--clr-primary-400);
}

.example {
  color: var(--clr-text);
}

or could it be beneficial to use both perhaps?

8 Replies

13eck•16mo ago

As with almost everything: It Depends™️ Custom properties follow the cascade, so you want them to be high enough that they're able to be used when and where needed. But your examples seem to be less "how to use custom properties" and more "should I use utility classes".

snxxwyyOP•16mo ago

Ah gotcha, oh haha I guess you’re right, in which case in a scenario like I gave should I be using utility classes?

13eck•16mo ago

Using utility classes is a personal preference. That's what Tailwind is: nothing but utility classes! And people seem to love it. But for me, I prefer to do more scoped CSS: set some sane default stylings on most of the elements using the element selector, then use classes and/or Ids to "scope" certain stylistic choices. As an example, I'd label a certain section with an Id and use that to "scope" styles to that particular section.

Joao•16mo ago

I like to use utility classes for generic things like controlling visibility of an element, emphasizing text, etc. It also helps to have a few utility classes for common things like colors, which I then use to toggle things around using JavaScript, as opposed to add the styles directly. The most common utility classes I use are for margin: mx-2, my-2, mt-2, mb-2, etc. I don't like to use margin directly in my CSS, and instead control the positioning of the elements externally.

13eck•16mo ago

As with most things, somewhere in the middle is a good place to be. Mostly "scoped" styles with the occasional utility class. Use the right tool for the right job, I always say!

snxxwyyOP•16mo ago

Is scoped styling my second example? And when you say you give it ids, do you mean something like button—primary for example? Ohh I see, thank you for sharing that

13eck•16mo ago

An example of scoped styling for a testimonials section. It'll have images on the left with the user's quote on the right:

<section id="testimonials">
  <div> <!-- repeat this div as many times as needed for each testimonial -->
    <img src="">
    <blockquote>
      <p>{User tesimonial goes here}</p>
      <p>{user name here}</p>
    </blockquote>
  </div>
</section>

<section id="testimonials">
  <div> <!-- repeat this div as many times as needed for each testimonial -->
    <img src="">
    <blockquote>
      <p>{User tesimonial goes here}</p>
      <p>{user name here}</p>
    </blockquote>
  </div>
</section>

/* setup the main container */
#testimonials {
  display: flex;
  flex-direction: column;
  width: min(60ch, 100% - 4em);
}

/* 
  this here is how the styles are scoped
  to the current section. Ids have the highest
  specificity so if you start with one you will
  have to work really hard to overwrite them
 */

#testimonials > div > img {
  float: left;
  max-width: 40%;
}

#testimonials > div > blockquote {
  border-left: 3px solid black;
  padding-inline: 1em;
  padding-block: 2em;
}

#testimonials > div > blockquote > p:first-child {
  font-style: italic;
}

/* setup the main container */
#testimonials {
  display: flex;
  flex-direction: column;
  width: min(60ch, 100% - 4em);
}

/* 
  this here is how the styles are scoped
  to the current section. Ids have the highest
  specificity so if you start with one you will
  have to work really hard to overwrite them
 */

#testimonials > div > img {
  float: left;
  max-width: 40%;
}

#testimonials > div > blockquote {
  border-left: 3px solid black;
  padding-inline: 1em;
  padding-block: 2em;
}

#testimonials > div > blockquote > p:first-child {
  font-style: italic;
}

snxxwyyOP•16mo ago

Ah gotcha, thank you for the example!

Gaming

Programming

custom property choices