Which high-level selectors to use for key bindings?

#1

I’ve been spending some time working on my bindings, and mostly I can get them to do what I want, but I have a best-practices question.

In terms of high level selectors, I haven’t been able to figure out when it’s appropriate to use different options. For example, in the DOM it seems like body, atom-workspace, and .workspace are effectively the same, but I see all three being used. Are there cases where the DOM would change such that the more specific scoping actually comes in to play? If so, how would I know what those cases are?

2 Likes
#2

The .workspace class on atom-workspace was used to indicate the workspace, but was deprecated in favor of custom tag name atom-workspace. It’s still there because otherwise a whole lot of packages would break, that were assuming a <div class="workspace">.

Here is a list of other such selectors.

3 Likes
#3

I still didn’t get the difference between body and atom-workspace.

0 Likes
#4

atom-workspace is the element that defines the web app. Remember that Electron is just a browser, so even though there’s no content or semantic difference between body and atom-workspace, body is treated as a non-tag because it doesn’t define any elements. It just provides the space for the elements, and the app needs an element as its entry point. It’s not necessary that Atom follow that convention, but it does.

1 Like