yisibl / css3

The most complete CSS support for Sublime Text 3

CSS3

The most complete CSS support for Sublime Text 3.

Features

• Absurdly Complete: I basically mined the entire set of draft specs and supported everything. Some of this stuff won't be implemented in browsers for years. With a few exceptions, if it's in the spec, it's supported.
• Productive: Full set of completions for every property, including many prefixed properties. W3C Validation.
• Modern: Bad, old CSS is flagged. Unnecessarily prefixed properties aren't highlighted. Catches lots of mistakes.
• Faithful: Follows the spec extremely closely, with minor deviations that encourage a few best practices (see below).

Before & After

Installation

This package replaces my previous CSS3_Syntax plugin. This is a billion times better :)

1. Install Package Control

2. Install CSS3

   Platform	Install Command
   Mac	cmd+shift+p   → Package Control: Install Package → CSS3
   Linux	ctrl+shift+p → Package Control: Install Package → CSS3
   Windows	ctrl+shift+p → Package Control: Install Package → CSS3

3. (Recommended) Disable the default CSS package

   Platform	Disable Command
   Mac	cmd+shift+p   → Package Control: Disable Package → CSS
   Linux	ctrl+shift+p → Package Control: Disable Package → CSS
   Windows	ctrl+shift+p → Package Control: Disable Package → CSS

   

   Make sure you don't have any open files set to the default CSS syntax (bottom-right) or you may get an error message.

   Warning: may break other CSS plugins

4. (Recommended) Disable Emmet

   If you have Emmet installed, its completions will appear alongside the carefully researched, standards-based completions included in this plugin. There are so many Emmet completions that they completely drown out the CSS3 completions. This wouldn't necessarily be a problem, except that Emmet is behind the times. The code it inserts is frequently bad. You're better off disabling it altogether. The Web will thank you.

5. (Recommended) Set CSS3 as the default language for .css files

   • Open a .css file.
   • View → Syntax → Open all with current extension as... → CSS3

   

   Warning: may break other CSS plugins

Best Practices

• End every property declaration with a semicolon.
• Put a space after the colon in a property declaration

Known Issues

1. Within nested code blocks, like inside a @media query, if the first selector starts with a letter, it will not be highlighted.

This is an annoying limitation of the Sublime Text syntax highlighting system. It can't recursively match curly braces across multiple lines. In this case, the first nested selector is mistaken for a property, which doesn't match. I went through three or four rewrites before I arrived at the current design, which is the least fragile and most predictable that I know. Other CSS highlighters, including my previous CSS3_Syntax and the Default CSS bundle, have the same problem, but are much easier to break. If this bugs you like it bugs me, two simple workarounds are shown above.

Help Me Out!

If you think something's missing, make sure you're not asking for something on this list of bad CSS properties. If it's not on that list, open an issue and I'll investigate. I'll be monitoring the specs as they're updated on the W3C feed, but I still need your help. Let's keep bad code out of the Web!