Make the class name meaningful rather than random numbers and letters.

[john-kruebbe-dxc]

I already saw some related issues that were closed, but hope this would help with the reasoning behind the ask...

When I code sometimes I want to have named css in my app so that I can easily find it in the dom and for demos and dynamically show my customer the variations in css as below code snippet shows ( I have way oversimplified the example for clearer understanding):
/* 2023-08-25 - JMK - CSS - Add divs below with meaningful names to modify the logo if needed
These 4 elements, for examples only of what can be done or what the rest of the world does,
can easily be used in live demos to increase the size of the logo if need bigger in future
Instead of just drinking the Microsoft Cool Aid I want some styles to apply to images to show them
easily use by a non-random name from when I am debugging in the browser. Dont make me have to
cut and paste please as this is friendship. For example below I played around with
a gradient on the image itself and did not get very far because tired for the week but
maybe continue this another time and on another planet. Can I teach Micorsoft anything?
My suggestion AGAIN, use random part and a name on css styles */

/* 2023-08-25 - JMK - CSS - Demo bigger image */
.img_demo1 {
height: 110%;
width: 110%;
background-color: none;
border: 2px solid black;
padding: 0px;
}

/* 2023-08-26 - JMK - CSS - Demo current image size for title with a border /
.img_demo2 {
height: 50px;
width: 100%;
background-color: none;
border: 2px solid black;
padding: 0px;
}
/ 2023-08-24 - JMK - CSS - This was originally referenced in header.tsx as .im_div3 at aroun line 156
and has no border. We renamed it to img_demo3 for its purpose of demos*/
.img_demo3 {
height: 50px;
width: 20%;
background-color: none;
}
/* 2023-08-24 - JMK - Style for locating Settings button to show we are having an effect during debug /
.img_demo4 {
height: 50px;
width: 30%;
/ background-color: #f5d3f3; */
background-image: linear-gradient(#f7f0f7,rgb(112, 82, 112))
}

Suggestion is to put short meaningful name like in followed by the random part as you already have talked about in the fluent-ui video 3

So the class names could result in something like the following:

.pl-10-randomnum { padding-left: 10px; }
.c-red-randomnum { color: red; }

would be nice if could refer the to first unique part and if that is pl-10 vs c-red then it would be great as in below:

That would be better than a random number...

I like all of the existing features where I can create javascript objects, just suggesting changing the class name to be more meaningful and thus easier to use and search on the final html page doc.

[layershifter]

Hey,

There multiple reasons why we can't use anything human readable, mainly it's complexity and bundle size. Let me provide multiple examples:

makeStyles({
  root: { color: 'red' }
});
// ⬇️⬇️⬇️
// .cred { color: red }

In the simple example it looks fine 👍 But what about usage of rbga values or CSS variables? ⬇️

makeStyles({
  rootA: { color: 'rgba(255,0,0,0.3)' },
  rootB: { color: 'var(--colorNeutralForeground1)' }
});
// ⬇️⬇️⬇️
// .c25500003 { color: rgba(255,0,0,0.3) } 🤔 
// .cvarcolorNeutralForeground1 { color: var(--colorNeutralForeground1) } 🤔 

Okay, but what about properties themselves? Let's assume what use first letter and other capitals to generate classes:

makeStyles({
  rootA: { fontStretch: 'initial' },
  rootB: { fontSize: 'initial' }
});
// ⬇️⬇️⬇️
// .fs-initial  { font-stretch: initial } 
// .fs-initial { font-size: initial } 💣  oops, collision

Do we need a dictionary for this case? 😱

We also need classes for nested selectors and media queries:

makeStyles({
    ':before': { content: '""' },
  },
  root: {
    '@media(forced-colors: active)': { color: 'red' },
  },
});

What to do there? 🤔

---

The described approach has problems as you see and once we ago going to complex it's not really meaningful. On other side, hashes don't exceed 8 chars, deterministic and don't have collisions ¯_(ツ)_/¯ To simplify debugging, we created devtools that we suggest to use (https://chrome.google.com/webstore/detail/griffel-devtools/bejhagjehnpgagkaaeehdpdadmffbigb) instead of dealing with atomic classes.