Read the full specification at the GitHub repository.
Have you ever experienced the frustration involved in adding styles to your new component, just to find that some other style, somewhere in the same project, is conflicting with yours? Without structure, stylesheets become confusing and unmaintainable:
- Styles with global scope end up biting you in the ass months down the track
- Deeply nested selectors confuse you as to what it is they’re actually supposed to do
- Just finding the various rules across various files which combine to make one component’s style can be a pain in itself
Styling components doesn’t have to be a nightmare
Things have certainly gotten better in recent years. For example, compile-to-CSS languages like LESS and SASS help facilitate separation of concerns, and React itself does a lot to encourage good structure.
However, better tools present a new problem – we can end up spending more time deciding where to put things than actually making them. And what if you make the wrong decisions? While React, LESS and SASS certainly encourage good structure, they definitely don’t enforce it.
While we’ve come a long way, what we still need is a specification – a set of decisions which do the hard design work for us. And as it happens, the Pacomo project does exactly that!
Conventions free the developer to focus on what counts
Pacomo is a set of conventions extracted from my React-based projects, including memamug, react-c and numbat-ui.
The name is based on its CSS class naming convention: Package-Component-Modifier. This naming convention – as well as the various guidelines surrounding structure, dependencies and stylesheet authoring – gives you an off-the-shelf solution to project structure. And as a bonus, you’ll also get a set of open-source tools to help automate things where possible, and a standard which facilitates interaction between developers and teams. In short, Pacomo lets you concentrate on making amazing things, not deciding how to do it.
Try Pacomo yourself
The best way to see how Pacomo does this is to read the specification, then see how existing applications put it to use.
Of course, Pacomo is still incredibly young, and there is much to improve. Being a living document hosted on GitHub, anyone can suggest changes; just fork the repo and create a pull request!
Once youv’e got a project to try it on, check out react-c, a small Higher-Order Component which implements some of the specification for you. Also, see my introduction to Webpack for one method of implementing the file structure requirements.
Finally, if you’re reading this because you want to make web apps which delight your users and fellow developers, you’ll probably also want to hear about new articles and projects! In that case, make sure to sign up for my newsletter. In return for your e-mail, you’ll also immediately receive 3 bonus print-optimised PDF cheatsheets – on React, ES6 and JavaScript promises.
