messy css indentation in vim

Question

When editing an html file in vim, the indentation for css inside style tags is messy.

For instance, this is how it would indent this sample css code without any manual intervention to fix the indentation on my part:

    div.class
{
color: white;
       backgroung-color: black;
}

Why is this happening? how can I fix it?

Answer 1

One explanation might be that you have a mixture of TABs and spaces in the file.

(Although the appearance in the question may be more due to Markdown than anything else)

Answer 2

Try using this html filetype indent script instead. It has improved support for style tags. Javascript and CSS indent handling in HTML pages is known to be problematic with the html indentation in Vim. I've yet to find a script that does everything perfectly.

Answer 3

I experience the same problem, can't really help but I tend to do is vi{ then 9<< and finally >>. I tried to find a good css indent, but none of the ones I tried seemed to work properly.