Finding CSS class and ids using developer tool may sound for easy for a developer using inspection tool. But  dashboard designer always finds some difficulties in getting Classes and ids.

what is CSS class and ID?

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

Example:

.intro{
 background-color:yellow;
}

The ID Selector

The #id selector styles the element with the specified id.

Example:

#firstname {
 background-color:yellow;
}

All css customization can be done using ID and classes.

So as a first step, I have created a simple utill component which can get you all the css classes and ID’s used in component.

So how to use it?

I can select any particular component or all components. It will retrieve the css classes and ID’s for that component.let’s say I need to check out button

component.

You can see all the styles for that specified id used for the button component. Now I can simply write a css something like this to change the button background-color using this id.

#BUTTON_1_button{
background-color:orange !important;
} 

So simply I can explore classes to know what are all the style available and simply make changes with the addition of !important.

I can also choose option to see class

This will reduce the difficulty of finding classes and ID’s. I have been trying to do something more with this,I will update you with few feature upgrades.