Button--glass variation

[simurai]

The idea is to add an "invisible" Button. It's just a square that has no background, borders etc. Useful for things like icon buttons, where you only see the icon and nothing else. Or maybe a list item that you can click on, or a button that is part of header.

But I'm not sure if it's the right way, because the selector to fight specificity is getting ugly (lots of class chaining). For example if you wanna customize that "glass button" while using the light theme, you'd have to select it like this:

[data-montage-skin="light"] .digit-Button.digit-Button--glass {
    background: blue;
}

[data-montage-skin="light"] .digit-Button.digit-Button--glass.montage--active {
    background: green;
}

I fear that people would just use !important everywhere, but that will cause more conflicts for them. Hmm.. My dream is to have just a single Montage class, no matter if it's a skin or a variation. So the skin would be "backed into" digit-Button and digit-Button--glass could be used stand alone without being dependent on digit-Button. That would increase file size a bit (maybe not a too big concern). But maybe a bigger problem is authoring all the variations.. you would have a lot of duplicated styles that are hard to update. A solution could be a preprocessor that lets you extend CSS classes.. basically the same as we do with the "abstract" components.

[simurai]

Do you mean to use [class$="--glass"] on a global level? So you could kinda "reset/see through" any component by just adding *--glass? Hmm..

1. Currently we don't have any global styles. So we would have to add it to every single component anyways.
2. Those kind of selectors are a bit slower than just using classes.

Maybe at some point.. I was thinking to first just try it out with the Button and if it works well, see if we wanna do it for more components.

ps. all: unset also looks interesting.. Kinda a "reset per element". http://mcc.id.au/blog/2013/10/all-unset is supported enough (currently just Firefox nightly).