Hey Teippi, I use PascalCase for the component name itself and camelCase for both component's modifier and elements. The reason why it gives identification that it's a component and not modifier or element.
Here's an example to give more clarity on how I approach my CSS. Let's say we have a ListGroup component:
.ListGroup{/* ... */}/* 👈 Component name. In PascalCase */.ListGroup.slim{/* ... */}/* 👈 Component's modifier. In camelCase. */.ListGroup>.item{/* ... */}/* 👈 Component's element. In camelCase. */.ListGroup>.actionBox{/* ... */}/* 👈 Component's element. In camelCase. */
As stated in my post, since React components are in PascalCase already. Naming its class name in PascalCase format would be reasonable as well. Here's a React example:
Why you prefer the PascalCase if everything else has almost always been camelcase?
So in one project you have pascal in css and camel in js.
Hey Teippi, I use
PascalCase
for the component name itself andcamelCase
for both component's modifier and elements. The reason why it gives identification that it's a component and not modifier or element.Here's an example to give more clarity on how I approach my CSS. Let's say we have a
ListGroup
component:As stated in my post, since React components are in
PascalCase
already. Naming its class name inPascalCase
format would be reasonable as well. Here's a React example:I hope this explanation helps. Cheers! 🍻