DEV Community

How I deal with CSS(2019)

Neil Gardose on December 05, 2019

In this post, I'll be sharing some of my methodologies in writing CSS and will show some component examples. Feel free to comment and share some ...

Read full post

Teippi Viritykset • Dec 6 '19

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.

Neil Gardose • Dec 8 '19 • 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! 🍻