The title is just a click bait and I won’t claim I invented this since it is just my way of applying the Inverted Triangle architecture (AKA ITCSS) which was first introduced by Harry Roberts.
In simplest words, ITCSS is a methodology for organizing CSS files within layers-from generic to explicit, and from low to high specificity.
If you want to learn more in depth, you should check out Harry’s talk.
While ITCSS has 7 layers (Settings, Tools, Generic, Elements, Objects, Components, Utilities), TROCT has 5 layers which are:
Before I explaining responsibilities for each layer, I’ll show you how I’m applying it at this very project.
│ ├── _color.pcss
│ └── _space.pcss
│ ├── _element.pcss
│ ├── _theme.pcss
│ └── _typography.pcss
│ ├── _hr.pcss
│ ├── _wrapper.pcss
│ └── _skip-link.pcss
│ ├── _intro.pcss
│ ├── _navigation.pcss
│ ├── _post-list.pcss
│ ├── _post-meta.pcss
│ ├── _post.pcss
│ ├── _site-foot.pcss
│ └── _site-head.pcss
│ ├── _prefers-reduced-motion.pcss
│ ├── _syntax-highlighting.pcss
│ └── _visually-hidden.pcss
Let’s dig in to each layers.
Tokens layer is for Design tokens. Now Design tokens has own W3C Community Group and since the name comes from the Salesforce design system team, I’ll quote the original definition here.
I might be able to put these “tokens” into Roots, but I really love the principles of Design tokens so it stays.
Responsibilities for Roots layer are same as Generic AND Elements in ITCSS.
In ITCSS, Generic houses all the very high-level, far reaching styles. it often contains things like normalize.css, CSS resets, and for example box-sizing rules.
And Elements refer to all un-classed HTML tags. Styles in here get applied to specific HTML tags, like headings, links, and lists. This is the last layer where we use type selectors.
It has both “very high-level and far reaching styles” and project default styles AKA “all un-classed HTML tags”.
Both belongs to “roots” of project so that’s where the name comes from.
_element.pcss has most styles for “all un-classed HTML tags” which also has “reset” or “normalize” rules.
This is from Eric Meyer who introduced “Reset CSS” into this world so I’m following his words.
This layer houses same responsibilities as ITCSS does which follow OOCSS (Object Oriented CSS) principles. They are small and reusable pieces with no aesthetics which can be used in UI composition.
This is same as ITCSS as well.
It houses specific UI components.
This layer would be very confusing for those who are familiar with ITCSS.
In ITCSS, “Tools” means globally used mixins and functions for preprocessors like Sass.
But since I’m using PostCSS, I’m using the name “Tools” as “Utilities” and/or “Trumps” in ITCSS.
Reason behind this is, “Utilities” is hard for me to type and I always have to look up what “Trumps” means so in other word, it is “language barrier” for me so I want to change it so that it would be more easier for me.
TROCT is ITCSS #
ITCSS, at its core, is a set of principles to answer many of issues around writing scalable and predictable CSS in large projects.
So TROCT just applies those principles accordingly.
Just like how I had opened this post, title of this post is just a click bait. It’s just showing example of ITCSS as I understand it.