CSS Ctags

Using Ctags in Vim gives you a powerful way to navigate your code. One thing that I noticed right off the bat is that it didn’t parse and index CSS files, a feature that I’d love to have. I found this gist that I modified slightly to fit my needs. I ended up with these lines in my ~/.ctags file:

--langdef=css
--langmap=css:.css
--langmap=css:+.scss
--langmap=css:+.sass
--langmap=css:+.styl
--langmap=css:+.less
--regex-css=/^[ \t]*(([A-Za-z0-9_-]+[ \t\n,]+)+)\{/\1/t,tag,tags/
--regex-css=/^[ \t]*#([A-Za-z0-9_-]+)/#\1/i,id,ids/
--regex-css=/^[ \t]*\.([A-Za-z0-9_-]+)/.\1/c,class,classes/

This gives me access to tags, ID’s and classes in my CSS files, including preprocessor languages. To navigate the tags I use CtrlP’s :CtrlPTag command, which I have mapped to <leader>t. To generate tags I use another mapping, <leader>c:

nnoremap <leader>c :silent! !ctags<cr>:redraw!<cr>

Plugins like vim-easytags can automate this process for you. If you need something a bit powerful you could install TagBar which allows you to navigate your tags in a tree-like structure. I have yet found a need to use a dedicated plugin, but that might change someday.

comments powered by Disqus