Indentation annoyance with CSS in Vim

Question

I've moved from TextMate to Vim lately, and am really liking the switch. However, I have an itch regarding the way Vim handles indentation within curly braces using the CSS syntax. I use simple_pairs.vim, which may or may not have something to do with my problem, but I don't think so, as things work fine in PHP, JavaScript, etc. Let me explain…

I generally group my CSS rules by context using indentation, like so:

ul#nav {
  margin: 10px;
}
  ul#nav li {
    float: left;
    margin-right: 4px;
  }

That means when I type my ul#nav li rule, followed by { (which inserts a corresponding } automatically) and hit enter, I want the closing brace to be at the same indentation level as the ul#…, but instead I get something like this:

ul#nav {
  margin: 10px;
}
  ul#nav li {
}

So I have to indent the extra step(s) manually. Like I said, doing the same thing in PHP, JavaScript, etc, works fine. Does anyone know how I can fix this? I don't understand enough of Vim's syntax definition files for me to be able to figure out what in the PHP syntax file makes it work, and port it over to the CSS one… Thanks.

I suspect it has something to do with `simple_pairs.vim`. I tried your example on my computer (without `simple_pairs`) and it worked as you want it to work. — Peter, Mar 25 '10 at 21:14
Ah, you're right… Guess I should have tried that first. Do you (or anyone else) have any thoughts on how to solve it though? — Johan Sahlén, Mar 25 '10 at 21:34
You should look into [SCSS](http://sass-lang.com/#nesting) if you're interested in nesting selectors. — user110857, Apr 29 '13 at 16:56

score 11 · Accepted Answer · edited Mar 18 '12 at 06:55

I found a very good indent code for nested curly brackets here:

https://gist.github.com/762326/bcbd35239db7f26447f1c2323037d20a5219471d

You can save it in .vim/indent/css.vim and it'll do a much better job of indenting CSS than the default.

Also, it works for .less files as well, but you may have to associate those to it in your .vimrc file.

The script at github is by the same mantainer as the official css.vim, only 6 years newer. They have a few different lines.

score 3 · Answer 2 · answered Oct 16 '10 at 14:41

3

I did this for css files:

au BufEnter *.css set nocindent
au BufLeave *.css set cindent

I didn't have smartindent set, but you could add that as well.

This says that when you enter a buffer of a .css file, you should unset cindent, and you should set it back when you leave the buffer.

answered Oct 16 '10 at 14:41

davetron5000

24,123
11
70
98

2

And if cindent wasn't set from the beginning? I think it's better to use setlocal (to affect only the buffer with the .css file) and use BufRead,BufNewFile to set it when opening a css file, e.g. `au BufRead,BufNewFile *.css setlocal nocindent`. – olsner Apr 12 '11 at 07:39

score 0 · Answer 3 · answered Mar 26 '10 at 02:39

0

This has to do with cindent and smartindent. One of them causes this behavior.

I forgot which one (maybe both of them?), but I removed them from my ~/.vimrc file, and kept only autoindent

answered Mar 26 '10 at 02:39

hasen

161,647
65
194
231

Indentation annoyance with CSS in Vim

3 Answers3