6

One of the convenient features of in-browser inspectors like Firebug is that it is so easy to tweak CSS stylesheets. As you type in the attribute position, all possible attributes are shown in a dropdown list and can be picked from. On the right hand side of a declaration, input is restricted to only valid values (which for some attributes is really just a very small number of values).

I'm looking for a CSS mode that makes editing CSS stylesheets easier by offering sensible contextual completion suggestions, or that even restricts my inputs to only valid values. Does anything like that already exist?

| improve this question | |
9

company-mode provides slightly better results than auto-complete using the bundled company-css backend.

You get completion of property names (up-to-date with the current state of CSS3, AFAIK), and some completion of property values, where they are simple, like a fixed set of options.

| improve this answer | |
  • 1
    I've grown quite attached to auto-complete mode, not least because it's an official part of Emacs. Maybe I should just extend the ac-sources for css-mode with whatever company-mode offers over auto-complete at the moment. – rekado Dec 5 '14 at 9:29
  • 2
    It's absolutely not an official part of Emacs. – Dmitry Dec 5 '14 at 10:09
  • 1
    Dmitry: you are right, I was mistaken. I remembered reading about autocomplete and company on the emacs-devel mailinglist (where rms asked about what popular packages are not yet included with Emacs) and I misremembered the information given there. Thanks for correcting me. I shall try company-mode. – rekado Dec 5 '14 at 11:19
  • 1
    I'm using company-mode now, but completion of property values is elusive. Completion for property names is good, though. – rekado Jan 13 '15 at 13:13
  • 1
    @rekado "completion of property values is elusive" Feel free to create an issue with your complaints. But indeed, implementing smart completion logic for values is hard. – Dmitry Feb 11 '15 at 11:02
4

auto-complete offers contextual completion for values of CSS properties:

auto-complete in css-mode

The default setup for auto-complete (which will also enable completion in css-mode buffers) is:

(require 'auto-complete-config)
(ac-config-default)

If you want to enable auto-complete for css-mode buffers only, add the following to your init-file:

(require 'auto-complete-config)

(defun css-setup-ac ()
  (setq ac-sources '(ac-source-dictionary ac-source-words-in-same-mode-buffers))
  (ac-css-mode-setup)
  (auto-complete-mode 1))

(add-hook 'css-mode-hook #'css-setup-ac)

I don't know of any existing modes that restrict property values to valid values.

| improve this answer | |
  • 1
    There is no completion for property names, though; I only see completion for values. – rekado Dec 4 '14 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.