CSS class naming convention

[hannespreishuber]

after doing a usergroup presentation for MDL I think that the naming shema of the classes should be changed.
-the names are to long
-the logic _- -- is not intutive

• mdl- prefix should be removed

Bootstrap css typing is much faster

[surma]

The naming scheme, as can be found in the “General Rules and Principles” section, is called BEM. It is actually very straight forward (although, admittedly, we did screw it up in a few cases). If the names are too long, I’d recommend using @extend and building your own shorthands.

As for the mdl- prefix: Since we are not a framework (and therefore expect our users to possibly use other actual frameworks in addition to MDL), we have to be extra careful to avoid class name clashes. E.g.: .cell might very well be provided but some other CSS toolkit and everything would break, which is why we are namespacing under .mdl-*

[hannespreishuber]

I understand the (good) concept- In real life, it is harder than eg bootstrap- takes more time and more care
Sometimes you Need more than 100 characters css classes- at top - and another bunch in child elements.
don't tell me, that is superproductive

also the -js thing, can it be like

mdl-btn -js btn-fab btn-ripple btn-colored
(it's still a bunch)

[Garbee]

harder than bootstrap

Well, I guess it is a good thing we aren't really competing with Bootstrap. The CSS selectors follow a specific set of rules and that can't be changed anytime soon. They are built to not collide as much as possible with other projects. So having mdl-button--colored over btn-colored is a big win for us. btn-colored is very likely to already be used in places, ours is not.

If people have a hard time grasping it, sorry. BEM does take some getting used to, but once you are over that hump it is pretty nice for project developers.

If someone wants to, they are free to make a package that is a scss sheet which generates shorter names. This is a specific design decision for this project and it isn't changing anytime soon.

[hannespreishuber]

last try
th class="mdl-data-table__cell--non-numeric">Material

1. Standard case is text
2. the whole sense of this class is text-align:left

this is only from a academic perspective a good solution

[Garbee]

Straight from the spec:

Right-align numeric columns

The naming comes right from the specification. Except we are aligning things right by default, so you specify that it is not numeric to get left alignment.

[surma]

I have a hard time following your argument.

However: I do not believe that typing itself is actually what takes up most of time when developing. Especially when using any kind of editor that is aware of HTML and CSS, auto-completion will take care of that for you. Secondly, as @Garbee mentioned before, it keeps the markup very semantic and readable and is therefore suited for collaborative work.

don't tell me, that is superproductive

We heard you that you think the class names are too long, but having dogfooded MDL myself (among other things by writing the templates) I personally disagree that the class names are an issue (that’s obviously a question of taste, though).

If the class names alone are such a showstopper for you, you can either define your own shortcuts (which is a one-time task!) or, sadly, not use MDL. We made an informed decision to use BEM and this comes along with that.

[hannespreishuber]

I just want to help to bring MDL Forward as I love the desgin and some ideas. For your better understanding I use VIsual Studio 2015 and IntelliSense. The feeling about the naming Comes from a presentation right in front of a 60 web dev audience.
The changing of a convention is not a option (and should even not be suggested) as it make it more readable for me, but unreadable for the rest of the world.

[Garbee]

Is there a recording of this presentation available? Context may play a role here. If the classnames were just being spun off, but not detailed as to why they are this way then yes it can be very jarring.

[hannespreishuber]

no recording- just the Project here on Github https://github.com/hannespreishuber/SKAP01
was 2hours live coding SPA - from start2 End - UI with MDL (instead of bootstrap, which I used in user Group presentations before)

[Garbee]

So, no context on whether or not the BEM style naming was explained.

Nothing is changing here, but in the future making sure developers at least have a brief intro to BEM may prove helpful. Just seeing it getting used is awkward, but if you understand it, then things make perfect sense (unless we messed up, which has happened.)