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?

0

2 Answers 2

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.

5
  • 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.
    – user2005
    Dec 5, 2014 at 9:29
  • 2
    It's absolutely not an official part of Emacs.
    – Dmitry
    Dec 5, 2014 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.
    – user2005
    Dec 5, 2014 at 11:19
  • 1
    I'm using company-mode now, but completion of property values is elusive. Completion for property names is good, though.
    – user2005
    Jan 13, 2015 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, 2015 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.

1
  • 1
    There is no completion for property names, though; I only see completion for values.
    – user2005
    Dec 4, 2014 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.