search

OfficeDev / office-ui-fabric-core

The front-end CSS framework for building experiences for Office and Microsoft 365.
https://developer.microsoft.com/en-us/fabric
Other
3.77k stars 467 forks source link

CamelCase class names #278

Closed StfBauer closed 8 years ago

StfBauer commented 8 years ago

Hi, just a minor issue that should be considered. Currently Office UI Fabric has Camel Case class names. Where per definition HTML is case insensitive this might lead to some confusions or problem if you mistype the correct case of a class name.

Most browser nowadays treat classes in HTML documents case sensitive and classes that are not written correctly will be ignored. This is the reason why most frameworks only have lowercase characters on class name.

What do you think about this potential issue?

To be honest, sometime I fell in the same trap to have camel case class names too but in general I try to avoid them. Most time I refactor them out.

mikewheaton commented 8 years ago

We hear your pain on occasionally typing the CSS classes wrong and not having them applied. Still, camel casing improves the readability of classes (e.g. caretDownRight vs caretdownright). Dashes would typically be another option (e.g. caret-down-right) but our use of SuitCSS conventions rules that out, as dashes are meaningful for separating components, descendants, and modifiers.

StfBauer commented 8 years ago

:+1: Thank you for your clarification. To be honest never even heard of SuitCSS but mainly because it is not so broadly used as OOCSS, BEM or SMACSS.

No offend but from my perspective it looks pretty strange at first look and event harder to read. With camel case i have to read. with hyphens I can faster read an scan through the styles.

When you are used to read c# code it looks familiar but I doubt that that many front end developer use Suite.

mikewheaton commented 8 years ago

I'm afraid we have enough teams using the current class names that it'd be a hard sell to change things now. But we definitely hear your feedback and will keep this in mind for future major releases of Fabric (where we occasionally release breaking features), especially if we hear similar concerns from others. Thanks for your understanding and keep the suggestions coming.