Class naming convention

[dstorey]

(was: text-slider class name inconsistent)

Since the Skeleton theme update, all the class names for the base element of a component use a consistent naming scheme of "montage-componentName". E.g. "montage-tokenField".

The textSlider component uses "montage-text-slider". This should be updated to "montage-textSlider". Makes styling the components more predicable if the names are consistent.

[Stuk]

There doesn't actually seem to be that much consistency: (stripping out components without dashes)

./input-range.reel/input-range.html: class="montage-inputRange"
./loading-panel.reel/loading-panel.html: class="montage-loading-panel"
./popup/alert.reel/alert.html: class="montage-alert-dialog"
./popup/confirm.reel/confirm.html: class="montage-confirm-dialog"
./popup/popup.reel/popup.html: class="montage-invisible montage-popup-container"
./rich-text-editor/overlays/rich-text-linkpopup.reel/rich-text-linkpopup.html: class="montage-link-popup"
./rich-text-editor/overlays/rich-text-resizer.reel/rich-text-resizer.html: class="montage-resizer-container"
./rich-text-editor/rich-text-editor.reel/rich-text-editor.html: class="montage-editor"
./scroll-bars.reel/scroll-bars.html: class="montage-scroll-bars"
./text-slider.reel/text-slider.html: class="montage-text-slider"
./token-field/token-field.reel/token-field.html: class="montage-tokenField"
./video-player.reel/video-player.html: class="montage-video-player"

tokenField and inputRange are the only components following this convention. Personally I would prefer the dash-form (montage-token-field) for two reasons: 1) everywhere else that something begins with a lowercase letter it is dashed (first uppercased means camel case) 2) most of our CSS uses dashes and not camel case.

@dstorey I'm assuming you don't really care which way it goes as long as it's consistent? (which I agree on) Do you have any opinions @kishores ?

[dstorey]

@Stuk they suppose to be consistent. All the regular components that have a native equivalent *and some of the others, such as tokenField) have been updated. I have a table in http://tetsubo.org/2012/06/introducing-the-new-default-skeleton-theme/

I don't have an opinion either way if it is montage-token-field or montage-tokenField, as long as it is consistent.

[kishores]

Agree with @Stuk. I think montage-input-text is consistent with the naming of the reel.

[mczepiel]

Yeah, I think we'd decided that filenames/attributes would be all lowercase and dash delimited; this follows the css property names to JavaScript equivalence.

[simurai]

@Stuk Those other components don't have a consistant naming because they were created "pre-Skeleton" and actually still should be updated as well.

So here is the reason to the camelCase classes in CSS: The goal was that when you look at a montage CSS class, you can already see how the markup is build. Therefore each child element is separated with a dash. As an example:

<div class="montage-inputRange">
    <div class="montage-inputRange-thumb"></div>
</div>

So if you first customize only the thumb in your stylesheet with .montage-inputRange-thumb {...} and later come back to also style the track you would know that its parent would be .montage-inputRange {...}. With montage-input-range, it would break that convention and you would have to check the inspector or the source.

If everybody is against the camelCase, we could also use an underscore for child elements. A bit like this: https://gist.github.com/1309546 but only one. So it would be:

<div class="montage-input-range">
    <div class="montage-input-range_thumb"></div>
</div>

[Stuk]

Ahhh, interesting, ok. Ignore the above pull request, I didn't get an email with your comment and have only just seen it.

[simurai]

@Stuk Oops, sorry.. commented too late. Well, I'm not married to the current version and open for alternatives. ;-) Using dashes to split up double names would be nice so that it's the same like the reels. But then it would also be nice to somehow differentiate child elements in another way. Like using underscores for those.

[Stuk]

Yep, it's a good idea. I'm wondering about states: for example in text-slider I currently have the class montage-text-slider-editing. Do you think this should be montage-text-slider_editing?

[simurai]

How about double dash for states? Same as https://gist.github.com/1309546 So it would be montage-text-slider--editing?

And the child elements with underscore so they don't conflict:

<span data-montage-id="text-slider" class="montage-text-slider" tabindex="0">
    <input type="text" data-montage-id="input" class="montage-text-slider_input"/>
    <span data-montage-id="value" class="montage-text-slider_value"></span>
    <span data-montage-id="units" class="montage-text-slider_label"></span>
</span>

And also double--dash for variations.. like if there would be different kind of text slider: montage-text-slider--large?

[Stuk]

I really like this idea. I want to throw the montage-google stuff into the mix to see how that would work

<div data-montage-id="container" class="montage-google-youtube-channel montage-google-youtube-channel--hide">
    <img src="" alt="" data-montage-id="imageA" class="montage-google-youtube-channel_thumbnail">
    <img src="" alt="" data-montage-id="imageB" class="montage-google-youtube-channel_thumbnail">
    <img src="" alt="" data-montage-id="imageC" class="montage-google-youtube-channel_thumbnail">

    <div data-montage-id="popup" class="montage-google-youtube-channel_popup">
        <button data-montage-id="close" class="montage-google-youtube-channel_close">×</button>
        <div data-montage-id="player" class="montage-google-youtube-channel_player"></div>
    </div>
</div>

This almost makes me think that montage_text-slider and montage-google_youtube-channel would be better... except that it looks ugly and is annoying to type.

[simurai]

What is the montage-google stuff? You mean if Montage needs to be Google branded? Ohh.. dear! Please no longer namespaces..!!! ;-) montage- feels already a bit too long. Maybe then we could use mg-?

Hey, have you tried double-clicking those names? Dashes separate the selection, underscores get combined.. so this brings me to this: montage-text_slider-input. Would be quicker to select just the parts that actually belong together. The only problem.. Underscores makes them visually more separated. ;-( I guess that's why montage-textSlider-input works nice in that regard.

Stupid question and I guess it was already dismissed earlier, but could the reels be camelCase? Like montage/ui/textSlider.reel. Or would that case some problems with servers or so?

[Stuk]

montage-google contains several Google APIs wrapped up into delicious components: https://github.com/Motorola-Mobility/montage-google.

Ahh yeah, the double click thing is an interesting usability problem... will need to think about this a bit more

[mczepiel]

We're avoiding camelCase in reels to avoid server case-sensitivity issues. The translation from class name to reel name is to dash-delimit the camelCase; please don't use underscores to do the same thing in the CSS classes.

Underscores would be fine between other parts of the classname montage_text-slider_input but it's a pain to type.

Is there a huge problem in making the parts less obvious by just using dashes everywhere?

Otherwise, could we use descendent selectors to avoid overly long/specific classnames?
e.g. .montage-text-slider and .montage-input styleable with the selector .montage-text-slider .montage-input