---
title: "Discussion on \"TAC: A new CSS methodology\" | Hashnode"
description: "Discussion on \"TAC: A new CSS methodology\". All our favorite CSS methodologies were created more than 10 years ago in the pre-Web Components era. It's time for a new approach."
url: "https://hashnode.com/posts/tac-a-new-css-methodology/6465a27a1ccb72e1201a19ea"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [TAC: A new CSS methodology](https://jordanbrennan.hashnode.dev/tac-a-new-css-methodology?utm_source=hashnode&utm_medium=feed)

All our favorite CSS methodologies were created more than 10 years ago in the pre-Web Components era. It's time for a new approach.

May 18, 2023 · 17 min read · jordanbrennan.hashnode.dev  
Updated Aug 21, 2023  
Read the article

-   [#css](https://hashnode.com/tag/css)
-   [#html](https://hashnode.com/tag/html)
-   [#web-development](https://hashnode.com/tag/web-development)
-   [#web-components](https://hashnode.com/tag/web-components)
-   [#design-systems](https://hashnode.com/tag/design-systems)

## Written by

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

@jfbrennan · Tulsa

  
[View profile](https://hashnode.com/@jfbrennan)

Frontend engineer

## Responses 1

Markdown supported · ⌘↵ to post

[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.