VIM: How to autocomplete in a CSS file with tag ids and class names declared in HTML file

Question

I'm trying VIM for HTML, CSS and JavaScript editting. I've installed a number of plugins and configured VIM so that it allows me to autocoplete standart HTML/CSS code. And now I want to autocomplete my CSS code with tag ids and class names placed in HTML files just like in Apatana. For example:

I have 1.html file with the following lines:

<div id="my_id"> </div>
<div class="my_class"> </div>

And I have 1.css file with:

#my_id{border-style:dotted}
.my_class{border-style:solid}

When I'm edditing a CSS file and pressing <c-x><c-o> right after #, I want VIM to suggest me tag ids from the 1.html file. The same for tag class names. What should I do?

Answer 1

What I found helpful was adding the following line to my .vimrc:

autocmd FileType css,scss setlocal iskeyword+=-,?,!

which helps me autocompleting ids and classes with various special characters.

Answer 2

<C-x><C-o> is for language-specific keywords such as <table> in an HTML file or background-color in a CSS file, the right shortcuts for word completion are <C-n> and <C-p>.

Supposing your HTML and CSS files are loaded in two buffers (the HTML can be hidden or visible in a split), you are supposed to type a couple of characters of the id or class name and hit <C-n> for a list of possible completions.

Type :help ins-completion for more info.

I use AutoComplPop which provides realtime completion but there are other options.