> When adding classes via JavaScript, we try to name them based on state (.is-hidden, .is-shown, .is-fullscreen, etc.). fit-to-screen seems not to represent state.

>>  those classes do indicate the state: "fit-to-screen" and "zoomed" are in fact states for the modal image.

They do, but their naming convention does not provide a clear understanding when reading the rules that this is the case. We prescribe to the technique used in SMACSS (http://smacss.com/book/type-state) to more clearly label when a state is being applied to the DOM and when styling that state in SCSS/CSS. Here's [an example from Studio's UI Notifications SCSS](https://github.com/edx/edx-platform/blob/master/cms/static/sass/elements/_system-feedback.scss#L10).

.fit-to-screen, .modal-open, and .zoomed are all classes that fall under this concern.