Emacs, GNU/Linux Free Software & Open Source, Programming & Web Development

Easy CSS editing with Emacs

Editing CSS in Emacs is very easy since the standard CSS mode comes included by default. But developer Julien Danjou created this nice minor mode called rainbow-mode which will display the color of the code as the background of the code’s text. It is very useful to immediately see the colors right there in the style sheet instead of trying to remember each code and then test in the browser window.

One of the problems I had was when opening any CSS file, it would open by default css-mode, but I had to manually load rainbow-mode every time. The elisp function auto-mode-alist is used to detect a file type by its name and running a function associated with it, generally the function to enable a major mode to edit that type of file. For minor modes I couldn’t find anything that would allow me to launch them without inhibiting the mayor mode’s startup.

So since auto-mode-alist takes a regular expression for the file type and only one function as its arguments, I wrote a function that will run both and use that as the second argument to execute.

;; CSS and Rainbow modes 
(defun all-css-modes() (css-mode) (rainbow-mode)) 

;; Load both major and minor modes in one call based on file type 
(add-to-list 'auto-mode-alist '("\\.css$" . all-css-modes)) 

Hope you find it useful and you like the combination of css-mode and rainbow-mode as much as I do.

About the author

Gabriel Saldaña Gabriel Saldaña is a web developer, photographer and free software advocate. Connect with him on and Twitter


6 thoughts on “Easy CSS editing with Emacs

  1. Yeah rainbow-mode is awesome.

    Wouldn’t (add-hook ‘css-mode-hook ‘rainbow-mode) or otherwise (add-hook ‘css-mode-hook ‘(lambda () (rainbow-mode 1)) have worked just as fine?

  2. Alexey says:

    I’ve tried Tom’s suggestion with no success:

    … (load-file “~/.emacs.d/rainbow-mode.el”) (require ‘rainbow-mode) (add-hook ‘css-mode-hook ‘rainbow-mode) ;;(add-hook ‘css-mode-hook (lambda () (rainbow-mode 1))) …

    An error occurred while loading [.emacs]: Symbol’s value as variable is void: css-mode-hook

    Any ideas?

  3. Pingback: Emacs for Web Dev | sayem khan / blog

Leave a Reply

Your email address will not be published. Required fields are marked *