Adding sections with folding for CSS in TextMate

In CSS there is no concept of sections or nested blocks. But since CSS files usually become very long, you may want to fold groups of style definitions to get a better overview:

/* start foldme */
p { color: #000 }
/* end foldme */

Since this is not possible with the CSS bundle shiped with Textmate, I added this on myself:

  1. I first added a snipped called section to the CSS bundle:

    /* start ${1:section} */
    $0
    /* end $1 */
    

    It gets activated by the tab trigger sec. The scope selector is source.css.

  2. I then modified the language definition and added |/\* start \w+ \*/ to the foldingStartMarker and |/\* end \w+ \*/ to the foldingStopMarker. They should look like this now:

    foldingStartMarker = '/\*\*(?!\*)|\{\s*($|/\*(?!.*?\*/.*\S))|/\* start \w+ \*/';
    foldingStopMarker = '(?<!\*)\*\*/|^\s*\}|/\* end \w+ \*/';
    

That’s all you need to do.