This answer deserves its own space, so here it is.
If you want to add CSS support to your ctags
and use it to navigate to definitions just like you do for JavaScript, all you need to do is include the following lines in your ~/.ctags
file:
--langdef=css
--langmap=css:.css
--regex-css=/^[ \t]*\.([A-Za-z0-9_-]+)/.\1/c,class,classes/
--regex-css=/^[ \t]*#([A-Za-z0-9_-]+)/#\1/i,id,ids/
--regex-css=/^[ \t]*(([A-Za-z0-9_-]+[ \t\n,]+)+)\{/\1/t,tag,tags/
--regex-css=/^[ \t]*@media\s+([A-Za-z0-9_-]+)/\1/m,media,medias/
After setting this up, running :!ctags -R .
will properly index your CSS files, allowing you to use :tag .myClass
to jump to the correct CSS definition in the appropriate CSS file.
There is one small caveat: the classes and ids tags will have a leading .
or #
, so using :tag myClass
won't work; instead, use :tag /myClass
for "regexp search" rather than "whole tag search."
I've found these two mappings to be very effective (working well for JS for some time and recently for CSS):
" Alternative to <C-]>
" Place your cursor on an id or class and press <leader>]
" to jump to the definition
nnoremap <leader>] :tag /<c-r>=expand('<cword>')<cr><cr>
" Alternative to <C-w>}
" Place your cursor on an id or class and press <leader>}
" to display a preview of the definition. While not as useful for CSS,
" it works wonders for JavaScript
nnoremap <leader>} :ptag /<c-r>=expand('<cword>')<cr><cr>