---
title: "Comment by Stephen James on \"TAC: A new CSS methodology\" | Hashnode"
description: "Designed systems that I have used, use CSS variables for items such as standard colors, etc. Is it your opinion that isolating these "theme" elements"
url: "https://hashnode.com/posts/tac-a-new-css-methodology/6465a27a1ccb72e1201a19ea/comment/650327a4770802e8a4adc750"
---

[Discussion](https://hashnode.com/posts/tac-a-new-css-methodology/6465a27a1ccb72e1201a19ea)

Comment [TAC: A new CSS methodology](https://hashnode.com/posts/tac-a-new-css-methodology/6465a27a1ccb72e1201a19ea)

[Stephen James](https://hashnode.com/@sjames58)

[Sep 14, 2023](https://hashnode.com/posts/tac-a-new-css-methodology/6465a27a1ccb72e1201a19ea/comment/650327a4770802e8a4adc750)

Designed systems that I have used, use CSS variables for items such as standard colors, etc. Is it your opinion that isolating these "theme" elements to utility classes would be a better approach? Also, would you do "theming" through more complicated utility classes or have multiple less complex classes added to elements to be "themed"?

[Jordan Brennan](https://hashnode.com/@jfbrennan)

[Sep 14, 2023](https://hashnode.com/posts/tac-a-new-css-methodology/6465a27a1ccb72e1201a19ea/comment/650327a4770802e8a4adc750#reply-6503376f770802e8a4adc8fe)

Yes, the TAC methodology actually _requires_ these theme elements (aka design tokens) to be implemented as CSS variables (aka CSS Custom Properties). There's a section on that here [jordanbrennan.hashnode.dev/tac-a-new-css-methodol…](https://jordanbrennan.hashnode.dev/tac-a-new-css-methodology#heading-scaling-projects-with-tac)

In practice, these design tokens are shared by every bit of the UI, which ensures the overall theme you're referring to:

-   Components like Badge and Alert use them
-   Utility classes use them
-   Your app would also use them for any additional custom styling

Every design token is likely to have a utility class or more. Color design tokens for example would not only be used internally by the components, but also for utility classes like text color, background color, border color, etc. Same goes for typography tokens, spacing tokens, and others.

Would definitely do less complex utility classes and use more of them to style something. The methodology states that utility classes should be single-purpose like `.flex` is just `display: flex`. Very much the same pattern as Tailwind.