when developing for web (in Vim) I'm always using the BEM methodology. I have identified that I always go through the same steps when adding a new block element, and I'm looking for ways to automate the whole/or parts of the process.

What I now have to do for each block being added:

Using UltiSnips, c- is expanded and edited into something like this:

<!-- Component: Button -->
<div class="c-button">
  <div class="c-button__border">
    <img class="c-button__icon" src="img/mic-off.svg" />
  <p class="c-button__title">Mic off</p>  

Then I have to navigate to src/sass/components/ and add a file named _c-button.sass with the content:



Finally edit src/sass/main.sass and add @import 'components/button' to the end of the file.

So any tips/ideas how to start to automate this process further?

  • 3
    I think it's not Vim's job to create file and put skeleton in them (Vim is a text editor). You might be looking for a tool like yeoman which allows you to scafold a project but also to automate the addition of new components in web project (and basically in any project with the right generator)
    – statox
    May 28, 2018 at 8:06


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.