Materialize: class prefix

[mantissa7]

All css styles should be prefixed to prevent css conflicts.

Like angular-material prefixed with md-*

[rodriguez-loic]

I agree. Or add the possibility to do it easily.

[maxupeng]

+1

[niekpocket]

+1

[JamesLMilner]

+1

[damsorian]

+100

[colinmathews]

+1

[jcapogna]

Is there a way to make this change without causing a huge headache for everyone with existing projects?

[rodriguez-loic]

Sure, just duplicating selectors: .row, .md-row instead of .row for example.
But changes have to be both in css and js, and it's quietly impossible do it alone manually.

[speicus]

The correct way to make this change without breaking anything is to provide 2 builds: the primary one, with prefixes, and the legacy one, without them. Look to libraries like modernizr which allow users to make a custom build with custom class prefixes.

P.S. A CSS framework without prefixes is very much like a person who thinks he is alone while in fact he is in a crowded room. The awkwardness of the situation becomes apparent very, very soon. :) In a big project especially. :)

[monolithed]

All css styles should be prefixed with a custom prefix.
A good solution and alternative is Ant Design. You should look at their solution:

.@{prefix} {
    ...
}

It is needed to exclude any conflicts when someone can redefine the standard prefix (for example, is actual for browser extensions). So, the prefix should be customized too.

[tomscholz]

In some way a duplicate of https://github.com/Dogfalo/materialize/issues/1303