Mac – Emacs CSS modes – most feature complete and maintained

cssemacsmode

According to EmacsWiki there are bunch of CSS modes for Emacs, but none of them seems to be very actively developed or even that feature complete. Which one is the most feature complete so far and is being maybe even maintained?

Features

Syntax highlighting
Well behaved indentation
Commenting
- Region
- Line
Validation
- Error reporting

Problems with the default CSS mode

One of the reason why the current CSS mode doesn't cut it for me is because it indents selectors NOT like this

div.bar input,
div.bar select {
    float: left;
}

, but like this

div.bar input,
        div.bar select {
                float: left;
        }

which is simply unbearable.

Best Answer

I'm using the css-mode that comes with GNU Emacs 24 and it indents fine (the way you want). It does all what you want except validation, and it's part of GNU Emacs so it's maintained. I haven't tried it, but I think css-tidy.el can do validation.

The only customizations I have are

(setq cssm-indent-function #'cssm-c-style-indenter)
(setq cssm-indent-level 2)

but I think those are remnants of some former css mode since neither is defined anywhere. What Emacs are you using and what command is being used to indent (C-h k TAB)?

Related Solutions

Mac – How to get Emacs to auto-complete tags and brackets for me

did you try yasnippet for completion? and there is autopair to insert closing brackets.

Colors and vim with css

Here's what I use for my HTML5 and CSS3 Media Queries:

First create the folder: mkdir -p ~/.vim/after/syntax/css

Then edit: vi .vim/after/syntax/html.vim and put:

" Vim syntax file
" Language: HTML (version 5)
" Maintainer: Rodrigo Machado <rcmachado@gmail.com>
" URL: http://rm.blog.br/vim/syntax/html.vim
" Last Change: 2009 Aug 19
" License: Public domain
" (but let me know if you liked it :) )
"
" Note: This file just adds the new tags from HTML 5
" and don't replace default html.vim syntax file

" HTML 5 tags
syn keyword htmlTagName contained article aside audio bb canvas command datagrid
syn keyword htmlTagName contained datalist details dialog embed figure footer
syn keyword htmlTagName contained header hgroup keygen mark meter nav output
syn keyword htmlTagName contained progress time ruby rt rp section time video

" HTML 5 arguments
syn keyword htmlArg contained autofocus placeholder min max step
syn keyword htmlArg contained contenteditable contextmenu draggable hidden item
syn keyword htmlArg contained itemprop list subject spellcheck
" this doesn't work because default syntax file alredy define a 'data' attribute
syn match htmlArg "\<\(data-[\-a-zA-Z0-9_]\+\)=" contained

syn include @htmlCss syntax/css/css3-mediaqueries.vim

and then vi .vim/after/syntax/css/css3-mediaqueries.vim and put:

syn region cssMediaType start='(' end=')' contains=css.*Attr,css.*Prop,cssComment,cssValue.*,cssColor,cssURL,cssImportant,cssError,cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape nextgroup=cssMediaComma,cssMediaAnd,cssMediaBlock skipwhite skipnl
syn match cssMediaAnd "and" nextgroup=cssMediaType skipwhite skipnl
syn clear cssMediaBlock
syn region cssMediaBlock contained transparent matchgroup=cssBraces start='{' end='}' contains=cssTagName,cssSelectorOp,cssAttributeSelector,cssIdentifier,cssError,cssDefinition,cssPseudoClass,cssComment,cssUnicodeEscape,cssClassName,cssURL