Hi, I am developing a project based office-ui-fabric-react.
I want to know css naming convention of office-ui-fabric-react.
Help me, thanks!
wellbeck190
>All comments
We are currently using CSS Modules for applying css styles. So if you are writing a new component then css is automatically scoped to the component, so you'd be able to do the following...
.root {}
.rootIsSelected{}
.labelIsActive {}
Basically, no need to have component name in class. Camel case everything. Modifiers are IsActive/IsOpen etc and should be combined with the element you are applying it to.
If you aren't writing new modules and only interacting with existing components, we use the following approach.
.ms-Button
.ms-ColorPicker
.ms-ColorPicker-thumb
.ms-ChoiceField-innerField
All classes are prefixed with .ms-, and then we use a BEM style format. So Block name is camel case with first level capitalized. Then element name is regular camel case.
Hope this helps!
micahgodbolt
on 27 Apr 2017
Related issues
rickyp-ms
·
3Comments
satbai
·
3Comments
gabrielruss
·
3Comments
nekoya
·
3Comments
carruthe
·
3Comments
Most helpful comment
We are currently using CSS Modules for applying css styles. So if you are writing a new component then css is automatically scoped to the component, so you'd be able to do the following...
Basically, no need to have component name in class. Camel case everything. Modifiers are IsActive/IsOpen etc and should be combined with the element you are applying it to.
If you aren't writing new modules and only interacting with existing components, we use the following approach.
All classes are prefixed with .ms-, and then we use a BEM style format. So Block name is camel case with first level capitalized. Then element name is regular camel case.
Hope this helps!