Custom Tag explaination


#1

When customizing keybindings, I’m often puzzled by custom tag names (also named selectors in other places), like the ones found in this list. Is there a place where the meaning of these tags are explained?

Examples are atom-pane, atom-text-editor or atom-workspace. What do they correspond to?


#2

These are examples of semantic HTML. You can take a look at the dev tools (View -> Developer -> Toggle Developer Tools) to see them in action.

atom-workspace holds everything. In practice, it’s synonymous with body.

atom-text-editor represents a box within which text can be typed. Some of these boxes, such as on the Find and Replace panel, have a mini attribute, so you’ll often see atom-text-editor[mini] or atom-text-editor:not([mini]).

atom-pane defines a pane, which is what holds a set of tabs and pane items. When you split right, you’re opening a second pane.


#3

Thank you, most helpful. :slight_smile:


#4

No problem. I recommend opening a window in dev mode (View -> Developer -> Open in Dev Mode...) some time and just exploring. Dev mode allows you to right-click to inspect specific elements just like you can in Chrome.