I tried something similar to “spacer components” in a recent project. When I wrote them, I felt smug and clever: I had interpreted the suggestions in React abou

I tried something similar to “spacer components” in a recent project. When I wrote them, I felt smug and clever: I had interpreted the suggestions in React about using components; I had separated my presentation concerns from content or functionality etc etc. It turned out to be a mistake. It added a component (with JSX file, an index.js and a folder, and imports and uses in the consuming file. 10s of lines of code across multiple files and folders. After I had made it, I kept seeing the layout pattern it encoded in other parts of my app. I’d reuse the component, break it, refactor it to cover multiple uses, which sometime broke the original. I’d give up and make a new component that was slightly different. In the end I’d have several of these things, all with long names that were hard to interpret and harder to use. And I was the only coder on that project. Imagine if you had several people doing this? This kinda thing is the same as the problems people complain about when working with large CSS codebases. Doing it in CSS is marginally easier, in my view. You probably have fewer files to maintain and fewer lines of code to work with. Ultimately, I think the problem is in neither the CSS or JS. It’s that layout is really hard. It’s as subtle as language. We strive for regularity and consistency, but if we stick it it strictly, we hamper our ability to communicate.