DEV Community

Discussion on: How I deal with CSS(2019)

Collapse
 
teippiviritys profile image
Teippi Viritykset

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.

Collapse
 
nkpgardose profile image
Neil Gardose • Edited

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:

const ListGroup = ({/* ... */}) => (
  <div className="ListGroup">
      <div className="item">/* ... */</div>
     /* ... */
  </div>
)

export default ListGroup

I hope this explanation helps. Cheers! 🍻