It's quite popular to have certain prefixes in CSS selectors to make sure, that the written CSS only applies where it should (scoping). CSS methodologies like BEM, SMACSS and CSS Modules try to solve the same problem with different naming conventions and folder structures using some sort of identifier. I personally tend to use the name of the magnolia component/area/page for this.

Currently a template definition, a dialog definition and a template script are generated from the existing mgnl-cli-prototypes. It would be nice to be able to configure the generation of other files like like a corresponding CSS/SASS/LESS-File as well. e.g.:

mgnl create-component my-component

my-component.ftl

<div class="my-component">
  <h2 class="my-component--title">${content.title}</h2>
  ...
</div>

_my-component.scss

.my-component { ... }
.my-component--title { ... }
..