Emacs: Xah CSS Mode (xah-css-mode.el)

xah-css-mode.el is a emacs major mode for working with CSS code.

Get it by Donation

Goto paypal.com, send $32 to Xah@XahLee.org (be sure to include your correct email address. I need that to send it to you.)

Write in message area: xah-css-mode.el

Features

• Correct Syntax coloring of ALL CSS words. If it's not colored, you have a typo.
• Semantic Coloring. CSS words are colored by their type. e.g. HTML tag names, CSS attribute names, CSS value keywords, CSS unit names, pseudo selector names, media keywords. ID selector string and class name in bold.
• Keyword completion with ido-mode interface. Press Tab after a word to complete. All CSS words are supported: {html5 tags, property names, property value keywords, units, colors, pseudo selectors, “at keywords”, etc}.
• Single Key Prettify Code Format. Press Tab before word to reformat current block of code. That is, all lines enclosed by curly brackets {}.
• Syntax coloring of hexadecimal color format #rrggbb and #rgb and HSL Color format hsl(0,68%,42%).
• Abbreviations: over 100 abbrevs for the most used CSS properties. Just type the initial letters followed by a space.
• Command to convert #rrggbb color format under cursor to HSL Color format.
• Command to insert a random color.
• Command to minify CSS code.
• Command to unminify (expand) CSS code to multi-lines format.

Commands to Format Code

Abbreviations Feature

Type

fs

followed by space, and it becomes

font-size

press space again and it becomes

font-size: 2rem;

Just type the initial letters.

Here's example of the top 16 most used CSS properties and the expansion:

font-size: 2rem;
width: 200px;
color: red;
margin-top: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
margin-right: 1rem;
height: 200px;
padding-top: 1rem;
padding-left: 1rem;
padding-bottom: 1rem;
padding-right: 1rem;
display: inline-block;
background-color: black;
text-align: left right center justify;
position: static absolute fixed relative initial inherit;