Naming is Hard
"There are only two hard things in Computer Science: cache invalidation and naming things."
— Phil Karlton
In our Theme/[ThemeName]/Assets/Lava we have/had about 50-100 files all w different naming conventions, kebab case, snake case, w no directory type for blocks or components, just everything dumped in, and named ... uniquely. It didn't work; Tough to read,
Naming Convention
Lets start w our convention strategy
| Naming Convention | Description | Example | Usage Context |
|---|---|---|---|
| kebab-case | Words separated by hyphens, all lowercase | my-variable-name | URLs, CSS classes, file names |
Naming Framework
Easy and Intuitive mental model / schema but also leaves room for future proofing!
Start w the end in mind
Here is what we are after File path pattern example:<directory>/<namespace>/<file name>Example:blocks/connect/tabs-es.lava
Here is an exception/gotcha:
- Namespace is an optional subfolder used to group related files within a directory.
- If no namespace is needed, files live directly inside
<directory>/. - Example:
blocks/connect/tabs-es.lava(namespace =connect).
Perspective
Same ideas organized as a table:
| Directory | Namespace (Subfolder) | Use Case | Example File Path |
|---|---|---|---|
| blocks/ | Optional: groups related blocks | Full UI blocks used in a single zone | blocks/connect/tabs-es.lava |
| components/ | Optional: groups related components | Reusable layout/content units (cards, filters) | components/card-grid.lava |
| layouts/ | Rarely used | Layout scaffolding shared across pages | layouts/page-header-with-bg.lava |
| partials/ | Optional: groups related partials | Small reusable markup bits (includes) | partials/latest-messages-es.lava |
| pages/ | Optional: groups page templates | Full page templates | pages/signup-finder-results.lava |
Question
Is there something I am missing? How might this be done better?! Like, how do you want to do version control?