CSS Components

However, as a warning to any of you using this documentation for inspiration, I used to really like the "semantic" component layout design advertised in the "full component" example [1], but after spending some time in a code base that does this a lot (one that I helped author, no less), I find it to be an utter disaster. I don't want a bunch of "thin wrapper" CSS components with arbitrary names like Content and Text hiding what the real component is, adding indirections between me and knowing what this component actually is/does! You end up just having to keep track of two (or more, depending on how many indirections someone throws at you) different names for the same component differing in CSS styles only. It's even worse when the name is something like Header which could be anything from an h1 with basic CSS to a full-on header nav for a page.

CSS is not the hard part of writing React. Don't add a million files between you and knowing what a component does, and for the love of God, don't have 100 files named index.tsx unless you want to accelerate the aging process. It's quite frustrating to have 3 tabs open, trying to modify some code that depends on each of them, all of them named index.tsx.

1. https://www.css-components.net/docs/example