Recently I came across a great Vim function on Stack Overflow. Once added to your .vimrc, it allows you to jump from a class or ID within an HTML document directly to the associated styles in your CSS.

Place this function in your .vimrc file:

function! JumpToCSS()
  let id_pos = searchpos("id", "nb", line('.'))[1]
  let class_pos = searchpos("class", "nb", line('.'))[1]
 
  if class_pos > 0 || id_pos > 0
    if class_pos < id_pos
      execute ":vim '#".expand('<cword>')."' */styles/**/*.scss"
    elseif class_pos > id_pos
      execute ":vim '.".expand('<cword>')."' */styles/**/*.scss"
    endif
  endif
endfunction

I scoped the function's query to my style directory to speed up the search. Simply change */styles/**/*.scss to reference your SCSS/LESS/CSS/etc directory (don't forget to change the extension if you are not using SCSS).

Inside Vim, open an HTML document and place your cursor over a class or ID and run the function by typing:

:call JumpToCSS()

Once the query finishes, Vim will open the file and take you to the correct style definition.

Bonus: If you love your keyboard shortcuts like I do, add a quick shortcut to your .vimrc:

nnoremap <leader>] :call JumpToCSS()

This will allow you to simply hit your leader key followed by a closing bracket: ] to call the function.