Custom CSS folding in Vim

CSS files tend to grow very long, and even if you split them to smaller files, they are still not very easy to navigate.

To make things simpler I'm using Vim's custom folding feature to fold the CSS code into sections:

To add a folding section just add a line like this:

/* Name of section {{ "{{" }}{1 */

The {{{1 defines the start of the section and you can define multiple levels by changing the number ({{{2, {{{3, ...).

Each section ends before the beginning of the next section with the same level, but you can end a section manually by adding one of these lines:

/* }}} (ends the last section) */
/* }}}1 (ends the last level 1 section) */

All you need to do to enable this is add the following line to your .vimrc file:

autocmd BufRead,BufEnter *.css setlocal foldmethod=marker

This line tells Vim that whenever a css file is opened, set the folding method to "marker" (see the help file for 'foldmethod' to see other options).

For excellent tutorials on Vim see VimCasts.org, for Vim beginners I highly recommend to start with the Modal editing screencast.

Thanks for reading, David.