What's your favorite folding method (or secret techique) in Vim for HTML, Javascript and CSS?

fold, vim

Solution

I use `foldmethod=marker` and have mappings to enter `<!-- {{{ -->` and `<!-- }}} -->` where I want the fold to start and end. I put the start marker on the line with the opening block tag like:

<div id="topmenu"> <!-- {{{ -->

so when it's folded I immediately see what the fold contains without the need to add extra comment.

For CSS it's even easier, I just use `foldmarker={,}` and all definitions are automagically folded showing me just a very clear list of all classes, tags and ids which I can open just when I need them. Actually all my CSS files have this line at the very end:

/* vim: set fdm=marker fmr={,}: */

You can also visually select the region you want to fold and press `zf` if you prefer.

Problem

Original source