How I Structure My CSS

Matthias Ott:

In this post, I will share my current take on CSS structure. It does not religiously follow any particular methodology, although people familiar with Harry Roberts’ ITCSS (“Inverted Triangle CSS”) will definitely recognize parts of his methodology.

The folder structure indeed looks very familiar:

/scss/
├── 1-settings
├── 2-design-tokens
├── 3-tools
├── 4-generic
├── 5-elements
├── 6-skeleton
├── 7-components
├── 8-utilities
├── _shame.scss
└── main.scss

Thanks for sharing, Matt. Always great to compare (and in this case validate) my own approach to other people’s work.

How I Structure My CSS →

Components and Concerns

Jeremy Keith, on Separation of Concerns and how that comes into play where one’s dealing with Component based design:

My point is this:

  • Separating structure, presentation, and behaviour is a good idea.
  • Separating an interface into components is a good idea.

Those two good ideas are not in conflict. They work best when they’re done in combination.

Yes, yes, yes, … YES! A THOUSAND TIMES YES!

Components and Concerns →

💁‍♂️ You might also have seen this related image float around on the Twitters:

Scaling your Redux App with ducks

It’s one of these things I too keep struggling with from time to time: do you organize your project files per type/functionality, or per feature?

Alex Moldovan from FortechRomania:

Our approach starts from the need to isolate the React code into a single folder — called views — and the redux code into a separate folder — called redux.

Inside the views folder, we prefer a function-first approach in structuring files. This feels very natural in the context of React: pages, layouts, components, enhancers etc.

Then, inside the redux folder…

Per feature a “duck folder” is created, containing actions, reducers, selectors, etc. for said feature:

duck/
├── actions.js
├── index.js
├── operations.js
├── reducers.js
├── selectors.js
├── tests.js
├── types.js
├── utils.js

Might give this kind of structure a try for the next React+Redux project …

Scaling your Redux App with ducks →