Discussion on: How I deal with CSS(2019)

View post

Replies for: 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 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! 🍻