Please use a meaningful class name that is short and contains part of what the css is doing with a random value if needed #28993
Unanswered
john-kruebbe-dxc
asked this question in
Ideas
Replies: 1 comment 1 reply
-
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 or perhaps this suggestion is to generate the shortname based on the value of the CSS, rather than allow it to be user controlled? |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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....
Beta Was this translation helpful? Give feedback.
All reactions