Effective CSS editing with Vim
A while back I started using Vim as my code editor of choice. Previously, I used Kate for KDE, which is a great and customizable editor, but only available for Unix. At work I have to use many Windows applications, for everything from design to browser testing, which I at home don’t do as often, so there I use VMware. First, I tested out some different editors, but none were as good as Kate. I figured I should try something completely new, and something I could use regardless of operating system. I finally chose Vim, and I am glad! Personally I just use Putty and run Vim at the web server, that’s the quickest way if you have SSH access. If you prefer a GUI, there is gVim as well.
Autocompletion
Vim supports autocompletion, which means you can start writing for instancebac, press Ctrl X, then Ctrl O, and you will get a list of possible properties (ie background:, background-image:, etc). To enable that for CSS in Vim, enter the following command: :set omnifunc=csscomplete#CompleteCSS
To enable it by default for CSS files, add the following code to your .vimrc file:
autocmd FileType css set omnifunc=csscomplete#CompleteCSSAutocompletion for many more languages is available in Vim, Amir Salihefendic has written more about it on his blog: Vim 7: Turning completion on. He also has a nice animated example of what it looks like in action.
Another great thing about Vim is that there are a lot of talented users who will write scripts themselves, and share them with anyone. That way, you can find syntax highlighting and autocompletion for almost anything, if not at the official Vim scripts site, just Google it. For instance, I found that YUI guru Dav Glass has made both a Vim autocompletion and a syntax file for the YUI JavaScript library.
Modifying Numerical Values
Often when debugging a layout, you might want to increase or decrease a numerical value such as width or padding. In Vim’s command mode, all you have to do is move the cursor to any number, or even the property name, and press Ctrl X to decrease the value by 1, or Ctrl A to increase it by 1. You can also enter any number, and then press Ctrl X or Ctrl A — that will increase or decrease the value by the number you entered. Saves you a lot of typing. Works with any unit, such as % or px or whatever.
Validation
Vim even supports validating your code directly against a web service. A collegue of mine at Opera wrote a CSS validation tool, which I haven’t tried out yet though. There is also a HTML5 validation tool at the WHATWG blog. I will start experimenting with them as soon as I’ve gotten more comfortable with my current setup.
It does take some effort to learn Vim. The way I did it was to learn only a couple of new commands a day (I just learned how to resize buffers windows…) and have a printed cheat sheet on my desk.
Do you have your own Vim tips & tricks? Please share in the comments!
« ctrl+z » is my best trick, if you are on a Unix-machine. you just leave vim and can start to work on other things. after you are done, reenter vim with « fg » – you can even start to use emacs ;)