Please use a meaningful class name that is short and contains part of what the css is doing with a random value if needed

[john-kruebbe-dxc]

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 as below code snippet shows:
/* 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

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

       ^

mapping | |
v

/* Fela JavaScript objects */

const styles = {
paddingLeft: 'pl-10',
color: 'c-red'
}

use pl-10-randomnumbersletters for example for the class name that describe color 10 pixels so that I can find them and have a way to back track it to my code as well....

[JustSlone]

This would be a good to discuss over in discussions or an issue at https://github.com/microsoft/griffel

This is something that might be able to be added to makeResetStyles however, since the CSS padding-left: 10px; could be reused in multiple places, giving it a non-random name doesn't actually make sense. A core optimization that griffel provides is it's ability to reduce the overall amount of CSS by de-duplicating and reusing the classnames.

or perhaps this suggestion is to generate the shortname based on the value of the CSS, rather than allow it to be user controlled?

[john-kruebbe-dxc]

I suggest padleft10px_random number here. That way you can know what it is styling on the page by the tag. If you need details, then you can go to the css description after.