ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

CSS3

by ryboe ST3 Top 100

The most complete CSS support for Sublime Text

Labels language syntax, completions, auto-complete, reset, linting

Details

Installs

  • Total 504K
  • Win 365K
  • Mac 78K
  • Linux 60K
Mar 30 Mar 29 Mar 28 Mar 27 Mar 26 Mar 25 Mar 24 Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12 Mar 11 Mar 10 Mar 9 Mar 8 Mar 7 Mar 6 Mar 5 Mar 4 Mar 3 Mar 2 Mar 1 Feb 28 Feb 27 Feb 26 Feb 25 Feb 24 Feb 23 Feb 22 Feb 21 Feb 20 Feb 19 Feb 18 Feb 17 Feb 16 Feb 15 Feb 14 Feb 13
Windows 6 6 9 23 9 15 9 9 11 6 13 19 22 9 9 11 10 10 13 7 9 7 12 8 10 12 15 8 12 11 16 15 14 17 16 22 18 19 15 15 21 13 12 10 11 22
Mac 1 0 1 4 1 1 2 0 1 0 3 2 1 3 2 1 2 1 8 4 2 2 1 1 2 0 3 2 1 0 2 2 4 4 5 3 0 3 1 3 3 2 2 2 3 2
Linux 1 3 0 2 3 0 5 1 4 2 2 0 5 27 2 2 2 2 4 4 0 2 5 4 5 3 4 3 2 4 2 1 5 5 2 3 2 2 2 2 2 2 1 0 2 5

Readme

Source
raw.​githubusercontent.​com

CSS3

GitHub Actions Status Badge

The most complete CSS and PostCSS-cssnext support for Sublime Text.

Features

  • Absurdly Complete: I mined the entire set of draft specs and supported everything. Some of this stuff won't be implemented in browsers for years. If it's in the spec, it's supported.
  • Future Proof: PostCSS-cssnext is fully supported. If you use cssnext, you can use futuristic CSS like…
    • nesting
    • custom selectors
    • custom properties
    • custom media queries
    • CSS Modules
    • lots more
  • Productive: Offers a full set of completions for properties, descriptors, @-rules, functions, and selectors. 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.
  • Fast: CSS3 has been designed for Sublime's new custom regex engine, which is crazy fast. The syntax highlighting typically takes less than 100ms, even for very large CSS files.

Before & 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. (Required) 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

    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. (Strongly 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,

  5. (Recommended) Hide CSS completions from Emmet

    If you have Emmet installed, its completions will drown out the carefully researched, standards-based completions offered by this package. You can hide Emmet completions for CSS only by adding this line to your Emmet package settings. “json "abbreviation_preview”: “markup”

    6. 

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


      

    • Open a .css file.
      • 

    • View → Syntax → Open all with current extension as… → CSS3
      • 

    


    7. 




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. Definitely check
out the CONTRIBUTING
guidelines before submitting your PR. It could save you a lot of time. 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!