10 replies

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);
}

: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);
}

: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?

custom property choices

Similar Threads

Similar Threads

Similar Threads