[improvement] Get rid of very generic class names

[wujekbogdan]

There are very generic class names used in the Photo Sphere UI (like .download-button, .active, .plus, .minus, etc). They can easily get overwritten.

I suggest to (at least) prefix all of them with a unique prefix, but I would rather use some kind of CSS naming convention, for example, a BEM methodology.

Of course, BEM is not the only CSS methodology and it's not perfect, but using any methodology (even if it's not perfect) is better than not using a methodology at all.

[mistic100]

What do you think of that ? it's more OOCSS than BEM

[wujekbogdan]

It's not pure BEM, but it's more like BEM than like OOCSS, because of the prefixes. IMO this solution is good enough, there's no point to implement the fully BEM-compatible code.

I don't even insist using BEM, I've just mentioned this methodology because of the prefixes (they call it blocks). Prefixes are important because they create a unique (hopefully unique, it's CSS so you're never sure ;)) "namespaces" that prevent the classes from being overwritten.

But if you want to get familiar with BEM and see a real-life example then take a look at PhotoSwipe. They've done it pretty well.

BTW, SCSS & helps to write BEM-compliant code in a very convenient way. Thanks to this feature we're allowed to write the code like:

.block {

  &__element {}

  &--modifier {}

}

which compiles to:

.block {}

.block__element {}

.block--modifier {}`

So when the block name is changed then it automatically affects the block elements. The block name can be even defined by a variable! It's useful if we want to create user-defined namespaces - a single scss variable can define the prefix for all the classes. Of course for the Photo Sphere there's no need to do such things. It's just an offtopic I made :).