Sublime Forum

ST2: How to list CSS Selectors, Properties & Values?

#1

Hi, :smile:

Sorry if my english is bad. It is not my native language :blush:
I am looking for a smart plugin that can list all CSS Selectors, Properties & Values.
For instance if I write:

Exemple 1: Selectors
.(cursor)

I’d like Sublime Text to list all the classes created and associated with the current CSS file.
CodeIntel doesn’t allow that. For common selectors, Sublime Text thinks I am looking for a property, so it list properties. I need to add brackets for him to understand it’s actually a Selector.

Exemple 2: Properties
body
{
(cursor)
}

I’d like Sublime Text to list all the possible properties, without the need to write any letter first (which restrain the list to an alphabetic list).
CodeIntel doesn’t allow that.

Exemple 3: Values
body
{
background-color: (cursor)
}

I’d like Sublime Text to list all the possible values like green, white, black, etc.
CodeIntel doesn’t allow that. Worst, when you type ctrl+maj+space to enter manual mod, the list is so weird (at least for me, because I am a newbie) :
hsl()
hsla()
inherit
rgb()
rgba()
…
I was expecting basic colors, so what is that ? :open_mouth:

These are basic features I found in some IDE like Microsoft Expression Web, so i’m surprised it is hard to find a plugin for it !
This really bothers me because I am new to the CSS/HTML/PHP/etc world, so i don’t know any property or value. So if they are displayed by Sublime Text, it is easier for me to learn them.

Thanks for any help :smiley:

0 Likes
#2

Example 1 would be a nice feature, but I’m not aware of a plugin that provides this functionality. (But I haven’t looked too closely; hopefully other people will correct me if I’m wrong.)

I don’t think that Example 2 and Example 3 are available anywhere, either. However, both features seem to me to be a little misguided. Autocompletion is designed to save you keystrokes, not to remind you of the properties themselves. More broadly, Sublime Text is a text editor; its purpose is not to teach you how to code.

You probably don’t want to use blue, red, etc as colors. It’s best to use hexadecimal as in #ffffff for white and #000000 for black. There many tools you can use to provide you the hex values for colors, including a Color Picker sublime plugin, online tools like Adobe Kuler or desktop image manipulation programs (Photoshop, GIMP, etc.). The confusing list you mention is to allow you save you the keystrokes for using HSL or RGB, which are alternate ways of writing out color values (with or without opacity, indicated by the a at the end).

For example, all of the following are different ways of writing out the same color:

  • #fe194b
  • hsl(347, 90%, 100%)
  • rgb(254, 25, 75)

It’s better to have a reference outside the editor that you use for the names of properties until you learn them. You’ll soon find that that’s the easy part; the hard part in writing CSS is in the combination of properties and the relationship of the CSS file with the HTML code (which brings about the Cascading part of CSS). I’m not aware of a tool that can do this thinking for you. The autocompletion as it currently exists will help you when its a matter of forgetting whether its list-style-type or list-style-decoration. That’s all.

I hope you find the above useful, if not exactly helpful, and not too discouraging :smile:

Alex

0 Likes
#3

Thank you very much for the help and the quick answer ! It was in deed useful and not discouraging at all ^^
Anyway, I’m not gonna give up on Sublim Text for so little :smiley: ! I tried a lot of other similar softwares, and it is definitely one of the best !

Thanks again !

0 Likes