That is just one example for why I came up with my own way of organizing my components.
Of course, this is an ongoing process and every project is different, but I basically follow these rules:
While the first rule is essential to avoid code duplication, the second and third rule are basically only for reducing the complexity of a component. In that case, I would call the components “sub components”.
In a directory in its parent component. As you are not using these components anywhere else, you can “scope” them by putting them in a sub directory of the actual component. This couples them tightly together and you can find all the code where you expect it.
Components, that are used by multiple templates and only by templates (e.g. header, footer, navigation), live in a subdirectory called
_includes/ in the
templates/ directory. I prefix the name of this directory with
_ to show that it is some sort of a helper directory and not a template.
The structure for an example project could look like this:
├── components │ ├── button │ ├── icon │ ├── image │ ├── input │ └── video │ ├── content │ ├── cta │ ├── gallery │ │ ├── thumbnails │ │ │ └── thumbnail │ │ └── view │ ├── rte │ └── teaser-list │ └── teaser │ └── templates ├── _includes │ ├── footer │ ├── header │ └── navigation ├── homepage ├── standard └── checkout
Again, this is nothing static and can be adapted for every project. Especially having a directory called
content with components that can be picked by editors, makes of course only sense when there is actually a CMS behind the scenes.
If you are looking for a component library that plays well together with what I described in this post, feel free to check out headman. It is a small node module that can be used to develop your components in isolation, no matter how you organize them.