kside.net

If you, like me, are not an expert in web design, you probably do as I do when trying to implement a layout or fix one: put a line in the CSS file, refresh the page, see what happened, then edit the CSS file again, see what happened, then comment out the changes before, hit refresh again, and so on (much of this will likely be caused by trying to debug a page using that something-that-is-not-a-browser called Internet Explorer).

But CSS comments are so annoying with that C-like syntax (the '/*' opening and '*/' to close):

#navbar {
  width: 500px;
  height: 50px;
  font-family: "Comic Sans";
  /*border: 1px solid black;*/
}

Did you see that "border" property? Yep, it's me print debugging a div box to see where the heck it went (specially when toying with the "float" property) or seeing why its content is being shown outside of it (using too much "padding", for example).

I do comment and un-comment 1-lines like that for testing so many times that I got angry and wrote this small vim helper to aid in this cumbersome task!

Here it is:

You can put that in your .vimrc and call it like this:

:call ToggleCssComment()

One would wonder that typing all this is probably more than typing 4 chars, but hey, it's vim. You can call it by hitting TAB to auto-complete the command:

:call Tog<tab>

Or you can even bind it to a shortcut key (using FileType [:help FileType] is way more fun, since you can bind the key only when a CSS file is being edited)!