Skip to content
forked from ryboe/CSS3

The most complete CSS support for Sublime Text 3

License

Notifications You must be signed in to change notification settings

cleverlion/CSS3-1

 
 

Repository files navigation

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 very few exceptions, if it's in the spec, it's supported.
  • Productive: Offers a full set of completions for every property. The completions are highly specific to what you're writing.
  • Modern: Bad, old CSS is flagged. Unnecessarily prefixed properties aren't highlighted. Catches lots of mistakes. Encourages best practices.
  • Faithful: Follows the W3C specs extremely closely.

Before & After

before and after

Installation

  1. Install Package Control

  2. Install CSS3

    Platform Install Command
    Mac cmd+shift+p   → Package Control: Install Package → CSS3
    Linux/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/Windows ctrl+shift+p → Package Control: Disable Package → CSS

    disabling the default CSS package

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

  4. (Recommended) Disable CSS completions in Emmet

    If you have Emmet installed, its completions will drown out the carefully researched, standards-based completions offered by this package. You can disable Emmet completions by adding these two lines to your Emmet Package settings.

    "show_css_completions": false,
    "disable_tab_abbreviations_for_scopes": "source.css"
    
  5. (Recommended) Enable completions inside completions

    By default, Sublime will not offer completions inside completions. In other words, the completions menu is suppressed when you're tabbing through a snippet. This prevents a lot of CSS3 completions from appearing. Add these keys to your User Settings to fix this:

    "auto_complete_commit_on_tab": true,
    "auto_complete_with_fields": true,
    
  6. (Recommended) Set CSS3 as the default language for .css files

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

    setting CSS3 as default

Best Practices

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 this W3C feed, but I still need your help. Let's keep bad code out of the Web!

About

The most complete CSS support for Sublime Text 3

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 85.8%
  • Python 14.1%
  • JavaScript 0.1%